Con la CSS Color 4 specification il linguaggio CSS si arricchisce di una nuove modalità per la dichiarazione dei colori, nello specifico parliamo di ben 14 alternative tra le quali risulta particolarmente interessante quella basata sull'utilizzo della notazione funzionale oklch(). Cerchiamo di capire in che modo possiamo sfruttarla per le nostre pagine Web.
Sintassi e parametri di oklch()
La sintassi di oklch() può essere riassunta in questo modo:
oklch(L C H [/ A])dove con L intendiamo la luminosità percepita. Per capire questo concetto possiamo fare riferimento a come viene espresso tale valore che prevede l'utilizzo di una percentuale compresa tra 0% e 100%. Il limite inferiore rappresenta il bianco mentre quello superiore il nero, si tratta quindi di un argomento con cui definire il livello di contrasto.
Il parametro C è invece riferito al livello di chroma che potremmo descrivere come "quantità di colore". Il suo valore esprime la saturazione cromatica a partire dal grigio fino al colore più saturato possibile. C può essere quindi pari a 0 e non prevedere dei limiti per quanto riguarda il livello massimo di saturazione, nonostante ciò oltre lo 0.4 non si avranno plausibilmente risultati molto differenti.
H è invece il cosiddetto hue angle (o "angolo della tinta"), sostanzialmente un metodo per la misurazione del colore che ha un valore compreso tra 0 e 360. 0 gradi corrispondono per esempio al rosso, 90 gradi al giallo, 180 gradi al ciano verdastro e 270 gradi al blue cielo. Gli intervalli tra questi valori determinano il passaggio tra una sfumatura di colore e l'altra e tra colori differenti.
A esprime infine il livello di opacità e può avere sia un valore assoluto compreso tra 0 e 1 che un valore percentuale tra 0% e 100%. 1 e 100% rappresentano l'opacità completa.
Utilizzo pratico di oklch()
Se per esempio volessimo ottenere uno sfondo di colore blue per lo sfondo di un selettore a:hover potremmo utilizzare una sintassi come la seguente:
a:hover {
background: oklch(45% 0.26 264);
}Il vantaggio rispetto all'uso di rgb() ed hex() appare evidente perché il codice proposto risulta molto più leggibile. I parametri devono rispettare l'ordine descritto in precedenza e per questo motivo è più facile comprendere il valore (e il colore corrispondente) di ciascun argomento passato tra parentesi.
