Selettore colore online

Selettore colore e generatore di palette

Questo selettore colore (o color picker) serve a trovare una tinta e a copiarne il codice nelle notazioni più usate: HEX, RGB, HSL e CMYK. Mostra anche il nome CSS più vicino, nove sfumature, le armonie del colore, il contrasto con il bianco e con il nero, e compone una palette di colori di cinque toni abbinati.

Come scegliere un colore

1. Clicca o trascina nel quadrato «Saturazione e luminosità», poi regola il cursore «Tonalità». Funzionano anche le frecce della tastiera. In più ci sono il «Selettore del browser» e, in Chrome o Edge su computer, il pulsante «Contagocce».
2. Oppure scrivi un codice nel campo HEX, RGB o HSL: digitando rgb(0,128,0) ottieni #008000, che in CSS si chiama green. Ogni riga ha il suo pulsante «Copia».
3. In «Sfumature» e «Armonie di colori» un clic su un campione lo seleziona e ne copia il codice.
4. «Genera una palette» (o la barra spaziatrice) estrae cinque colori. Spunta «Blocca» sotto quelli da tenere e genera di nuovo. Con «Copia i codici HEX», «Copia come variabili CSS» e «Salva la palette» porti via il risultato; sul dispositivo restano al massimo dieci palette.

Il colore corrente viene scritto nell'indirizzo della pagina, dopo il segno #: chi apre quell'indirizzo vede lo stesso colore. Viene anche ricordato per la visita successiva.

HEX, RGB o HSL: quale usare

Tutte e tre descrivono gli stessi colori dello schermo. HEX è la più breve: #008080 sta in sette caratteri ed è quella che si incolla in un foglio di stile o in un programma di grafica. RGB indica le quantità di rosso, verde e blu da 0 a 255: rgb(0, 128, 128). HSL separa la tonalità (un angolo da 0 a 360°), la saturazione e la luminosità: hsl(180, 100%, 25%). È la più comoda per ritoccare un colore a mano: alzi l'ultimo numero per schiarire, giri il primo per cambiare tinta. Il sito offre anche convertitori dedicati a ogni coppia di formati, per esempio da HEX in RGB.

Come abbinare i colori

Immagina tutte le tinte disposte su un cerchio: rosso a 0°, verde a 120°, blu a 240°. Le armonie sono semplici distanze su questo cerchio cromatico. Partiamo dal verde petrolio #008080, tonalità 180°:

• Complementare (180 + 180 = 360°, cioè 0°): il bordeaux #800000.
• Analoghi (150° e 210°): #008040 e #004080.
• Triade (300° e 60°): il viola #800080 e l'oliva #808000.

Lo strumento aggiunge la tetrade (ogni 90°) e i complementari divergenti (±150°). Per le dosi, arredatori e grafici si affidano spesso al riferimento 60-30-10: 60 % di colore dominante (pareti, sfondo della pagina), 30 % di colore secondario (mobili, riquadri), 10 % di colore d'accento (cuscini, pulsanti).

Leggibilità e contrasto

Un testo si legge bene quando la sua luminosità si stacca nettamente da quella dello sfondo. Le linee guida di accessibilità WCAG misurano questo distacco con un rapporto che va da 1:1 a 21:1 (nero su bianco). Chiedono almeno 4,5:1 per un testo normale, livello AA, perché sotto questa soglia chi ha la vista indebolita, o chiunque guardi il telefono in pieno sole, fa fatica a leggere. A un testo grande (24 px, oppure 18,66 px in grassetto) basta 3:1. Il livello AAA richiede 7:1 e 4,5:1.

Qualche numero: il grigio medio #808080 su bianco dà 3,94:1, insufficiente per un testo normale, mentre con il nero arriva a 5,31:1. Il blu #1f5fe0 su bianco dà 5,56:1 e supera il livello AA.

Ricorda anche il daltonismo, che riguarda circa l'8 % degli uomini e lo 0,5 % delle donne: rosso e verde si confondono facilmente. Non affidare mai un'informazione al solo colore. Un campo con un errore ha bisogno di un messaggio o di un'icona, non soltanto di un bordo rosso.

Schermo e stampa

Uno schermo emette luce e mescola rosso, verde e blu (RGB). Una stampante deposita sulla carta inchiostri ciano, magenta, giallo e nero (CMYK). Molti colori molto accesi dello schermo non esistono come inchiostro: un blu elettrico in stampa risulta più spento. Il codice CMYK mostrato qui è una conversione teorica, senza profilo colore.

Codici dei colori più comuni

Domande frequenti

Come trovo il codice di un colore che vedo sullo schermo?

Con il pulsante «Contagocce», se il tuo browser lo mostra: premilo e clicca sul punto che ti interessa. Il codice compare subito nelle quattro notazioni.

Che cos'è il «Nome CSS più vicino»?

Il CSS riconosce 140 colori con il loro nome inglese, da aliceblue a yellowgreen. Lo strumento cerca quello con i valori RGB più vicini al tuo colore e indica «corrispondenza esatta» quando i codici coincidono.

Come sono calcolate le sfumature?

Mantengono tonalità e saturazione del tuo colore e fanno scendere la luminosità HSL dal 90 % al 10 %, a passi di dieci. Per #008080 si va da #ccffff a #003333.

Come tengo un colore quando rigenero la palette?

Spunta «Blocca» sotto quel colore. Alla generazione successiva resta al suo posto e i nuovi vengono scelti attorno alla sua tonalità. Le palette salvate restano nel browser, solo su questo dispositivo.