Come si usa
- Inserisci un colore, come #0f766e, rgb(15 118 110), hsl(175 77% 26%) o oklch(…), oppure sceglilo con il selettore colore.
- Copia dall'elenco il formato che ti serve.
- Imposta un colore di sfondo per verificare il rapporto di contrasto e i risultati WCAG AA/AAA.
- Fai clic su una sfumatura della scala per usarla.
Opzioni spiegate
- HEX / RGB
- Colori dello schermo espressi come rosso, verde e blu da 0 a 255. #rrggbbaa e rgb(… / 50%) aggiungono la trasparenza.
- HSL / HSV
- Tonalità, saturazione e luminosità (o valore). Utili per schiarire o scurire un colore a mano.
- OKLCH
- Uno spazio colore percettivo di CSS Color 4. Cambiando la luminosità, la tonalità e la vivacità percepita restano stabili, il che lo rende ideale per palette e temi scuri.
- CMYK
- Una conversione semplice, solo come riferimento. I colori di stampa reali dipendono dal profilo colore della stampante, quindi chiedi i valori esatti alla tua tipografia.
- Rapporto di contrasto
- Al livello AA, WCAG 2.2 richiede 4,5:1 per il testo normale e 3:1 per il testo grande (18 pt, o 14 pt in grassetto); al livello AAA richiede 7:1 e 4,5:1.
Esempio
#0f766e corrisponde a rgb(15 118 110), hsl(175 77% 26%) e oklch(51.1% 0.086 186.4). Su sfondo bianco il suo rapporto di contrasto è di circa 5,5:1, che supera il livello WCAG AA per tutte le dimensioni del testo.
Colori comuni in ogni formato
Colori con nome CSS e relativi valori. Il CMYK qui è una semplice conversione matematica; per la stampa professionale usa i valori CMYK del profilo colore della tua tipografia.
| Nome CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Quale formato usare
HEX è il modo più breve di scrivere un colore in CSS e negli strumenti di design: due cifre esadecimali ciascuna per rosso, verde e blu.
RGB è la stessa informazione in decimale, e rgb(255 0 0 / 50%) aggiunge la trasparenza.
HSL descrive tonalità, saturazione e luminosità, il che rende facile creare sfumature più chiare o più scure dello stesso colore cambiando solo l’ultimo numero.
OKLCH è un formato CSS più recente in cui passi uguali di luminosità appaiono ugualmente diversi all’occhio: utile per palette di colori accessibili.
Domande frequenti
Qual è un buon rapporto di contrasto per il testo?
Almeno 4,5:1 per il testo normale (WCAG AA). Il nero puro su bianco è 21:1; il comune grigio #767676 su bianco è 4,54:1 e supera appena la soglia.
Perché il valore CMYK è diverso da quello di Photoshop?
Photoshop converte tramite un profilo colore ICC specifico per una macchina da stampa e una carta. Questo strumento usa la semplice formula matematica, adatta per stime ma non per le prove di stampa.
Che differenza c'è tra HSL e OKLCH?
HSL è un semplice riarrangiamento di RGB, quindi un giallo e un blu con la stessa luminosità appaiono molto diversi per brillantezza. OKLCH è progettato in modo che la stessa luminosità appaia ugualmente brillante all'occhio.
Posso già usare OKLCH in CSS?
Sì. oklch() funziona in tutti i principali browser attuali.
Privacy
Questo strumento funziona interamente nel tuo browser. File e testi vengono elaborati sul tuo dispositivo e non vengono mai caricati sui nostri server.