Selettore colori hex (color picker)

Q: Quali nomi di colori CSS sono supportati?

Tutti i 148 colori con nome del CSS Color Module, da aliceblue a yellowgreen , compreso rebeccapurple . Digita un nome nel campo hex oppure filtra l'elenco sotto lo strumento e clicca su un colore per selezionarlo.

Clicca sul campione per scegliere un colore, oppure digita un codice hex o un nome di colore CSS. Ottieni subito tutti i formati colore, le varianti chiare e scure, le armonie abbinate e una verifica immediata del contrasto WCAG con testo bianco e nero.

#7C3AEDClicca per scegliere un colore

Codice colore hex

HEX
RGB
HSL
HSV
CMYK
Nome CSS

Varianti chiare e scure

Clicca su un campione per copiarne il codice hex.

Armonie cromatiche

Contrasto e accessibilità (WCAG)

Testo bianco su questo colore

Testo nero su questo colore

Nomi dei colori CSS

Filtra i nomi dei colori

Privacy garantita: i tuoi dati vengono elaborati nel browser e non vengono mai caricati su alcun server.

Come usare il selettore colori hex

Clicca sul campione grande per aprire il selettore colori del sistema, oppure digita un codice hex come #1E90FF o un nome come tomato.
Copia il formato che ti serve: HEX, RGB, HSL, HSV o CMYK. Clicca su un campione qualsiasi tra varianti chiare, scure o armonie per copiarne il codice hex.
Controlla i riquadri del contrasto per vedere se il testo bianco o nero sul tuo colore raggiunge il livello WCAG AA o AAA.

Come funzionano i codici colore hex

Un codice colore hex come #FF6347 contiene tre byte: rosso (FF = 255), verde (63 = 99) e blu (47 = 71). Ogni canale va da 00 a FF, per un totale di 256 × 256 × 256 = 16.777.216 colori possibili. Valori uguali producono grigi – #000000 è il nero, #808080 il grigio medio e #FFFFFF il bianco – e valori più alti rendono un colore più chiaro.

Varianti chiare, scure e armonie cromatiche

Una variante chiara (tint) è il tuo colore mescolato con il bianco, mentre una variante scura (shade) è il tuo colore mescolato con il nero. Il selettore le mostra entrambe a passi del 10%: comodo per stati hover, bordi e sfondi coordinati con il colore del brand.

Le armonie ruotano la tonalità lungo la ruota dei colori mantenendo saturazione e luminosità:

Complementare (180°) – il colore opposto, per un contrasto forte e per le call to action.
Analoga (±30°) – i colori vicini sulla ruota, per palette calme e coerenti.
Triadica (±120°) – tre colori equidistanti, per design vivaci ma equilibrati.

Contrasto dei colori e WCAG

Le Linee guida per l'accessibilità dei contenuti web (WCAG) richiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale (livello AA) e di 7:1 per il livello AAA. Il testo grande – 18 pt, oppure 14 pt in grassetto – richiede 3:1 per il livello AA. Il rapporto confronta la luminanza relativa dei colori di testo e sfondo e va da 1:1 (colori identici) a 21:1 (nero su bianco).

Domande frequenti

Cosa sono i codici colore esadecimali?

Un codice colore hex descrive un colore con sei cifre esadecimali: due per il rosso, due per il verde e due per il blu, ad esempio #FF6347 (tomato). CSS, HTML, strumenti di design e programmi di grafica li riconoscono tutti.

Quanti colori può rappresentare un codice hex?

256 × 256 × 256 = 16.777.216 colori. Con una coppia aggiuntiva per l'alfa (#RRGGBBAA) ognuno di essi può avere anche 256 livelli di trasparenza.

Quali nomi di colori CSS sono supportati?

Tutti i 148 colori con nome del CSS Color Module, da aliceblue a yellowgreen, compreso rebeccapurple. Digita un nome nel campo hex oppure filtra l'elenco sotto lo strumento e clicca su un colore per selezionarlo.