Sblocca Colori Vivaci con OKLCH

Introduzione

Il web design si è evoluto in modo significativo nel corso degli anni, così come il modo in cui gestiamo il colore. Mentre RGB e i codici esadecimali sono stati lo standard per decenni, è emerso un nuovo concorrente per affrontare i loro limiti: il modello di colore OKLCH.

Cos'è OKLCH?

OKLCH è uno spazio colore basato sul modello di colore Oklab, progettato per essere percettivamente uniforme. Risolve molti dei problemi riscontrati nei modelli più vecchi come HSL e RGB, in particolare per quanto riguarda il modo in cui i nostri occhi percepiscono la luminosità e la saturazione.

Il nome OKLCH sta per:

• L - Luminosità (Lightness)
• C - Croma (Chroma)
• H - Tonalità (Hue)

I Componenti di OKLCH

Luminosità (L)

La luminosità controlla quanto è chiaro o scuro il colore.

• 0% è nero assoluto.
• 100% è bianco assoluto.

A differenza di HSL, dove il 50% di luminosità può sembrare molto diverso a seconda della tonalità (ad esempio, giallo vs. blu), la luminosità OKLCH è coerente. Un valore del 60% di luminosità apparirà ugualmente luminoso in tutte le tonalità.

Croma (C)

Il croma rappresenta l'intensità o la purezza del colore (simile alla saturazione).

• 0 è completamente grigio.
• 0.4 (circa) è il massimo per la maggior parte dei colori sRGB.
• I valori possono andare oltre (ad esempio, 0.5 o più) per i display ad ampia gamma (P3, Rec.2020).

Tonalità (H)

La tonalità è l'angolo sulla ruota dei colori, simile a HSL.

• 0 - 360 gradi.
• 0 è approssimativamente rosso, 120 verde, 240 blu.

Perché usare OKLCH?

1. Uniformità Percettiva

In HSL, cambiare la tonalità mantenendo costante la luminosità può rendere il colore visivamente più chiaro o più scuro. In OKLCH, la luminosità percepita rimane coerente, rendendo molto più facile creare tavolozze di colori accessibili.

2. Accesso a Colori ad Ampia Gamma

Lo sRGB (usato da Hex e RGB) può visualizzare solo una gamma limitata di colori. I monitor moderni supportano P3 e Rec.2020, che possono visualizzare verdi e ciano molto più vividi. OKLCH ti consente di accedere a questi colori "super-saturi" che in precedenza erano impossibili da specificare in CSS.

3. Miscelazione dei Colori Prevedibile

A causa della sua uniformità percettiva, la creazione di gradienti e la miscelazione dei colori in OKLCH produce transizioni fluide e naturali senza le "zone morte grigie" spesso osservate nei gradienti RGB.

Usare OKLCH in CSS

Il supporto per OKLCH è ora disponibile in tutti i principali browser moderni.

.my-element {
  /* Un rosa vivido */
  background-color: oklch(60% 0.25 330);
}

.semi-transparent {
  /* Con trasparenza alpha */
  color: oklch(80% 0.1 120 / 0.5);
}

Conclusione

OKLCH è il futuro del colore sul web. Fornendo un modo per definire i colori che si allineano con la percezione umana e sbloccando le piene capacità degli schermi moderni, offre a designer e sviluppatori un nuovo potente strumento per creare esperienze digitali belle e accessibili.