Selettore colori online (color picker)

Come usare il selettore colori

1. Scegli un colore con il riquadro colore, che apre il selettore del tuo dispositivo, oppure incolla un codice nel campo di testo: HEX con o senza # (3, 4, 6 o 8 cifre), rgb() e rgba(), hsl() e hsla() con virgole o spazi, un semplice elenco come 31, 78, 121, oppure uno dei 148 nomi di colore CSS (sono in inglese: red, teal, navy…).
2. Preleva da un’immagine: carica, trascina o incolla una foto, un logo o uno screenshot e clicca o tocca il punto che ti interessa; una lente mostra i pixel intorno. In Chrome, Edge e Opera su computer, Preleva dallo schermo legge qualsiasi pixel del tuo schermo, come un contagocce.
3. Copia il formato che ti serve. Ogni campione della tavolozza copia il suo codice HEX quando lo tocchi.

L’immagine viene letta sul tuo dispositivo e non viene mai caricata online.

I formati dei colori

HEX è l’RGB scritto in base 16: ogni coppia di cifre è un canale da 00 a ff (da 0 a 255), quindi 1f = 1 × 16 + 15 = 31. Un’ottava e una nona cifra aggiungono la trasparenza (canale alfa), e #abc è la forma breve di #aabbcc.

HSL e HSV partono dalla stessa tonalità, l’angolo sulla ruota dei colori (0° rosso, 120° verde, 240° blu), con R, G e B riportati tra 0 e 1. La luminosità è L = (max + min) / 2 e la saturazione HSL è (max − min) / (1 − |2L − 1|). Nell’HSV il valore è semplicemente V = max e la saturazione è (max − min) / max. Per questo un rosso pieno è hsl(0, 100%, 50%) ma hsv(0, 100%, 100%).

CMYK qui è la conversione da manuale: K = 1 − max, poi C = (1 − R − K) / (1 − K), e lo stesso per M e Y. Le tipografie convertono con profili ICC adatti a carta e inchiostri, quindi i loro numeri saranno diversi: consideralo un punto di partenza.

Il nome CSS più vicino si trova convertendo i due colori nello spazio CIELAB e prendendo la distanza in linea retta più piccola (ΔE, CIE76); un ΔE di circa 2,3 viene spesso indicato come la differenza più piccola che l’occhio nota.

Esempio: #1f4e79

Il blu scuro predefinito si divide in 1f, 4e e 79, cioè RGB 31, 78, 121. Il blu è il canale più alto (121 / 255 = 0,475) e il rosso il più basso (0,122), quindi V = 47%, saturazione HSV = (121 − 31) / 121 = 74%, luminosità = (0,475 + 0,122) / 2 = 30% e saturazione HSL = 59%. La tonalità risulta 208,7°, mostrata come 209. La luminanza relativa è 0,0712, quindi il contrasto con un testo bianco è 8,66:1 (livello AAA) ma con il nero solo 2,42:1. Il colore con nome più vicino è steelblue, a ΔE 21: il nome è solo una descrizione approssimativa.

Contrasto e accessibilità (WCAG 2.2)

La verifica del contrasto segue le definizioni delle Web Content Accessibility Guidelines 2.2 del W3C. Ogni canale viene linearizzato (c / 12,92 fino a 0,04045, altrimenti ((c + 0,055) / 1,055)^2,4), la luminanza relativa è L = 0,2126 R + 0,7152 G + 0,0722 B e il rapporto di contrasto è (L_{più chiaro} + 0,05) / (L_{più scuro} + 0,05), da 1:1 fino a 21:1.

Per «testo grande» si intende almeno 18 punti (24 pixel CSS) oppure 14 punti in grassetto (circa 18,7 pixel). I rapporti vengono troncati, non arrotondati, alla seconda cifra decimale, così 4,499:1 non risulta mai superato; un colore trasparente viene prima fuso con il bianco o il nero con cui è confrontato. In Italia la Legge Stanca (L. 4/2004) e le linee guida AgID chiedono ai siti della pubblica amministrazione il rispetto della norma EN 301 549, che riprende i criteri WCAG di livello AA: il contrasto minimo di 4,5:1 vale anche lì.

Più chiari, più scuri e armonie

Le tinte più chiare mescolano il colore con il bianco a passi del 20%, quelle più scure con il nero: una scala pronta per stati al passaggio del mouse, bordi e sfondi. Le armonie mantengono saturazione e luminosità e ruotano la tonalità: il complementare sta a 180°, gli analoghi a 30° per parte, i colori della triade a 120° l’uno dall’altro e i complementari divisi a 150° e 210°.

I codici dei colori più cercati

Il campo di testo accetta i nomi CSS, che sono in inglese. Ecco i colori di base con il nome CSS e il codice HEX; incolla il nome o il codice qui sopra per avere RGB, HSL, CMYK e contrasto.

Oro e argento sono colori metallici: su schermo diventano un giallo e un grigio pieni, perché la lucentezza del metallo non si può rendere con un solo codice. I colori RAL delle vernici e i Pantone sono cataloghi di colori fisici: le loro conversioni in HEX pubblicate online sono sempre approssimative.

Consigli

• Lo stesso codice HEX può sembrare diverso su due schermi (luminosità, modalità notturna, display a gamma ampia), ma i numeri restano gli stessi.
• Le foto raramente hanno un colore uniforme: attiva Media di 5 × 5 pixel o confronta più punti.
• Per scritte decorative usa il generatore di font; per etichette con codice a barre, il generatore di codici a barre.

Domande frequenti

Ultimo aggiornamento: 15 ottobre 2026