Guida ai colori con i fogli di stile CSS

La combinazione di colori scelta per il  nostro sito web impatta sulla quantità di energia consumata. Una palette di colori può essere rispettosa dell’ambiente e ridurre l’impatto sulla durata della batteria dei dispositivi mobili. Esistono molti modi diversi per definire i colori nei fogli CSS. Utilizzre il nome del colore nel CSS è uno dei modi più semplici per colorare un elemento:

.my-element { 
background-color: red; 
}

I nomi mnemonici sono piuttosto limitati e raramente si adattano ai progetti che stiamo sviluppando. Potremmo anche usare valori esadecimali per  definire un colore. Ad esempio, questo codice conferisce al nostro elemento un colore di sfondo rosso:

.my-element { 
background-color: #ff0000; 
}

Purtroppo, i valori esadecimali sono molto difficili da leggere. È improbabile riuscire a indovinare il colore di un elemento leggendo il valore esadecimale. Quando si costruisce un sito Web, potremmo utilizzare un colore esadecimale, ma se ci chiedessero di renderlo, diciamo il 20% più scuro, avremmo difficoltà a farlo regolando il valore esadecimale, senza una guida visiva o un colore selezionatore.

RGB

La notazione RGB (rosso, verde, blu) è un modo alternativo per definire i colori, dandoci accesso alla stessa gamma di colori dei valori esadecimali, in una forma molto più leggibile. Abbiamo una funzione rgb() in CSS per questo. I colori sul web sono additivi, il che significa che maggiore è la proporzione di rosso, verde e blu, più chiaro sarà il colore risultante. Per definire il colore bianco, quindi dovremmo impostare i 3 canali sul valore massimo (255); viceversa per definire il colore nero, dovremmo impostare i 3 canali sul calore minimo (0). Se, ad esempio, usiamo solo il canale rosso, il risultato è rosso:

.my-element { 
background-color: rgb(255, 0, 0); 
}

Possiamo anche aggiungere un canale alfa (per la trasparenza), utilizzando la funzione rgba() che accetta un quarto parametro con valori da 0 a 1, dove 0 è la completa trasparenza, mentre 1 rappresenta l’opacità totale:

.my-element { 
background-color: rgba(255, 0, 0, 0.5); // transparenza of 50% 
} 

.my-element { 
background-color: rgba(255, 0, 0, 1); // opaco
}

Le funzioni CSS rgb() e rgba() ci permettono di “mescolare” i colori nel nostro codice in una certa misura, ma i risultati possono essere alquanto imprevedibili.

HSL

Da qualche anno, sono state introdotte nuove funzioni in CSS per regolare il colore mediante altri parametri. Ad esempio, con le funzioni hsl() e hsla(), siamo in grado di utilizzare i valori HSL (tonalità, saturazione, luminosità). Queste funzioni, a differenza degli esadecimali, sono molto più intuitivi quando vogliamo regolare i valori del colore. Ad esempio, possiamo ottenere varianti più scure e più chiare dello stesso colore regolando il parametro della luminosità:

.my-element { 
background-color: hsl(0deg, 100%, 20%); // rosso scuro 
} 

.my-element { 
background-color: hsl(0deg, 100%, 50%); // rosso medio 
} 

.my-element { 
background-color: hsl(0deg, 100%, 80%); // rosso chiaro 
}

Il primo paramentro (HUE / Tonalità) rappresenta la posizione su una ruote dei colori e può rappresentare qualsiasi valore compreso tra 0 e 360deg (gradi) oppure un valore espresso in turn (da 0 a 1 che rappresenta un giro completo della ruota).

Questi codici, ad esempio, sono tutti validi:

.my-element { background-color: hsl(180deg, 50%, 50%); } 
.my-element { background-color: hsl(0.5turn, 50%, 50%); } 
.my-element { background-color: hsl(180, 50%, 50%); }

Sintassi alternativa su CSS moderni

