A quale sviluppatore non è mai capitato di dover codificare un colore durante lo sviluppo di una pagina web?
Solitamente il modo che viene in mente è di specificare il colore tramite il modello RGB, forse guidati dall’abitudine, praticità e diffusione. Esistono però altri modelli, come l’HSL.
Entrambe queste codifiche consentono di rappresentare gli stessi colori ma dal punto di vista pratico HSL risulta più conveniente in alcuni contesti.
In questo articolo Francesco Sacchi spiegherà le due tecniche dopodiché permetterà di metterle a confronto con un semplice editor di colori HTML.
RGB
La codifica RGB si compone di tre valori numerici tra 0 e 255 che corrispondono ai colori rosso, verde e blu.
Ogni colore risultante è la combinazione dei tre colori nella rispettiva intensità:
- rosso: rgb(255, 0, 0)
- verde: rgb(0, 255, 0)
- blu: rgb(0, 0, 255)
Secondo la mescolanza additiva (trovate il link di approfondimento nel paragrafo Riferimenti) è possibile ottenere tutti i colori; ad esempio il giallo, rgb(255, 255, 0), dato dal rosso più verde.
A partire quindi dal nero, ovvero rgb(0, 0, 0), si arriva fino al bianco, rgb(255, 255, 255), passando per tutte le gradazioni di colore.
Esiste anche una notazione più compatta e ampiamente utilizzata, quella esadecimale: da #000000 a #ffffff dove ogni valore rgb viene espresso con due cifre esadecimali.
HSL
L’acronimo sta per Hue Saturation Lightness, che tradotto significa tonalità saturazione luminosità, e si compone anch’esso di tre valori numerici. Il primo valore, tra 0 e 360, indica la tonalità: all’interno dello spazio dei colori (immagine seguente), in senso orario si attraversano tutte le tonalità. Lo 0 è in alto (rosso), il 90 a destra (verde) e così via.
Il secondo valore è la saturazione che indica l’intensità della tonalità: più saturazione corrisponde a un colore più acceso, mentre meno saturazione a un colore più spento, tendente al grigio. La saturazione è un valore in percentuale che va dallo 0% al 100%.
Il terzo ed ultimo valore è quello di luminosità, in percentuale, che rappresenta la brillantezza. Una luminosità del 100% porterà qualsiasi tonalità sul bianco mentre un valore di luminosità a zero porterà qualsiasi colore al nero.
RGB e HSL a confronto
Solitamente lo sviluppatore, o chiunque stia lavorando alla grafica HTML, cerca la codifica del colore e propende per il classico copia-incolla; in questo caso le due codifiche sono sostanzialmente equivalenti.
Se invece si sta sperimentando per trovare un colore che sia di gradimento, la codifica HSL risulta più fruibile.
Vediamolo con un esempio.
Nella sfida di seguito si dovrà provare a riprodurre un colore, generato in modo casuale, sia con la tecnica dell’RGB che con HSL, aggiustando i rispettivi valori.
Sarà possibile controllare il risultato tramite un valore di distanza, dove 0 sta a indicare la corrispondenza perfetta con il colore dato da replicare.
Breve tutorial:
- Cliccare Generate a target color per ottenere il colore da riprodurre
- Per l’RGB, l’ordine delle barre è Rosso Verde e Blu
- Per l’HSL si suggerisce di alzare i livelli di Saturazione e Luminosità a circa 50%, altrimenti si otterrebbe solo nero o comunque un colore in scala di grigi
- Cliccare Check results e leggere il risultato numerico per capire quanto distanti si è andati rispetto al colore da riprodurre
Un ultimo consiglio: provare a fare diversi tentativi dato che alcuni colori saranno egualmente facili, ma su altri si noterà una certa differenza.
Conclusioni
Nonostante la codifica RGB sia più nota, quantomeno nel mondo degli sviluppatori, la codifica HSL è più adatta alla sperimentazione e alla ricerca di un colore perché permette di rispondere più facilmente a richieste del tipo “vorrei il colore un po’ più chiaro” o “aumentiamo l’opacità”.
La codifica HSL si presta bene alla generazione di colori casuali in quanto tramite un solo valore random, associato alla componente H, si possono ottenere colori molto diversi, mentre con RGB bisognerebbe combinare tutti e tre valori.
Entrambi i modelli sono ottimamente supportati dalla maggior parte dei browser. Ulteriori approfondimenti al report Can I Use li trovate nel paragrafo Riferimenti.
Riferimenti
- RGB
- HSL
- Mescolanza additiva
- Servizio online per ottenere la codifica esadecimale, rgb hsl e html dei colori in maniera rapida
- Can I Use RGB
- Can I Use HSL