Codici colore esadecimali, RGB, HSL e OKLCH spiegati

I codici colore esadecimali come #7c3aed sono il modo più comune di scrivere un colore sullo schermo: un # seguito da sei caratteri che indicano la quantità di rosso, verde e blu. L’RGB scrive gli stessi numeri in decimale, l’HSL li riorganizza in tonalità, saturazione e luminosità, e l’OKLCH descrive il colore come lo percepisce l’occhio. Sono notazioni diverse degli stessi colori, e ognuna è la migliore per un compito diverso.

Come funzionano i codici colore esadecimali

Un codice esadecimale è formato da tre coppie di cifre in base 16: #RRGGBB. La base 16 conta da 0 a 9 e poi da a a f, quindi ogni coppia va da 00 (nulla) a ff (255, pieno). In #7c3aed il rosso è 7c (124), il verde è 3a (58) e il blu è ed (237): molto blu, un bel po’ di rosso, poco verde, cioè viola. Tre canali da 256 valori danno 16.777.216 colori possibili.

• Forma abbreviata: #f0c equivale a #ff00cc. Ogni cifra viene raddoppiata, quindi funziona solo per i colori con coppie che si ripetono.
• Trasparenza: un codice a otto cifre aggiunge l’alfa in fondo. #7c3aed80 è il viola con circa il 50% di opacità, perché 80 è 128 su 255.
• Maiuscole e minuscole non contano: #7C3AED e #7c3aed sono identici.
• I grigi hanno tre coppie uguali: #767676, #1a1a1a e #f4f4f4 sono tutti neutri.

RGB: gli stessi numeri in decimale

L’RGB scrive i tre canali come numeri normali da 0 a 255. Il CSS moderno li separa con spazi e aggiunge la trasparenza dopo una barra; la vecchia sintassi con le virgole e rgba() funzionano ancora ovunque. L’RGB è comodo quando uno strumento o un’API chiede numeri, o quando vuoi leggere a colpo d’occhio la composizione di un colore.

/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);

HSL: tonalità, saturazione e luminosità

L’HSL descrive un colore con la sua tonalità come angolo sul cerchio cromatico (0 è rosso, 120 verde, 240 blu), la sua saturazione dal grigio (0%) al colore pieno (100%) e la sua luminosità dal nero (0%) passando per il colore puro (50%) fino al bianco (100%). È facile da ritoccare a mano: per un viola più scuro, abbassa l’ultimo numero.

Il problema è che la luminosità dell’HSL è una formula, non una misura di quanto un colore appaia chiaro. Il giallo al 50% di luminosità sembra molto più brillante del blu al 50%. Se costruisci una palette mantenendo uguale la luminosità HSL, i colori non sembreranno ugualmente chiari, ed è proprio per questo che gli arcobaleni predefiniti sembrano a strisce. Vedi i gradienti arcobaleno per il risultato visibile.

OKLCH: il colore come lo vedi

L’OKLCH deriva da Oklab, uno spazio colore pubblicato da Björn Ottosson nel 2020 e oggi parte del CSS. Usa tre valori: L è la luminosità percepita da 0% a 100%, C è il croma, cioè quanto è colorato, da 0 per il grigio fino a circa 0,37 per i colori più vividi, e H è l’angolo della tonalità. Valori di L uguali sembrano davvero ugualmente chiari, quindi puoi cambiare una qualità senza disturbare le altre.

L’OKLCH dà il meglio nei gradienti. Miscelando in sRGB semplice, l’impostazione predefinita dei colori esadecimali, si traccia una linea retta attraverso il cubo RGB, e i colori ai lati opposti del cerchio si incontrano nel grigio. Miscelando in OKLCH si mantiene il croma e si percorre invece il cerchio delle tonalità.

.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}

Quale codice colore usare e dove

Per provare uno qualsiasi di questi valori, oklch.com mostra un colore in ogni notazione e avvisa quando esce dalla gamma di uno schermo, e il riferimento MDN sui colori copre ogni sintassi. Se stai scegliendo i colori invece di scriverli, come scegliere i colori del brand è il passo successivo, e il contrasto dei colori mostra come verificare che il testo resti leggibile.