Convertitore di colori
Converte un colore tra HEX, RGB, HSL, HWB, OKLCH, OKLab e CMYK, con tinte, ombre e il nome CSS più vicino.
Come si usa
Scrivi un colore in qualsiasi notazione CSS, o sceglilo con il selettore, e lo stesso colore compare in tutti i formati, ognuno con il suo pulsante per copiare. Lo strumento legge #hex a 3, 4, 6 o 8 cifre, rgb(), hsl(), hwb(), oklch(), oklab() e i 148 nomi di colore CSS, con o senza trasparenza.
HEX e RGB scrivono gli stessi tre canali da 0 a 255, in base 16 o in base 10. HSL e HWB descrivono gli stessi colori sRGB tramite la tinta, con saturazione e luminosità o con bianco e nero. OKLCH e OKLab, definiti in CSS Color Module Level 4, sono pensati perché passi uguali sembrino più o meno uguali all’occhio: una luminosità OKLCH del 50% sembra ugualmente chiara con qualsiasi tinta, cosa che HSL non fa.
OKLCH e OKLab possono descrivere anche colori che gli schermi in sRGB non riescono a mostrare. Un colore così viene portato ai valori sRGB più vicini, e il risultato lo segnala. CMYK usa la formula semplice da RGB senza profilo colore; le tipografie convertono con il proprio profilo, quindi consideralo solo un punto di partenza.
Sotto i formati trovi il nome di colore CSS più vicino, misurato come distanza in OKLab (CSS Color 4 prende 0,02 come la più piccola differenza percepibile), e cinque tinte e cinque ombre: il colore mescolato con bianco o nero in sRGB, come fa color-mix(in srgb, …) in CSS. Fai clic su una per copiarla. Tutto avviene nel tuo browser.
Esempio
#4169e2 è a un passo da royalblue (#4169e1): la loro differenza, 0,002, è molto sotto 0,02, la più piccola differenza percepibile.
#1a73e8rgb(26 115 232), hsl(214.1 81.7% 50.6%) e oklch(57.37% 0.1946 257.86).#4169e2Nome più vicino royalblue (#4169e1), a una distanza di 0,002, sotto 0,02.oklch(70% 0.4 150)Troppo saturo per lo sRGB: mostrato come #00d600, il colore più vicino che uno schermo può mostrare.rgb(26 115 232 / 50%)#1a73e880: le ultime due cifre contengono l’opacità, 80 in esadecimale, cioè 128 su 255.
Domande frequenti
Che differenza c’è tra HSL e OKLCH?
Entrambi usano la tinta, ma la luminosità HSL non è quella che vede l’occhio: hsl(60 100% 50%) è giallo e hsl(240 100% 50%) è blu, entrambi al 50%, eppure in OKLCH il giallo ha una luminosità del 96,8% e il blu del 45,2%. OKLCH mantiene la luminosità percepita quando cambia la tinta, per questo è più adatto a creare scale di colori.
Perché il CMYK è diverso da quello della mia tipografia?
La stampa dipende da carta, inchiostri e macchina, che un profilo colore descrive. Questo strumento usa la formula senza profilo, quindi la tipografia convertirà da RGB con le proprie impostazioni.
Cosa significano i codici hex a 8 cifre?
Le ultime due cifre sono l’opacità: ff è del tutto opaco e 00 del tutto trasparente. #1a73e880 è il colore #1a73e8 al 50% circa.
rgb(26, 115, 232) è uguale a rgb(26 115 232)?
Sì. La forma con le virgole è la sintassi CSS più vecchia; quella con gli spazi viene da CSS Color 4 e scrive la trasparenza dopo una barra, come in rgb(26 115 232 / 50%). I browser accettano entrambe.
Il mio colore viene inviato da qualche parte?
No. La conversione avviene nel tuo browser.