Cosa significano tutti questi formati di colore?

Un colore sullo schermo è una miscela di luce rossa, verde e blu, e ogni formato rappresenta questa miscela a modo suo. CSS e gli strumenti di progettazione usano codici HEX e valori RGB. HSL, HSV e HWB descrivono un colore in base alla tonalità, cioè all’angolo sulla ruota dei colori, e alla sua saturazione e luminosità: caratteristiche più facili da regolare a mano. CMYK indica le quantità di inchiostro ciano, magenta, giallo e nero per la stampa. LAB, LCH, OKLab e OKLCH sono progettati in modo che variazioni uguali nei valori risultino più o meno uguali all’occhio: questo è utile per le palette e i gradienti, e il CSS moderno supporta tutti e quattro. I terminali usano codici colore ANSI, mentre il CSS include anche colori con nome, come tomato.

Ecco lo stesso arancione in ciascun formato:

Formato Esempio Significato dei valori
HEX #ff6600 Rosso, verde e blu, ciascuno rappresentato da due cifre esadecimali
RGB rgb(255, 102, 0) Rosso, verde e blu da 0 a 255
HSL hsl(24, 100%, 50%) Tonalità, saturazione e luminosità
HSV hsv(24, 100%, 100%) Tonalità, saturazione e valore, detto anche HSB
HWB hwb(24 0% 0%) Tonalità, quantità di bianco e quantità di nero
CMYK cmyk(0%, 60%, 100%, 0%) Inchiostro ciano, magenta, giallo e nero
LAB lab(62.31, 55, 71.33) Luminosità CIE, da verde a rosso e da blu a giallo
LCH lch(62.31, 90.07, 52.36) Luminosità CIE, cromaticità e tonalità
OKLab oklab(69.58% 0.1482 0.1406) Luminosità e due assi cromatici, come in LAB
OKLCH oklch(69.58% 0.2043 43.49) Luminosità, cromaticità e tonalità in OKLab
XYZ xyz(46, 30.77, 3.52) Lo spazio colore CIE XYZ su cui si basa LAB
HCG hcg(24, 100%, 0%) Tonalità, cromaticità e quantità di grigio
Nome del colore orangered Il colore con nome CSS più simile
ANSI 16 91 Codice del terminale per uno dei 16 colori di base
ANSI 256 208 Codice del terminale per uno dei 256 colori
RGB AppleScript {65535, 26214, 0} Rosso, verde e blu da 0 a 65535, secondo la rappresentazione di AppleScript
Scala di grigi gray(46.7%) Luminosità da 0% a 100%

Descrizione dello strumento

Questo strumento converte un colore tra questi 17 formati e lo mostra in un campione sotto il risultato. Tutti i convertitori di colore qui funzionano allo stesso modo, dal Convertitore di colori generale a quelli per una singola coppia, come da HEX a RGB, da RGB a CMYK o da HEX a nome del colore: si avviano con i formati indicati nel nome e i menu Origine e Destinazione permettono di selezionarne altri. Incolla un colore e il risultato appare mentre digiti, pronto da copiare. Selezionando Rilevamento automatico come origine, impostazione iniziale del Convertitore di colori, lo strumento determina il formato in base a come è scritto il colore. Il pulsante di scambio inverte la conversione.

Esempi

Input Destinazione Risultato
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Nome colore tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Cosa puoi incollare

  • Codici HEX con 3, 4, 6 o 8 cifre, con o senza #. La quarta cifra o l’ultima coppia specifica l’opacità.
  • Funzioni come rgb(), hsl() o oklch(), con virgole o spazi tra i valori e un’opacità facoltativa come quarto valore o dopo una barra: rgba(37, 99, 235, 0.5) oppure rgb(37 99 235 / 50%).
  • Percentuali per rosso, verde e blu, come in rgb(100%, 40%, 0%), e tonalità espresse in deg, rad, grad o turn, come in hsl(0.5turn, 100%, 50%).
  • Numeri senza il nome di una funzione, come 255, 102, 0. Rilevamento automatico interpreta tre numeri come RGB, oppure come HSL se gli ultimi due sono percentuali, e quattro numeri come CMYK, a meno che non sembrino valori RGB con un’opacità.
  • Nomi di colori con o senza distinzione tra maiuscole e minuscole, con o senza spazi: Rebecca Purple funziona.
  • Valori HSB scritti come hsb() e colori AppleScript tra parentesi graffe, come {65535, 26214, 0}.

Come funziona

I calcoli sono eseguiti da color-convert, una libreria JavaScript per la conversione dei colori.

  • L’opacità viene mantenuta nei formati HEX, RGB, HSL, HWB, OKLab e OKLCH, che possono rappresentarla. Gli altri formati la omettono.
  • LAB, LCH e XYZ usano i valori CIE con il punto di bianco D65. lab() e lch() in CSS usano il punto di bianco D50, quindi i relativi valori differiscono leggermente.
  • LAB, LCH, OKLab e OKLCH possono descrivere colori che gli schermi non sono in grado di visualizzare. Quando vengono convertiti in HEX, RGB o in un altro formato per schermo, i canali del colore vengono limitati all’intervallo da 0 a 255: perciò oklch(70% 0.3 145) diventa #00c800.
  • Il risultato con il nome del colore corrisponde al colore CSS con nome più simile, quindi è esatto solo per i colori che hanno un nome: #ff6600 restituisce orangered, che corrisponde a #ff4500.
  • I risultati ANSI 16 e ANSI 256 sono approssimativi, perché queste palette contengono solo 16 o 256 colori. I risultati ANSI 16 sono codici per il colore di primo piano, da 30 a 37 e da 90 a 97; i codici per lo sfondo, da 40 a 47 e da 100 a 107, vengono interpretati come gli stessi colori.
  • CMYK viene calcolato con la formula di base, senza un profilo colore della stampante, quindi i valori CMYK di una tipografia per lo stesso colore possono essere diversi.
  • La scala di grigi è la media dei valori di rosso, verde e blu.

Suggerimenti

  • I risultati HEX, RGB, HSL, HWB, OKLab, OKLCH e con nome del colore sono CSS validi, quindi puoi incollarli direttamente in un foglio di stile.
  • Rilevamento automatico interpreta un numero di tre cifre, come 208, come un codice HEX breve; per i codici del terminale, seleziona ANSI 256 o ANSI 16 come origine.
  • HSV e HSB sono due nomi per lo stesso modello.