🎨
← Torna alle guide

Funzioni Colore CSS Moderne: rgba(), hsl(), oklch() e Oltre

· Tag: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Funzioni Colore CSS Moderne: rgba(), hsl(), oklch() e Oltre

Le funzioni colore CSS si sono evolute in modo drammatico. Quella che una volta era una scelta tra hex, rgb() e hsl() è ora un ricco ecosistema di spazi colore e funzioni di manipolazione che danno agli sviluppatori un controllo senza precedenti sulla rappresentazione del colore, l'interpolazione e l'accessibilità.

Questa guida copre ogni principale funzione colore CSS disponibile nel 2026, dalle più familiari alle più all'avanguardia.

RGB e RGBA: I Cavalli di Lavoro

La funzione rgb() definisce i colori usando il modello di colore additivo rosso-verde-blu. Fa parte di CSS sin da CSS1 ed è supportata in ogni browser mai creato.

/* Sintassi legacy separata da virgole */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Sintassi moderna separata da spazi (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Valori percentuali */
color: rgb(100% 0% 0%);

Cambiamenti Chiave nel RGB Moderno

CSS Color Level 4 ha introdotto due miglioramenti importanti:

  1. Separato da spazi invece che da virgole — La funzione rgb() ora accetta valori separati da spazi o barre
  2. Sintassi alfa unificata — L'alias rgba() è deprecato (ma ancora supportato). rgb() ora accetta nativamente un canale alfa

Questa sintassi moderna è supportata in tutti i browser rilasciati dal 2020. Per i nuovi progetti, usa la sintassi moderna e salta del tutto l'alias rgba().

Canali RGB

Ogni canale RGB accetta:

  • Un intero da 0 a 255
  • Una percentuale da 0% a 100%
  • La parola chiave none per i canali mancanti (CSS Color Level 4)

La parola chiave none è utile quando si interpolano i colori — dice al browser di non interpolare quel canale specifico.

HSL e HSLA: Controllo del Colore Intuitivo

HSL sta per Tonalità (Hue), Saturazione, Luminosità. Usa un sistema di coordinate cilindrico che si mappa naturalmente su come gli esseri umani pensano al colore.

/* H è l'angolo di tonalità (0-360), S è la saturazione (0-100%), L è la luminosità (0-100%) */
color: hsl(0 100% 50%);        /* Rosso puro */
color: hsl(0 100% 50% / 0.5);  /* Rosso al 50% di opacità */

/* Angoli di tonalità con unità */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Riferimento degli Angoli di Tonalità

| Tonalità | Colore | Hex | |-----|---------|----------| | 0 | Rosso | #FF0000 | | 30 | Arancione | #FF8000 | | 60 | Giallo | #FFFF00 | | 120 | Verde | #00FF00 | | 180 | Ciano | #00FFFF | | 240 | Blu | #0000FF | | 300 | Magenta | #FF00FF |

HSL è la scelta migliore per generare tavolozze di colori in modo programmatico perché modificare solo il canale di luminosità o saturazione crea varianti visive coerenti.

HWB: Mescolare con Bianco e Nero

HWB (Tonalità, Bianchezza, Nerezza) è un'alternativa più intuitiva a HSL. Scegli una tonalità, poi aggiungi bianchezza e nerezza per creare tinte e ombreggiature.

color: hwb(0 0% 0%);    /* Rosso puro */
color: hwb(0 40% 0%);   /* Rosso tinto (bianco aggiunto) */
color: hwb(0 0% 40%);   /* Rosso ombreggiato (nero aggiunto) */
color: hwb(0 20% 20%);  /* Tono (bianco + nero) */

HWB è più semplice di HSL per un caso d'uso specifico: creare variazioni di tinta e ombreggiatura di un colore del brand. Non devi mai pensare alle curve di saturazione — basta aggiungere bianco o nero.

Supporto browser: HWB è supportato in tutti i browser moderni (Chrome 101+, Firefox 96+, Safari 15+).

LAB e LCH: Spazi Percettivamente Uniformi

LAB (Luminosità, asse A, asse B) e LCH (Luminosità, Croma, Tonalità) sono spazi colore percettivamente uniformi. Questo significa che la distanza euclidea tra due valori di colore corrisponde alla differenza visiva percepita — qualcosa che RGB e HSL non possono fare.

color: lab(50% 50 0);        /* Rosso medio */
color: lch(50% 50 0);        /* Stesso colore in forma cilindrica */

Perché l'uniformità percettiva è importante:

  • Gradienti — Interpolare in LAB o LCH produce transizioni fluide e naturali senza la noiosa "zona fangosa" che i gradienti RGB creano
  • Misurazione della differenza di colore — Delta E (la misura della differenza percettiva) è significativa nello spazio LAB
  • Accessibilità — L'uniformità percettiva aiuta a prevedere come i colori saranno percepiti dagli utenti con deficit della visione dei colori

Limiti: LAB e LCH possono produrre colori fuori dal gamut sRGB. Questi colori verranno tagliati quando visualizzati su schermi sRGB ma sono accessibili su display a gamut più ampio (DCI-P3, Rec. 2020).

Supporto browser: Supportati in Chrome 111+, Firefox 113+, Safari 15+. Nessun supporto per IE o Edge legacy.

OKLAB e OKLCH: Standard Percettivo Moderno

OKLCH è una versione migliorata di LCH sviluppata da Bjorn Ottosson. Corregge le non uniformità percettive di LCH, in particolare per le tonalità blu. OKLCH è diventato lo spazio colore predefinito raccomandato per i nuovi progetti CSS nel 2025-2026.

color: oklch(60% 0.2 30);
/* Luminosità: 0-100%, Croma: 0-~0.4, Tonalità: 0-360 */

Perché OKLCH è il Migliore Spazio Colore per CSS

  1. Migliore uniformità percettiva — Cambiamenti numerici uguali producono cambiamenti visivi uguali in tutte le tonalità
  2. Luminosità prevedibile — I colori con lo stesso valore di luminosità appaiono davvero ugualmente luminosi
  3. Nessun gradiente fangoso — L'interpolazione rimane pulita nell'intero intervallo di tonalità
  4. sRGB-safe per impostazione predefinita — La maggior parte dei valori OKLCH produce colori sRGB in-gamut
  5. Canali intuitivi — Come HSL ma con reale precisione percettiva

OKLCH in Pratica

/* Creare una scala di colori equilibrata con OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Nota che ogni gradino cambia approssimativamente dello stesso valore di luminosità (20 punti percentuali). Poiché OKLCH è percettivamente uniforme, questi gradini appaiono equamente distanziati all'occhio umano — qualcosa che è difficile da ottenere con HSL.

Supporto browser: OKLCH è supportato in Chrome 111+, Firefox 113+, Safari 15.4+. È diventato rapidamente lo spazio colore moderno più raccomandato.

Color-Mix: Mescolare i Colori in CSS

La funzione color-mix() mescola due colori in uno spazio colore specificato:

/* Mescola rosso e blu equamente in sRGB */
color: color-mix(in srgb, red, blue);

/* 30% primario, 70% bianco — una tinta */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Mescola con uno spazio colore percettivo per risultati fluidi */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

Il parametro in <color-space> ti permette di controllare lo spazio di interpolazione. Per la maggior parte dei casi, in oklch produce i migliori risultati visivi.

Casi d'uso:

  • Creare tinte e ombreggiature senza funzioni di preprocessore
  • Costruire varianti di componenti da un singolo token di colore
  • Generare stati hover e attivi dinamicamente
  • Creare effetti simili a gradienti in una singola funzione

Sintassi del Colore Relativo: Modificare i Colori Esistenti

CSS Color Level 4 ti permette di derivare nuovi colori da quelli esistenti modificando i singoli canali:

--primary: #3366cc;

/* Usando i canali OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Usando i canali HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

La parola chiave from <color> estrae i canali del colore sorgente nei canali della funzione di destinazione, che puoi poi regolare con l'aritmetica.

Parole Chiave dei Canali per Spazio Colore

Ogni spazio colore espone specifiche parole chiave di canale:

| Spazio colore | Parole chiave | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Panoramica del Supporto Browser (2026)

| Funzione | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Tutti | Tutti | Tutti | Tutti | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Sintassi del colore relativo | 111+ | 113+ | 16.2+ | 111+ |

Tutte le moderne funzioni colore sono sicure da usare nel 2026 per progetti che non richiedono il supporto di Internet Explorer. Per una compatibilità più ampia, usa un passo di build che converte la sintassi moderna in hex o rgb() legacy.

Raccomandazioni Pratiche

  • Per i progetti esistenti — HSL rimane il miglior equilibrio tra leggibilità e capacità
  • Per i nuovi progetti — Usa OKLCH come spazio colore primario per la sua precisione percettiva
  • Per i gradienti — Interpola sempre in OKLCH per evitare transizioni fangose
  • Per i sistemi di design — Memorizza i colori base in OKLCH, genera varianti con color-mix() o la sintassi relativa
  • Per canvas/WebGL — Attieniti a RGB, che è nativo del pipeline di rendering

Conclusione

Le moderne funzioni colore CSS hanno trasformato ciò che puoi fare con il colore sul web. OKLCH fornisce un'uniformità percettiva che rende prevedibile la progettazione di sistemi di colore. color-mix() e la sintassi del colore relativo eliminano la necessità delle funzioni colore dei preprocessori. Insieme, questi strumenti danno agli sviluppatori web lo stesso potere cromatico che gli strumenti di design offrono da anni — ora direttamente nel browser.

Usa il nostro convertitore di colori online gratuito per convertire tra tutti i moderni formati di colore CSS inclusi OKLCH, LAB, HWB e il classico HEX/RGB/HSL.