Il CSS Color Module Level 4 ci fornisce una sintassi più comoda per le nostre funzioni di colore, che è ampiamente supportata nei browser. Non è più necessario che i valori siano separati da virgole e le funzioni rgb() e hsl() possono accettare un parametro alfa opzionale, separato da una barra:

.my-element { background-color: hsl(0 100% 50% / 0.5); } 
.my-element { background-color: hsl(0 100% 50%); }

Nuove funzioni di colore sui CSS

HWB

HWB sta per tonalità, bianchezza e oscurità. Come HSL, la tonalità può essere ovunque all’interno di un intervallo da 0 a 360. Gli altri due argomenti controllano la quantità di bianco o nero mescolata a quella tonalità, fino al 100% (che risulterebbe in un colore totalmente bianco o totalmente nero). Se si mescolano quantità uguali di bianco e nero, il colore diventa sempre più grigio. Possiamo pensare che sia simile alla miscelazione della vernice. Potrebbe essere particolarmente utile per creare tavolozze di colori monocromatiche

LAB

LAB è uno spazio colore a cui è possibile accedere in software come Photoshop ed è consigliato se si desidera che un colore appaia sullo schermo come, ad esempio, stampato su una t-shirt. Utilizza tre assi: luminosità, seguito dall’asse a (dal verde al rosso) e dall’asse b (dal blu al giallo).

La luminosità è espressa in percentuale, molto simile a HSL, ma può infatti superare il 100% se utilizzata con la funzione lab(). I bianchi extra-chiari possono utilizzare una percentuale fino al 400%. Gli attributoi a e b assi possono variare da positivo a negativo. Due valori negativi daranno una tonalità verso l’estremità verde/blu dello spettro, mentre due valori positivi possono dare una tonalità più arancione/rossa.

