Vai al contenuto

Convertitore di colori

Web e sviluppo

Come scrivi un colore in HEX, RGB o HSL?

Scegli o inserisci un colore e copialo in HEX, RGB, HSL, HWB o OKLCH, con il nome CSS più vicino.

Un nome, hex, rgb(), hsl(), hwb() o oklch(), come in CSS.

HEX

#2563eb

Nome CSS più vicino: royalblue (#4169e1).

Lo stesso colore in altri formati

RGB
rgb(37 99 235)
HSL
hsl(221.2 83.2% 53.3%)
HWB
hwb(221.2 14.5% 7.8%)
OKLCH
oklch(54.61% 0.2152 262.88)

Varianti chiare e scure

Luminosità 95%
#e6efff
Luminosità 85%
#b4ceff
Luminosità 75%
#82adff
Luminosità 65%
#4f89ff
Luminosità 55%
#2664ec
Luminosità 45%
#0543ca
Luminosità 35%
#002b93
Luminosità 25%
#00185c
Luminosità 15%
#00062a

Link sponsorizzati

Scegli o inserisci un colore e copialo in HEX, RGB, HSL, HWB o OKLCH, con il nome CSS più vicino.

Come si usa

  1. Inserisci un colore in formato CSS, come tomato, #1a73e8, rgb(26 115 232) o oklch(60% 0.2 260), oppure tocca il campione per sceglierlo.
  2. Copia il formato che ti serve. HEX compare per primo, seguito da RGB, HSL, HWB e OKLCH.
  3. Usa la fila di varianti per trovare versioni più chiare e scure dello stesso colore.

Colori CSS comuni in HEX e RGB

Nome CSSHEXRGB
black#000000rgb(0 0 0)
white#ffffffrgb(255 255 255)
red#ff0000rgb(255 0 0)
lime#00ff00rgb(0 255 0)
blue#0000ffrgb(0 0 255)
yellow#ffff00rgb(255 255 0)

Come funziona

Uno schermo crea i colori mescolando luce rossa, verde e blu. RGB e HEX esprimono direttamente la miscela: HEX indica le stesse tre quantità in base 16, quindi #1a73e8 significa rosso 26, verde 115 e blu 232. HSL e HWB descrivono il colore in modo più intuitivo: una tonalità sulla ruota cromatica e quanto è chiara, scura o grigia.

OKLCH è una descrizione più recente in cui la luminosità è vicina alla percezione visiva: due colori con la stessa luminosità appaiono ugualmente chiari, cosa che HSL basato su sRGB non garantisce (CSS Color Module Level 4; Ottosson, 2020). Le varianti mantengono tonalità e croma e cambiano solo la luminosità OKLCH, producendo passaggi visivamente uniformi. Se un colore non è riproducibile a quella luminosità, il croma viene ridotto finché rientra nella gamma.

Il nome CSS più vicino è quello dei 148 colori denominati con la minore distanza in OKLab, uno spazio costruito affinché distanze uguali corrispondano a differenze visive uguali. Un colore fuori dalla gamma ordinaria dello schermo (sRGB) viene mostrato come il colore riproducibile più vicino.

Link sponsorizzati

Domande frequenti

Cosa significa il codice hex di 8 cifre?

Le ultime due cifre indicano l’opacità, da 00 (invisibile) a ff (opaco). Un colore non completamente opaco include queste cifre e il suo campione appare su una scacchiera.

Perché due colori con la stessa luminosità HSL sembrano diversi?

La luminosità HSL deriva dai valori rosso, verde e blu dello schermo, non dalla luminosità percepita. A parità di luminosità HSL, il giallo appare molto più chiaro del blu: per questo le varianti usano OKLCH.

Quale formato dovrei usare in CSS?

Tutti funzionano nei browser attuali. HEX è il più comune e breve, HSL si modifica facilmente a mano e OKLCH è adatto a palette con passaggi uniformi e può mostrare colori oltre sRGB sugli schermi a gamma ampia.

Il nome CSS più vicino corrisponde esattamente al mio colore?

Non sempre. Lo strumento distingue una corrispondenza esatta dal colore con nome più vicino.

Può convertire colori di vernici o profili ICC?

No. Lavora con colori CSS, non con sistemi di vernici fisiche o profili colore ICC.

Potrebbe servirti anche

Altri strumenti in Web e sviluppo

Tutti i 18 strumenti in Web e sviluppo

Popolari adesso

Link sponsorizzati

Link sponsorizzati