# Colore HSL: il modo più amichevole di scrivere i colori in CSS [Canonical HTML page](https://gradiently.design/it/guide/hsl-colors) L’HEX dice al browser cosa dipingere. L’HSL dice a te cos’è il colore: quale tinta, quanto vivace, quanto chiaro. Per questo è il formato più facile da modificare a mano. ## The short version - Un colore HSL descrive un colore con tonalità, saturazione e luminosità invece che con quantità di rosso, verde e blu. - La tonalità è un angolo sul cerchio cromatico da 0 a 360 gradi, dove 0 è rosso, 120 è verde e 240 è blu. - La saturazione va da 0% (grigio) a 100% (colore pieno), e la luminosità va da 0% (nero) attraverso 50% (la tinta pura) a 100% (bianco). - Il CSS moderno lo scrive come hsl(262 83% 58%), con un alfa facoltativo dopo una barra, ed è supportato da tutti i browser in uso. - La luminosità HSL non è quanto un colore appare brillante alle persone, quindi due colori con la stessa luminosità possono differire enormemente nel contrasto. Un **colore HSL** si scrive con tre numeri: tonalità, saturazione e luminosità. In CSS, `hsl(262 83% 58%)` indica una tonalità di 262 gradi (viola), saturazione 83% (vivace) e luminosità 58% (un po’ sopra il punto medio). È lo stesso viola di `#7c3bed`, ma questa volta puoi leggerlo. Lo vuoi più chiaro? Alza l’ultimo numero. Più morbido? Abbassa quello centrale. Questa proprietà, un solo significato per numero, è il motivo per cui l’HSL è il modo più amichevole di scrivere i colori a mano. ## Cosa significano tonalità, saturazione e luminosità La **tonalità** è una posizione sul [cerchio cromatico](https://gradiently.design/it/guide/color-wheel), espressa in gradi. Il rosso sta a 0 e di nuovo a 360, il giallo a 60, il verde a 120, il ciano a 180, il blu a 240 e il magenta a 300. Muovere la tonalità fa ruotare il colore mantenendone l’intensità. Tonalità da 0 a 360 gradi: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)` Ogni tonalità al 100% di saturazione e al 50% di luminosità. Da sinistra a destra: 0, 60, 120, 180, 240, 300 e di nuovo 360. La **saturazione** è quanta quantità di colore c’è. A 0% ogni tonalità è lo stesso grigio; a 100% è vivace quanto lo schermo permette. La **luminosità** va dal nero a 0% al bianco a 100%, con la tinta pura al 50%. Il modello è trattato più ampiamente in [tonalità, saturazione e luminosità](https://gradiently.design/it/guide/hue-saturation-brightness), che spiega anche come l’HSB delle app di design differisca dall’HSL del CSS. | Valore | Intervallo | Cosa fa cambiarlo | | --- | --- | --- | | Tonalità | Da 0 a 360 (gradi) | Ruota il colore: da viola a blu a verde acqua | | Saturazione | Da 0% a 100% | Dal grigio al colore pieno | | Luminosità | Da 0% a 100% | Dal nero, passando per la tinta pura al 50%, al bianco | | Alfa (facoltativo) | Da 0 a 1, o da 0% a 100% | Da invisibile a opaco | Quattro numeri, ognuno con un solo compito. Questa separazione è tutto il fascino. ## La sintassi HSL in CSS Ci sono due modi di scriverlo. Quello moderno separa i valori con spazi e mette l’alfa dopo una barra. Quello più vecchio usa le virgole e una funzione `hsla()` a parte. I browser accettano entrambi, e `hsl()` ora accetta anche l’alfa, quindi `hsla()` non serve più. Il [riferimento MDN per hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) elenca ogni forma. ```css .button { /* modern syntax */ background: hsl(262 83% 58%); /* with 80% opacity */ background: hsl(262 83% 58% / 0.8); /* older comma syntax, still valid */ background: hsla(262, 83%, 58%, 0.8); /* hue can carry a unit */ background: hsl(262deg 83% 58%); } ``` Tutte e quattro sono lo stesso viola. La seconda e la terza aggiungono un’opacità dell’80%. ## Costruisci una scala di colori cambiando la luminosità Qui l’HSL si guadagna il posto. Tieni fisse tonalità e saturazione, fai variare la luminosità a gradini, e ottieni una famiglia di [tinte e sfumature](https://gradiently.design/it/guide/tints-tones-shades) che chiaramente stanno insieme. Ecco un viola in sette passi, con l’HEX in cui si converte ciascuno. - L 95% #efe8fd: #efe8fd - L 85% #d0b9f8: #d0b9f8 - L 70% #a273f2: #a273f2 - L 58% #7c3bed: #7c3bed - L 45% #5914d2: #5914d2 - L 30% #3c0d8c: #3c0d8c - L 15% #1e0746: #1e0746 hsl(262 83% L) a sette valori di luminosità. Passi chiari per gli sfondi, il centro per i pulsanti, passi scuri per il testo. Abbinalo alle proprietà personalizzate CSS e l’intero tema dipende da due numeri. Salva una volta tonalità e saturazione, poi scegli una luminosità per ogni ruolo. Cambia la variabile della tonalità e tutta l’interfaccia passa dal viola al verde acqua, ed è l’idea alla base delle [variabili CSS per i temi](https://gradiently.design/it/guide/css-custom-properties-theming). ```css :root { --brand-h: 262; --brand-s: 83%; --brand-50: hsl(var(--brand-h) var(--brand-s) 95%); --brand-200: hsl(var(--brand-h) var(--brand-s) 85%); --brand-500: hsl(var(--brand-h) var(--brand-s) 58%); --brand-800: hsl(var(--brand-h) var(--brand-s) 30%); } /* a teal theme is one line */ .theme-teal { --brand-h: 175; } ``` Ogni colore del brand deriva dalla stessa tonalità, quindi la scala non può mai uscire dalla famiglia. ### Colori relativi I browser più recenti supportano anche la sintassi dei colori relativi, che legge le componenti HSL di qualsiasi colore e ti permette di regolarle. `hsl(from var(--brand) h s calc(l + 15%))` dà una versione più chiara qualunque sia il colore del brand, anche se era definito in HEX. Controlla il supporto attuale su caniuse prima di affidartici, e tieni un’alternativa semplice. Per mescolare due colori invece di ritoccarne uno, lo strumento è [color-mix() in CSS](https://gradiently.design/it/guide/css-color-mix). ## Dove l’HSL ti inganna L’HSL è una riorganizzazione dell’RGB, non un modello della visione umana. La sua luminosità è una semplice media tra il canale più luminoso e quello più debole, quindi ignora il fatto che i nostri occhi vedono giallo e verde come molto più brillanti del blu. Il risultato: due colori con identica luminosità HSL possono sembrare completamente diversi in brillantezza. - hsl(60 100% 50%): #ffff00 - hsl(120 100% 50%): #00ff00 - hsl(0 100% 50%): #ff0000 - hsl(240 100% 50%): #0000ff Tutti e quattro hanno il 50% di luminosità. Su bianco, il giallo ha un rapporto di contrasto di circa 1,07:1 e il blu di circa 8,6:1. Conta in due casi. Primo, una scala costruita variando la luminosità HSL risulterà irregolare tra le tonalità: un giallo al 50% è troppo chiaro per il testo mentre un blu al 50% lo supera facilmente. Prova sempre coppie reali con un [verificatore di contrasto](https://gradiently.design/it/guide/color-contrast-accessibility). Secondo, i gradienti e le palette generate che ruotano la tonalità a luminosità fissa si illuminano e si attenuano passando per il giallo e il blu. ### L’HSL va bene per - Leggere e modificare i colori a mano - Tinte e sfumature di una sola tonalità - Cambiare tema in fretta con le variabili - Desaturare un colore per uno stato attenuato ### Usa invece OKLCH per - Scale che coincidono tra tonalità diverse - Contrasto prevedibile da un valore di luminosità - Gradienti che restano uniformi in brillantezza - Palette generate per i design system [OKLCH](https://gradiently.design/it/guide/oklch-explained) mantiene la stessa idea amichevole (luminosità, colorazione, tonalità) ma misura la luminosità come la misurano gli occhi. Se parti con un nuovo design system, è l’impostazione migliore; se modifichi del CSS esistente o vuoi un ritocco rapido e leggibile, l’HSL resta perfettamente valido. ## Convertire HSL in HEX e viceversa Raramente serve fare i calcoli, perché ogni strumento di design e ogni pannello devtools del browser converte per te: clicca un campione di colore nei devtools di Chrome o Firefox e scorri tra i formati. Sotto il cofano, l’HSL si converte prima in RGB, e da RGB a HEX è una semplice aritmetica sulle coppie, spiegata in [da HEX a RGB](https://gradiently.design/it/guide/hex-to-rgb). Aspettati piccole differenze di arrotondamento: `hsl(262 83% 58%)` finisce su `#7c3bed`, a un passo dal `#7c3aed` da cui magari eri partito, perché le percentuali intere non raggiungono tutti i 16,7 milioni di valori HEX. Se progetti in Gradiently, questi numeri non li tocchi quasi mai: un Mark porta la sua palette, e con Pro il brand kit memorizza i tuoi colori così il Designer li applica al posto tuo. ## FAQ ### Cosa significa HSL? Hue, saturation, lightness: tonalità, saturazione e luminosità. La tonalità è l’angolo sul cerchio cromatico, la saturazione è quanto è vivace il colore, e la luminosità è quanto è vicino al nero o al bianco. ### Come scrivo un colore HSL in CSS? Usa hsl(tonalità saturazione% luminosità%), per esempio hsl(262 83% 58%). Aggiungi la trasparenza dopo una barra: `hsl(262 83% 58% / 0.5)`. ### hsla() serve ancora? No. hsl() accetta un valore alfa in tutti i browser attuali, quindi hsla() resta solo per il codice più vecchio. ### Qual è la differenza tra HSL e RGB? L’RGB dice quanta luce rossa, verde e blu mescolare; l’HSL dice quale tonalità, quanto vivace e quanto chiara. Descrivono gli stessi colori, ma l’HSL è più facile da regolare a mano. ### Perché due colori HSL con la stessa luminosità sembrano diversi? La luminosità HSL ignora quanto gli occhi siano sensibili a ogni tonalità, quindi il giallo appare molto più brillante del blu allo stesso valore. OKLCH risolve il problema con una luminosità percettiva.