.my-element { background-color: lab(80% 100 50); // rosa acceso } 
.my-element { background-color: lab(80% -80 -100); // turchese }

LCH sta per leggerezza, crominanza e tonalità. Come con LAB, la leggerezza viene definita con una percentuale che può superare il 100%. Simile a HSL, la tonalità può essere un intervallo compreso tra 0 e 360. La crominanza rappresenta la quantità di colore e possiamo pensarla come simile alla saturazione in HSL. Ma la crominanza può superare 100 e in effetti è teoricamente illimitata. Esempio di utilizzo:

.my-element { background-color: lch(80% 100 50); } 
.my-element { background-color: lch(80% 240 50); // questo colore potrebbe andare oltre ai colori visualizzabili in un browser }

Perché abbiamo bisogno di LAB e LCH quando abbiamo HSL? Uno dei motivi è che l’utilizzo di LAB o LCH ci consente di accedere a una gamma di colori molto più ampia. LCH e LAB sono progettati per darci accesso all’intero spettro della visione umana. Inoltre, HSL e RGB hanno alcuni difetti: non sono percettivamente uniformi e, in HSL, aumentare o diminuire la luminosità ha un effetto ben diverso a seconda della tonalità.

In questa demo, premendo l’interruttore della scala di grigi, possiamo vedere un netto contrasto tra LCH e HSL. Per le strisce di tonalità e saturazione HSL, ci sono chiare differenze nella luminosità percettiva di ciascun quadrato, anche se la componente “luminosità” della funzione HSL è la stessa. Nel frattempo, le strisce di crominanza e tonalità sul lato LCH hanno una leggerezza percettiva quasi uniforme. Applicando un filtro in scala di grigi possiamo vedere che i colori LCH (a sinistra) hanno una luminosità quasi uniforme quando regoliamo la crominanza e la tonalità, rispetto a quando regoliamo la tonalità e la saturazione dei colori HSL (a destra), dove sono visibili differenze di leggerezza.

Quando verranno ampiamente supportati, forse LAB e LCH potranno aiutarci a scegliere combinazioni di colori più accessibili: con lo stesso valore di luminanza, sarà possibile variare i valori di tonalità o crominanza per produrre un testo in primo piano con lo stesso rapporto di contrasto con i colori di sfondo.

Gestione Del Colore

Proprietà personalizzate

Le proprietà personalizzate CSS ci consentono di memorizzare valori da riutilizzare nei nostri fogli di stile. Poiché consentono valori di proprietà parziali, possono essere particolarmente utili per la gestione e la manipolazione dei valori di colore. HSL si presta particolarmente bene all’uso di proprietà personalizzate, grazie alla sua intuitività. Nel codice che segue, una proprietà personalizzata viene usata per regolare la tonalità per ogni segmento della striscia di colore calcolando un valore –hue basato sull’indice dell’elemento (definito in un’altra proprietà personalizzata).

li { 
--hue: calc(var(--i) * (360 / 10)); 
background: hsl(var(--hue, 0) 50% 45%); 
}

Funzioni di colore con SASS

Il linguaggio Sass fornisce delle funzioni di colore per consentirci di gestire il colore in base a diversi modelli. Possiamo saturare o desaturare, schiarire o scurire, anche mescolare due colori insieme. Funzionano benissimo in alcuni casi, ma hanno alcune limitazioni: in primo luogo, possiamo usarli solo in fase di compilazione, non per manipolare i colori dal vivo nel browser. In secondo luogo, sono limitati a RGB e HSL, quindi soffrono degli stessi problemi di uniformità percettiva, dove un colore è sempre più desaturato ma appare sempre più chiaro quando convertito in scala di grigi.

Per garantire che la leggerezza rimanga uniforme, potremmo utilizzare la proprietà personalizzate con LCH in modo simile a HSL sopra.

li { 
--hue: calc(var(--i) * (360 / 10)); 
background: lch(50% 45 var(--hue, 0));
}

Miscelazione e manipolazione dei colori

Miscelazione di colori

Una cosa che i CSS non ci permettono ancora di fare è mescolare i colori nel browser. Ma la specifica del colore CSS di livello 5 (attualmente bozza) contiene proposte per delle funzioni di miscelazione dei colori che sembrano piuttosto promettenti. Il primo è la funzione color-mix(), che mescola due colori in modo molto simile alla funzione  mix() di Sass. La funzione color-mix() ci consente di specificare uno spazio colore e utilizza LCH per impostazione predefinita, con un risultato di miscelazione superiore.

Accessibilità e contrasto dei colori

Un’altra funzione proposta è color-contrast(), che ha davvero enormi implicazioni per la scelta di colori accessibili. In effetti, è stato progettato pensando prima di tutto all’accessibilità. Consente al browser di selezionare il valore più appropriato da un elenco, confrontandolo con un altro colore. Possiamo anche specificare il rapporto di contrasto desiderato per garantire che le nostre combinazioni di colori soddisfino le linee guida WCAG. I colori vengono valutati da sinistra a destra e il browser seleziona il primo colore dall’elenco che soddisfa il rapporto desiderato. Se nessun colore soddisfa il rapporto, il colore scelto sarà quello con il contrasto più elevato.

L’impatto ambientale dei colori

La tavolozza dei colori che abbiamo scelto può avere un impatto su quanta energia consuma il tuo sito web. Sugli schermi OLED (che rappresentano la maggior parte dei televisori e dei laptop moderni), i colori più scuri utilizzanno molta meno energia rispetto ai colori chiari, con il bianco che utilizza la maggior parte dell’energia e il nero il minimo (proprio perchè i led sono spenti…). Secondo Tom Greenwood, autore di Sustainable Web Design, il blu è anche più energivoro delle tonalità rosse e verdi. Per ridurre l’impatto ambientale delle nostre applicazioni, dovremmo prendere in considerazione uno schema di colori più scuro, utilizzando meno blu o abilitando l’opzione modalità scura. Come ulteriore vantaggio, una scelta di colori più rispettosa dell’ambiente può anche ridurre l’impatto sulla durata della batteria dei dispositivi mobili.