0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Impostazioni
Ho convertito i colori tra tutti i formati: HEX, RGB, HSL, HWB, HSV, LAB, LCH, OKLab, OKLCh, XYZ D50/D65, Display P3, A98, ProPhoto, Rec. 2020 e CMYK. Include un selezionatore visivo interattivo.
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), ecc.
Risultati
Base
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS Livello 3
hsl(h s% l%)
CSS Livello 4
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
Altri
hsv(h s% v%)
Stampa
cmyk(c% m% y% k%)

Come funziona

Uno stesso colore può essere scritto in molti modi. HEX (#RRGGBB) e RGB descrivono la miscela di rosso, verde e blu; HSL e HSV lo descrivono per tonalità, saturazione e luminosità, più intuitivi per scegliere le varianti; e CMYK è pensato per la stampa.

Questo strumento prende un colore in HEX, RGB o HSL e lo traduce all'istante in tutti i formati, inclusi gli spazi moderni di CSS Livello 4 come HWB, LAB, LCH, OKLab, OKLCh e le funzioni color() (Display P3, Rec. 2020, ProPhoto).

Il selettore visivo e i controlli numerici permettono di regolare il colore e vedere come cambiano tutti i valori contemporaneamente. Tutto viene calcolato nel tuo browser.

Esempi

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)Il rosso puro: massimo nel canale rosso, zero in verde e blu.
#3b82f6rgb(59 130 246)Ogni coppia di cifre esadecimali (3b, 82, f6) è il valore 0-255 di un canale: 59, 130 e 246.
#ffffffrgb(255 255 255) · hsl(0 0% 100%)Il bianco ha i tre canali al massimo; in HSL, luminosità 100%.

Casi d'uso

  • Convertire un colore di una guida di stile in HEX nel formato RGB o HSL richiesto dal tuo CSS o framework.
  • Ottenere l'equivalente CMYK di un colore da schermo per preparare un materiale di stampa.
  • Esplorare gli spazi colore moderni (OKLCh, Display P3) durante la messa a punto di una palette a gamma ampia.

Domande frequenti

Cos'è il canale alfa e come si scrive in HEX?

L'alfa è l'opacità, da 0 (trasparente) a 100%. In HEX si aggiunge come coppia di cifre alla fine: #RRGGBBAA. Ad esempio, #ff000080 è rosso al 50% di opacità.

Qual è la differenza tra HSL e HSV?

Entrambi usano tonalità e saturazione, ma il terzo asse differisce: HSL usa la luminosità (dove 100% è bianco) e HSV usa il valore o luminosità (dove 100% è il colore più intenso). HSL è di solito più comodo per generare tinte e ombre.

Perché esistono OKLab e OKLCh?

Sono spazi percettivamente uniformi: distanze uguali tra i valori corrispondono a differenze visive simili. Producono gradienti e regolazioni di luminosità più naturali di HSL, e CSS li supporta dal Livello 4.

Il CMYK che mostra è preciso per la stampa?

È una conversione approssimativa di riferimento. Il risultato reale di stampa dipende dal profilo colore, dall'inchiostro e dalla carta, quindi per lavori professionali conviene usare il profilo ICC della tipografia.

Vedi anche