Qual è la differenza tra i formati colore hex e HSL in CSS?

Hex codifica il colore come tre valori esadecimali a 2 cifre per rosso, verde e blu (es. #FF6600). HSL esprime lo stesso colore come tonalità (0–360°), saturazione (0–100%) e luminosità (0–100%), rendendo più facile regolare la luminosità senza ricalcolare tutti e tre i canali.

Quando dovrei usare oklch invece di hsl in CSS?

Usare oklch quando si hanno bisogno di gradienti di colore percettivamente uniformi o di generazione di palette. In HSL, cambiare la tonalità mantenendo costante la luminosità produce colori che sembrano molto diversi in luminosità; il canale di luminosità di oklch è calibrato sulla percezione umana.

Posso usare codici hex a 8 cifre in CSS per la trasparenza?

Sì. CSS supporta hex a 8 cifre (#RRGGBBAA) dove le ultime due cifre specificano l’alfa da 00 (trasparente) a FF (opaco). Ad esempio, #FF660080 è un arancione al 50% di trasparenza.

Tutti i browser supportano i valori di colore oklch?

oklch è supportato da tutti i principali browser dal 2023 (Chrome 111, Firefox 113, Safari 15.4). Per il supporto di browser più vecchi, fornire un fallback hex o rgb prima della dichiarazione oklch.

Qual è il vantaggio di hsl rispetto a rgb per generare palette di colori?

HSL consente di creare tinte e sfumature modificando solo il valore di luminosità mantenendo tonalità e saturazione costanti, producendo palette coerenti. Con RGB, creare una versione più chiara di #FF6600 richiede di ricalcolare manualmente tutti e tre i canali.

Come si converte un colore hex in hsl?

Normalizzare ogni canale RGB a 0–1, trovare il massimo e il minimo, quindi calcolare: H = angolo-colore basato su quale canale è il massimo, S = (max−min)/(1−|2L−1|), L = (max+min)/2. La maggior parte degli strumenti di design e dei preprocessori CSS include funzioni di conversione integrate.

Guide

Formati colore CSS: hex, RGB, HSL, OKLCH — quale usare e quando

Quattro formati, quattro casi d’uso. La scelta giusta dipende da cosa si sta cercando di fare con il colore.

By Buğra SözeriPublished May 16, 2026

Il CSS moderno supporta quattro notazioni di colore principali: hex (#FF6600), rgb(),hsl() e il più recente oklch(). Tutte descrivono la stessa gamma di colori (sRGB per impostazione predefinita, più ampia per OKLCH). Differiscono nella leggibilità umana, nella facilità di manipolazione e nel tipo di modifica del colore che sembra naturale.

I quattro formati a colpo d’occhio

Formato	Esempio	Ottimo per
Hex	`#FF6600`	Memorizzare colori, scambiare con i designer, codice che non modifica il valore.
rgb()	`rgb(255 102 0)`	Generazione programmatica, quando i valori canale per canale sono importanti.
hsl()	`hsl(24 100% 50%)`	Regolare manualmente luminosità e saturazione mantenendo la tonalità fissa.
oklch()	`oklch(0.72 0.18 47)`	Progettare scale di colori dove conta l’uniformità percettiva.

Hex: il formato di archiviazione

Hex codifica ogni canale RGB come un valore esadecimale a due cifre.#FF6600 significa rosso 255, verde 102, blu 0 — un arancione vivace.

Pro: breve, universalmente compreso, facile da copiare e incollare, funziona in ogni contesto CSS.

Contro: opaco da leggere (“#7E4F2Bè una tonalità calda o fredda?”), non è facile regolare luminosità o saturazione senza prima convertire.

Il CSS moderno supporta hex a 8 cifre per la trasparenza:#FF6600AAè l’arancione sopra al 67% di opacità.

rgb(): il formato esplicito per canale

Stessi canali dell’hex, numeri decimali, alfa opzionale. Due sintassi coesistono:

Forma legacy con virgola: rgb(255, 102, 0) o con alfa rgba(255, 102, 0, 0.67)
Forma moderna con spazio: rgb(255 102 0) o con alfa rgb(255 102 0 / 0.67)

hsl(): il formato modificabile dall’uomo

Tre valori: tonalità (0-360°), saturazione(0-100%), luminosità (0-100%). Regolare ciascuno indipendentemente sembra più naturale che modificare i canali RGB.

Il problema: la luminosità di HSL non segue uniformemente la luminosità percepita. Il giallo HSL al 50% di luminosità sembra molto più chiaro del blu HSL al 50% di luminosità. Per una progettazione percettivamente uniforme, OKLCH è la scelta migliore.

oklch(): il formato percettivo

Tre valori: L (luminosità, 0-1),C (cromaticità, 0-~0,4 per sRGB),H (tonalità, 0-360°). Basato sullo spazio colore percettivo OKLab (Björn Ottosson, 2020).

La proprietà chiave: valori di luminosità uguali sembrano ugualmente luminosi. Supportato da tutti i browser evergreen dal 2023.

Scegliere quello giusto

Per colori del brand e token di design: definire in HSL o OKLCH. Memorizzare hex come fallback nei file legacy.
Per rampe di colori UI (50/100/200/.../900): OKLCH con cromaticità fissa e luminosità variabile produce scale percettivamente uniformi.
Per copiare da una specifica Figma/Photoshop: incollare hex. Convertire tramite il nostro strumento hex in RGB quando si ha bisogno di manipolare.

Il pattern con le proprietà personalizzate CSS

Le architetture dei temi moderni memorizzano i colori come proprietà personalizzate HSL/OKLCH in modo che possano essere derivati:

:root {
  --primary-hue: 24;
  --primary: oklch(0.72 0.18 var(--primary-hue));
  --primary-hover: oklch(0.65 0.18 var(--primary-hue));
  --primary-bg: oklch(0.92 0.05 var(--primary-hue));
}

Cambiare la tonalità una volta ruota l’intera palette in modo coerente.

Il riassunto

Hex per archiviazione e copia-incolla. RGB per la generazione programmatica. HSL per la modifica del designer. OKLCH per rampe percettivamente uniformi. La specifica CSS consente di mescolare liberamente; scegliere il formato che corrisponde a ciò che si sta facendo con il colore.

Per la conversione interattiva dei formati, il convertitore di colori gestisce hex ↔ rgb ↔ hsl ↔ oklch con report di contrasto WCAG.

Frequently asked questions

Qual è la differenza tra i formati colore hex e HSL in CSS?: Hex codifica il colore come tre valori esadecimali a 2 cifre per rosso, verde e blu (es. #FF6600). HSL esprime lo stesso colore come tonalità (0–360°), saturazione (0–100%) e luminosità (0–100%), rendendo più facile regolare la luminosità senza ricalcolare tutti e tre i canali.
Quando dovrei usare oklch invece di hsl in CSS?: Usare oklch quando si hanno bisogno di gradienti di colore percettivamente uniformi o di generazione di palette. In HSL, cambiare la tonalità mantenendo costante la luminosità produce colori che sembrano molto diversi in luminosità; il canale di luminosità di oklch è calibrato sulla percezione umana.
Posso usare codici hex a 8 cifre in CSS per la trasparenza?: Sì. CSS supporta hex a 8 cifre (#RRGGBBAA) dove le ultime due cifre specificano l’alfa da 00 (trasparente) a FF (opaco). Ad esempio, #FF660080 è un arancione al 50% di trasparenza.
Tutti i browser supportano i valori di colore oklch?: oklch è supportato da tutti i principali browser dal 2023 (Chrome 111, Firefox 113, Safari 15.4). Per il supporto di browser più vecchi, fornire un fallback hex o rgb prima della dichiarazione oklch.
Qual è il vantaggio di hsl rispetto a rgb per generare palette di colori?: HSL consente di creare tinte e sfumature modificando solo il valore di luminosità mantenendo tonalità e saturazione costanti, producendo palette coerenti. Con RGB, creare una versione più chiara di #FF6600 richiede di ricalcolare manualmente tutti e tre i canali.
Come si converte un colore hex in hsl?: Normalizzare ogni canale RGB a 0–1, trovare il massimo e il minimo, quindi calcolare: H = angolo-colore basato su quale canale è il massimo, S = (max−min)/(1−|2L−1|), L = (max+min)/2. La maggior parte degli strumenti di design e dei preprocessori CSS include funzioni di conversione integrate.

Published May 16, 2026