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è l’angolo sulla ruota dei colori, e a quanto è vivido e luminoso: è più facile modificarli manualmente. CMYK indica le quantità di inchiostro ciano, magenta, giallo e nero per la stampa. LAB, LCH, OKLab e OKLCH sono progettati in modo che intervalli uguali nei valori corrispondano a intervalli visivamente uguali, il che è utile per le palette e i gradienti; i CSS moderni supportano tutti e quattro. I terminali usano codici colore ANSI e 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, croma e tonalità
OKLab oklab(69.58% 0.1482 0.1406) Luminosità e due assi cromatici, in un modello più recente di LAB
OKLCH oklch(69.58% 0.2043 43.49) Luminosità, croma e tonalità in OKLab
XYZ xyz(46, 30.77, 3.52) Lo spazio colore CIE 1931 su cui si basa LAB
HCG hcg(24, 100%, 0%) Tonalità, croma 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, nel formato usato da 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 come 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: iniziano con i formati indicati nel nome, mentre i menu Sorgente e Destinazione permettono di selezionarne altri. Incolla un colore e il risultato apparirà mentre scrivi, pronto da copiare. Selezionando Rilevamento automatico come sorgente, l’impostazione iniziale del Convertitore di colori, lo strumento deduce il formato dal modo in cui è 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 di 3, 4, 6 o 8 cifre, con o senza #. La quarta cifra o l’ultima coppia imposta 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à in deg, rad, grad o turn, come in hsl(0.5turn, 100%, 50%).
  • Numeri senza il nome di una funzione, come 255, 102, 0. Il 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 in qualsiasi combinazione di maiuscole e minuscole, con o senza spazi: è valido anche Rebecca Purple.
  • Valori HSB scritti come hsb() e colori AppleScript racchiusi tra parentesi graffe, come {65535, 26214, 0}.

Come funziona

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

  • L’opacità viene mantenuta in HEX, RGB, HSL, HWB, OKLab e OKLCH, che possono rappresentarla. Gli altri formati la omettono.
  • LAB, LCH e XYZ sono valori CIE con punto di bianco D65. lab() e lch() di CSS usano il punto di bianco D50, quindi i valori differiscono leggermente.
  • LAB, LCH, OKLab e OKLCH possono descrivere colori che gli schermi non sono in grado di mostrare. 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, quindi oklch(70% 0.3 145) diventa #00c800.
  • Il risultato con il nome del colore è il colore con nome CSS 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, poiché quelle palette contengono solo 16 o 256 colori. I risultati ANSI 16 sono codici per il 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 dello stesso colore possono essere diversi presso una tipografia.
  • La scala di grigi è la media dei valori di rosso, verde e blu.

Suggerimenti

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