Selettore di colore
Trova il codice esatto di qualsiasi colore, in ogni formato.
Verifica del contrasto
- AA
- AA testo grande
- AAA
- AA
- AA testo grande
- AAA
Funziona nel browser. Quello che scrivi non viene inviato da nessuna parte.
- 5 formati di colore
- Verifica contrasto WCAG
- Supporto per l'opacità
Come scegliere un colore
- Trascina nel quadrato per impostare saturazione e luminosità, poi sposta il cursore della tonalità.
- Oppure scrivi un codice in qualsiasi formato: HEX, RGB, HSL, HSV o CMYK.
- Copia il codice che ti serve e verifica il suo contrasto qui sotto.
Confronto dei formati di colore
Ogni riga qui sotto descrive lo stesso arancione. Cambia solo la notazione.
| Formato | Esempio | Usato in |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, strumenti di design |
| RGB | rgb(240, 138, 60) | CSS, editor di immagini |
| HSL | hsl(24, 84%, 59%) | CSS, il più facile da regolare a occhio |
| HSV/HSB | hsv(24, 75%, 94%) | Selettori di app di pittura e design |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Design di stampa e miscelazione inchiostri |
Usa HEX o RGB per il web, HSL quando vuoi regolare la luminosità o la saturazione di un colore senza cambiarne la tonalità, e CMYK come punto di partenza per la stampa.
Livelli di contrasto WCAG
La verifica del contrasto qui sotto confronta il tuo colore con bianco pieno e nero pieno e valuta entrambi secondo i livelli WCAG 2.
| Livello | Testo normale | Testo grande |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Testo grande significa circa 24 px, o 19 px in grassetto. La maggior parte dei siti deve superare solo il livello AA. AAA è una soglia più severa, usata soprattutto su siti governativi o incentrati sull'accessibilità.
Consigli per scegliere colori accessibili
- Mantieni fissa la tonalità e abbassa la luminosità in HSL per ottenere una tonalità più scura dello stesso colore per gli stati hover e attivo.
- Un colore che supera il livello AA su bianco può fallire su uno sfondo colorato, quindi verifica il contrasto rispetto allo sfondo reale della pagina, non solo al bianco o al nero.
- Il contagocce funziona solo su Chrome ed Edge da computer. Firefox e Safari non hanno ancora aggiunto l'API EyeDropper.
- Ottieni una prova di stampa prima di fidarti di un valore CMYK per un'intera tiratura. Gli stessi numeri possono apparire diversi su carta patinata e non patinata.
Domande su Selettore di colore
Come ottengo il codice colore di qualcosa sul mio schermo?
Su Chrome ed Edge da computer, clicca su Preleva dallo schermo, poi clicca in qualsiasi punto dello schermo. Gli altri browser non offrono ancora questa funzione: fai uno screenshot e aprilo in un selettore di colore per immagini.
Qual è la differenza tra HEX, RGB e HSL?
Descrivono lo stesso colore in modi diversi. HEX e RGB indicano le quantità di rosso, verde e blu (HEX le scrive in base 16), mentre HSL indica tonalità, saturazione e luminosità, più facili da regolare a mano.
Quale rapporto di contrasto serve per un testo leggibile?
Il livello AA del WCAG richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande, cioè circa 24 px, o 19 px in grassetto. Il livello AAA porta il testo normale a 7:1.
I valori CMYK sono esatti?
Sono una conversione matematica diretta dall'RGB. I colori di stampa reali dipendono da inchiostri, carta e profilo della stampante, quindi usali come punto di partenza e controlla una prova di stampa.
Cosa cambia il cursore dell'opacità?
Imposta la trasparenza da 0 (invisibile) a 100 (pieno). Sotto 100, il codice HEX guadagna due cifre in più e RGB diventa rgba(). Il contrasto viene verificato per il colore così come appare su ogni sfondo.
A cosa serve l'HSV che l'RGB non offre?
L'HSV separa la tonalità di un colore da quanto appare luminoso e saturo, motivo per cui i selettori di pittura e gli editor di foto danno un cursore per la tonalità e un altro per la luminosità invece di mescolare rosso, verde e blu a occhio.
Posso ottenere un colore Pantone da qui?
No. Pantone è un sistema di colori a tinta piatta su licenza, legato a inchiostri specifici, non una semplice conversione matematica da RGB o CMYK. Usa il valore CMYK come punto di partenza e conferma la corrispondenza esatta con la tua tipografia.