Come sono organizzati i colori nell'HEX Color Explorer?

I colori sono in 20 famiglie cromatiche e 11 gradazioni (25–900). Clicca qualsiasi campione per aprire la pagina dettaglio con HEX, RGB, HSL, HSB, OKLCH, CMYK, accessibilità WCAG, armonie e scala tinte.

Qual è la differenza tra tonalità, saturazione e luminosità?

La tonalità è il colore base sulla ruota cromatica. La saturazione misura la vivacità (0%=grigio, 100%=saturo). La luminosità misura la chiarezza (0%=nero, 50%=colore puro, 100%=bianco).

Cosa significano i numeri di gradazione (25–900)?

Indicano la luminosità: 50 è il più chiaro, 500 è la versione più 'pura', 950 è molto scuro. Questa scala facilita la costruzione di design token coerenti.

Come converto un codice HEX in RGB o HSL?

HEX → RGB: dividi il codice in tre coppie e converti da hex a decimale. Per HSL servono calcoli aggiuntivi. Usa il nostro convertitore HEX→RGB per conversioni istantanee.

Come uso i colori HEX nei CSS?

Direttamente: color: #3B82F6; background-color: #ECFDF5. Oppure con notazione HSL o variabili CSS: --color-primary: #3B82F6.

Quanti colori contiene l'HEX Color Explorer?

500 colori: 25 famiglie × 20 gradazioni (25–900), generati da valori HSL calibrati per una palette armoniosa. Clicca qualsiasi colore per esplorarne tutti i formati.

HEX Color Explorer

Sfoglia 500 colori per famiglia cromatica e gradazione

500 colori25 famiglie20 gradazioni ciascuna

Clicca un colore per vedere HEX, RGB e HSL — poi usalo negli altri strumenti

I codici colore HEX

I codici colore HEX sono una notazione esadecimale per i colori RGB, ampiamente usata nel web design e nei CSS. Ogni codice è una stringa di 6 caratteri (es. #FF6B6B) che rappresenta le componenti rosso, verde e blu su una scala 0–255. I colori in questo explorer sono organizzati per famiglia cromatica (Rosso, Arancione, Ambra, Giallo, Lime, Verde, Verde acqua, Ciano, Blu, Indaco, Violetto, Rosa) e gradazione (50–900), dalla più chiara alla più scura, seguendo la convenzione Tailwind CSS.

FAQ

Un codice HEX (esadecimale) è un codice a 6 cifre per rappresentare colori nel web design e nei CSS. Inizia con # seguito da tre coppie di cifre hex che rappresentano i valori rosso, verde e blu (00–FF, equivalenti a 0–255). Es: #FF0000 è rosso puro, #0000FF è blu puro, #FFFFFF è bianco.

I colori sono organizzati in 12 famiglie cromatiche (Rosso, Arancione, Ambra, Giallo, Lime, Verde, Verde acqua, Ciano, Blu, Indaco, Violetto, Rosa) e 10 gradazioni (50–900). Le gradazioni più basse sono più chiare (50 è quasi bianco), le più alte sono più scure (900 è molto scuro). Questa convenzione è usata da Tailwind CSS e Material Design.

La tonalità (hue) è il colore base sulla ruota cromatica (0°=rosso, 120°=verde, 240°=blu). La saturazione misura la vivacità del colore (0%=grigio, 100%=completamente saturo). La luminosità misura la chiarezza/scurezza (0%=nero, 50%=colore puro, 100%=bianco). Insieme, HSL offre un modo intuitivo per descrivere i colori.

I numeri di gradazione indicano la luminosità: 50 è il più chiaro (quasi bianco), 100–300 sono tonalità pastello, 400–600 sono gradazioni intermedie sature, 700–900 sono scure. La gradazione 500 è tipicamente la versione più "pura" di un colore. Questa scala numerica facilita la costruzione di sistemi di design coerenti.

HEX → RGB: dividi il codice a 6 cifre in tre coppie e converti ciascuna da hex a decimale (es. #FF6B6B → R=255, G=107, B=107). La conversione in HSL richiede matematica aggiuntiva. Usa il nostro convertitore HEX → RGB per conversioni istantanee.

Usa i codici HEX direttamente in qualsiasi proprietà CSS: color: #3B82F6; background-color: #ECFDF5. Puoi anche usare la notazione HSL o le variabili CSS: --color-primary: #3B82F6. Per i sistemi di design, definisci una scala colori in :root e referenzia le variabili in tutto il foglio di stile.

L'explorer contiene 120 colori curati: 12 famiglie cromatiche × 10 gradazioni (50–900). Ogni colore è generato da valori HSL accuratamente calibrati per creare una palette armoniosa e coerente tra tutte le famiglie cromatiche.

I codici colore HEX

FAQ

Esplora il Nostro Network