OKLCH spiegato: il colore percettivo per designer

OKLCH è un modo di scrivere il colore come luminosità, chroma e tinta, dove la luminosità è misurata come la percepisce l’occhio umano. In CSS, oklch(60% 0.2 293) è un viola che appare al 60% del percorso tra nero e bianco, con colore intenso, a un angolo di tinta di 293 gradi. Per chi progetta il vantaggio pratico è semplice: cambi la tinta e tieni la stessa L, e il nuovo colore sembra chiaro uguale. HSL non può promettertelo, ed è il motivo per cui OKLCH è diventato lo standard nei design system più recenti, inclusa la palette di Tailwind.

Luminosità, chroma e tinta

La luminosità è la protagonista. Nasce da OKLab, uno spazio colore pubblicato nel 2020 e costruito per prevedere luminosità, intensità e tinta percepite in modo più uniforme dei modelli precedenti. Il chroma sostituisce la saturazione: invece di una percentuale di un massimo, è una quantità assoluta di colore, quindi un chroma di 0,1 ha la stessa intensità visiva qualunque sia la tinta. La tinta resta un angolo, ma gli angoli sono distribuiti in modo che un passo di 30 gradi sembri un cambiamento simile lungo tutto il cerchio.

OKLCH contro HSL: la stessa luminosità, fianco a fianco

Prendi sei tinte e tieni fissi luminosità e chroma a oklch(65% 0.11 H). I campioni qui sotto sembrano una sola famiglia e il loro contrasto sul bianco resta tra 3,1:1 e 3,4:1. Fai lo stesso in HSL al 50% di luminosità e il contrasto sul bianco oscilla da circa 1,07:1 per il giallo a 8,6:1 per il blu.

Questa uniformità rende OKLCH utile nel lavoro vero. Una serie di colori di stato, di serie di un grafico o di tag di categoria può condividere L e C e differire solo per la tinta, e nessuno urla più degli altri. Se poi ti serve una palette adatta al daltonismo, varia anche L, come spiegato in palette per il daltonismo.

Come scrivere OKLCH in CSS

:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}

Il supporto dei browser è ampio e i dettagli si verificano su caniuse. Per esplorare i valori in modo visivo, oklch.com è un selettore che mostra quali combinazioni un normale schermo riesce a visualizzare. Per convertire l’esadecimale di un brand esistente, incollalo in quel selettore o nel pannello colori degli strumenti per sviluppatori del browser, che può mostrare qualsiasi colore in OKLCH.

Costruire una scala con OKLCH

Per creare una scala di toni chiari e scuri, fai variare la luminosità a passi regolari e lascia che il chroma salga verso il centro e scenda verso le estremità. I colori molto chiari e molto scuri fisicamente non possono contenere molto colore, quindi se tieni il chroma alto agli estremi il browser deve tagliarli. Ecco una scala di viola costruita così.

Poiché L segue la luminosità percepita, puoi decidere il contrasto a grandi linee dai soli numeri. In questa scala il testo bianco supera 4,5:1 da L 50 in giù e il testo nero lo supera da L 60 in su. Conferma sempre con un verificatore di contrasto, ma raramente avrai sorprese. Trasformare una scala così in token con nome è spiegato in design token.

Gamut: quando un colore non esiste sullo schermo

OKLCH può descrivere colori che nessuno schermo sa mostrare. La maggior parte dei monitor visualizza sRGB; molti telefoni e portatili recenti visualizzano il più ampio Display P3. Alza abbastanza il chroma e esci da entrambi. In quel caso il browser riporta il colore al più vicino che lo schermo può mostrare, quindi nulla si rompe, ma potresti non ottenere ciò che hai scritto.

Gradienti OKLCH

I gradienti sono il punto in cui il colore percettivo rende di più. Un gradiente CSS semplice si miscela in sRGB, che scivola nel grigio tra tinte lontane. Il CSS moderno ti permette di scegliere lo spazio in cui miscelare, e OKLab o OKLCH mantengono il centro luminoso e pulito.

OKLab miscela in linea retta e va bene per la maggior parte dei gradienti a due colori. OKLCH ruota la tinta, il che è splendido per tramonti e arcobaleni ma può sorprenderti. La tecnica completa, comprese le parole chiave shorter hue e longer hue, è in gradienti CSS in OKLCH, e la teoria alla base in interpolazione dei gradienti.

I Mark di Gradiently sono resi dal vivo invece che scritti in CSS, e ognuno porta la sua palette: l’inchiostro automatico sceglie testo chiaro o scuro da quella palette per ogni riga, così le parole si leggono senza che tu controlli i numeri. Se preferisci partire da uno sfondo vivo già pronto invece che da un valore in un selettore, sfoglia il Mercato per parole di colore.