Culorile OKLCH în CSS Modern: Gamut P3 & Contrast
Timp de decenii, web-ul a fost captiv în spațiul îngust sRGB prin coduri HEX și funcțiile rgb() sau hsl(). Odată cu ecranele moderne Retina și OLED capabile de culori spectaculoase din spectrul Display P3, specificația W3C CSS Color Module Level 4 introduce funcția oklch() — cel mai performant și intuitiv sistem de culoare inventat vreodată pentru ecrane digitale.
hsl(60 100% 50%)) pare orbitor de luminos pentru ochiul uman, în timp ce albastrul pur la 50% luminozitate (hsl(240 100% 50%)) pare aproape întunecat! În OKLCH, 50% luminozitate înseamnă aceeași percepție vizuală exactă pentru orice nuanță de pe cerc.
1. Anatomia Funcției oklch(): L, C, H
Sintaxa funcției oklch() este extrem de compactă și ușor de citit:
/* Sintaxa formală */
color: oklch(<Lightness> <Chroma> <Hue> [ / <Alpha>]);
/* Exemplu: un portocaliu intens și vibrant */
color: oklch(0.68 0.22 42);| Parametru | Interval de Valori | Semnificație Practică |
|---|---|---|
| L (Lightness) | 0% (0.0) la 100% (1.0) |
Luminozitatea perceptivă uniformă (0% = negru absolut, 100% = alb pur). |
| C (Chroma) | 0 până la aproximativ 0.37 |
Saturația sau puritatea culorii (0 = ton neutru gri, valori peste 0.2 accesează spectrul extins P3). |
| H (Hue) | 0 la 360deg |
Unghiul pe cercul cromatic (0/360 = roz-roșu, 90 = galben, 140 = verde, 240 = albastru). |
| / Alpha (opțional) | 0% la 100% (sau 0 la 1) |
Canalul de transparență opțional, separat prin bară oblică. |
2. Accesul la Spectrul Extins Display P3
Codurile HEX (#ff0000) pot reda doar culorile din spațiul învechit sRGB conceput pentru monitoarele CRT din anii 1990. Telefoanele iPhone, laptopurile MacBook și ecranele moderne OLED pot afișa cu până la 25% mai multe culori din spectrul Display P3.
Cu OKLCH, dacă mărești valoarea Chroma (ex.: oklch(0.65 0.28 140)), browserul activează automat pixelii de mare intensitate pe monitoarele P3, oferind un verde smarald sau un roșu aprins care este fizic imposibil de afișat în sRGB!
3. Construirea Algoritmică a Paletelor (Design Tokens)
Datorită uniformității perceptive, poți crea scale complete de nuanțe (de la 100 la 900) pentru Design System-ul tău doar modificând luminozitatea L, fără ca nuanța sau contrastul să se degradeze:
:root {
/* Culoare primară brand */
--brand-h: 220; /* Nuanță albăstrui */
--brand-c: 0.18; /* Saturație medie */
/* Scală automată armonioasă */
--blue-100: oklch(0.95 var(--brand-c) var(--brand-h));
--blue-300: oklch(0.80 var(--brand-c) var(--brand-h));
--blue-500: oklch(0.60 var(--brand-c) var(--brand-h)); /* Buton primar */
--blue-700: oklch(0.40 var(--brand-c) var(--brand-h)); /* Hover */
--blue-900: oklch(0.20 var(--brand-c) var(--brand-h)); /* Text */
}4. Amestecarea Culorilor cu funcția color-mix()
Împreună cu OKLCH, funcția color-mix() permite amestecarea precisă a două culori fără a folosi preprocesoare precum Sass:
/* Crearea unei culori de hover cu 20% alb suprapus */
.btn-primary:hover {
background-color: color-mix(in oklch, var(--blue-500) 80%, white);
}
/* Creare bordură semi-transparentă din culoarea textului */
.card-border {
border: 1px solid color-mix(in oklch, currentColor 25%, transparent);
}5. Suport în Browsere & Strategie de Producție
Funcția oklch() beneficiază de suport Baseline Universal în toate motoarele actuale de browsere (Chrome 111+, Safari 15.4+, Firefox 113+, Edge 111+). Dacă vrei să oferi suport și pentru browsere foarte vechi, poți folosi declarația dublă în cascadă:
.hero-title {
color: #d6472e; /* Fallback sRGB pentru browsere legacy */
color: oklch(0.58 0.22 36); /* Valoare vibrantă P3 pe toate browserele moderne */
}