Come si usa: Convertitore codici colore
- Clicca su Scegli colore per selezionare il colore che ti serve, oppure incolla un valore HEX, RGB o HSL nel campo Inserisci codice colore.
- Nella tabella compaiono i valori HEX, RGB, HSL, HSV e CMYK: con il pulsante Copia li copi subito.
- Nella sezione sul contrasto controlla se si legge meglio il testo bianco o quello nero.
- Nelle palette in basso puoi cliccare una tonalità più chiara o più scura dello stesso colore per selezionarla al volo.
Come convertire HEX in RGB
Il codice HEX #RRGGBB indica i valori di rosso, verde e blu, ciascuno con due cifre esadecimali (da 00 a FF, cioè da 0 a 255 in decimale). Basta dividere il codice a coppie di cifre e convertire ogni coppia in decimale per ottenere il valore RGB.
#FF8800 → FF = 255, 88 = 136, 00 = 0 → rgb(255, 136, 0)
Per passare da RGB a HEX si fa il contrario: ogni valore si converte in due cifre esadecimali e le coppie si scrivono una dopo l'altra. Dato che 37 → 25, 99 → 63 e 235 → EB, rgb(37, 99, 235) corrisponde a #2563EB. Un HEX a 3 cifre (#F80) equivale al codice in cui ogni cifra è ripetuta due volte, cioè #FF8800. Se vuoi capire meglio i calcoli in base 16, prova il convertitore di basi numeriche.
Che differenza c'è tra HSL, HSV e CMYK?
| Formato | Componenti | Uso tipico |
|---|---|---|
| RGB / HEX | Intensità dei tre colori primari della luce (0–255) | Web e design per lo schermo |
| HSL | Tonalità (0–360°), saturazione, luminosità | CSS, quando vuoi regolare solo la luminosità |
| HSV (HSB) | Tonalità, saturazione, valore (brillantezza) | Selettori colore di Photoshop e di altri programmi di grafica |
| CMYK | Percentuali dei quattro inchiostri (ciano, magenta, giallo, nero) | Stampa |
I valori CMYK sono un'approssimazione calcolata da quelli RGB con una formula. Il colore stampato dipende dalla carta e dal profilo colore della stampante: per i lavori importanti chiedi alla tipografia quali standard colore usa.
La soglia di contrasto 4,5:1 e come scegliere il colore del testo
Le linee guida per l'accessibilità dei contenuti web (WCAG 2.1) raccomandano un contrasto tra testo e sfondo di almeno 4,5:1 (livello AA) per il testo normale e di almeno 3:1 per il testo grande (circa 24 px o più, oppure 18,66 px o più in grassetto). Con un rapporto di 7:1 o più si raggiunge il livello AAA, più severo.
Il rapporto di contrasto si calcola a partire dalla luminanza relativa L dei due colori: (L più chiara + 0,05) ÷ (L più scura + 0,05). Il massimo è 21:1, cioè il contrasto tra bianco e nero. Quando scegli il colore di un pulsante o di un banner, usa il colore del testo che nel risultato qui sopra ottiene almeno AA: così sarà facile da leggere per la maggior parte delle persone.
Le WCAG sono il riferimento anche per le norme europee sull'accessibilità digitale, come la norma EN 301 549, quindi controllare il contrasto è utile anche per siti di enti pubblici e aziende.
Come usare i codici colore nel CSS
Puoi incollare i valori convertiti direttamente nel CSS. I tre formati qui sotto indicano lo stesso colore.
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
Nota: nel CSS i decimali si scrivono sempre con il punto, non con la virgola. Se ti serve un colore semitrasparente, aggiungi l'opacità dopo una barra, come in rgb(37 99 235 / 50%), oppure aggiungi due cifre in fondo al codice HEX, come in #2563EB80 (80 corrisponde a circa il 50% di opacità).