Selettore di colori

Come usare il selettore di colori

1. Clicca sul campione sotto Scegli un colore per aprire il selettore di colori del browser, poi scegli un colore. Puoi anche scrivere o incollare un valore nel campo Codice colore: un codice HEX come #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) o un nome CSS come tomato.
2. L’anteprima grande si aggiorna subito, con il codice HEX scritto in nero o in bianco, a seconda di quale si legge meglio su quello sfondo.
3. In Codici colore, copia il formato che ti serve con il pulsante Copia accanto: HEX, RGB, HSL, HSV o CMYK.
4. Clicca su Colore casuale quando cerchi ispirazione, oppure su Preleva dallo schermo (nei browser che lo supportano, come Chrome ed Edge) per campionare qualsiasi pixel dello schermo, anche in altre finestre.

Tutto avviene nel tuo browser: nessun colore o immagine viene inviato altrove.

Cosa significa ogni codice colore

• HEX è la notazione esadecimale a sei cifre usata in HTML e CSS. Ogni coppia di cifre è un canale (rosso, verde, blu) da 00 a FF, quindi #1E90FF significa rosso 30, verde 144, blu 255.
• RGB riporta gli stessi tre canali come numeri decimali da 0 a 255. È il formato che si aspettano la maggior parte dei software di grafica e delle librerie di programmazione.
• HSL descrive un colore con tonalità (un angolo da 0° a 360° sulla ruota dei colori), saturazione e luminosità. È comodo per schiarire o scurire un colore cambiando un solo numero.
• HSV (detto anche HSB) usa tonalità, saturazione e valore (brillantezza). È il modello dietro i quadrati di colore di Photoshop, Figma e molti altri editor.
• CMYK esprime il colore come percentuali di inchiostro ciano, magenta, giallo e nero.

Sui valori CMYK

I codici CMYK sono una conversione semplificata: K = 1 − max(R, G, B), poi C = (1 − R − K) / (1 − K), e lo stesso per M e Y. È la formula standard dei manuali, ma non usa un profilo ICC. La stampa reale dipende dalla macchina, dalla carta e dagli inchiostri, quindi la tipografia convertirà i tuoi colori con il proprio profilo e il risultato potrà essere diverso. Usa questi numeri come punto di partenza, non come prova di stampa.

Leggere i rapporti di contrasto

Sotto il codice HEX, l’anteprima mostra il Contrasto su bianco e il Contrasto su nero, calcolati con la formula della luminanza relativa delle WCAG 2. Per il testo normale serve un rapporto di almeno 4,5:1 al livello AA, e di 3:1 per il testo grande e gli elementi dell’interfaccia. Se il tuo colore raggiunge solo 3:1 sul bianco, usalo per titoli grandi o icone e scegli una sfumatura più scura per il testo.

Consigli

• Puoi incollare i codici HEX senza #: funziona anche 1e90ff, così come le forme brevi tipo f60.
• Sono accettati anche valori con trasparenza, come rgb(0 0 0 / 50%); il selettore mostra il colore opaco.
• La finestra dei colori del browser cambia da un sistema all’altro. Se ti serve un valore preciso, scriverlo nel campo Codice colore è sempre esatto.