Standardul modern de culori din CSS a depășit limitările istorice ale spațiului sRGB (codurile hexazecimale clasice și rgb()). Prin oklch() și funcția color-mix(), dezvoltatorii au acces la culori mult mai vibrante pe ecranele moderne (Display P3) și pot genera palete armonioase direct din cod.
1. Spațiul oklch(Luminozitate, Croma/Saturație, Nuanță)
/* oklch(L C H / alpha)
L = Luminozitate perceptivă (0% - 100%)
C = Croma / Intensitate (0 - ~0.4)
H = Nuanță / Hue (0 - 360 grade pe cercul culorilor) */
:root {
/* Albastru vibrant accesibil doar în gama largă P3 */
--culoare-primara: oklch(0.6 0.22 250);
/* Varianta mai deschisă păstrează exact aceeași nuanță modificând doar Luminozitatea (L) */
--culoare-primara-light: oklch(0.85 0.12 250);
}2. Amestecarea dinamică a culorilor cu color-mix()
/* Creează o nuanță de hover amestecând 85% din culoarea de bază cu 15% negru */
.btn:hover {
background-color: color-mix(in srgb, var(--culoare-primara) 85%, black);
}
/* Crearea unei culori cu 20% opacitate (transparență) fără rgba manual */
.caseta-alerta {
background-color: color-mix(in srgb, var(--culoare-primara) 15%, transparent);
border: 1px solid var(--culoare-primara);
}De ce este oklch() superior formatului HSL
În spațiul clasic HSL, culoarea galben pur și culoarea albastru pur pot avea aceeași valoare de luminozitate (ex: 50%), dar ochiul uman percepe galbenul ca fiind mult mai luminos. Spațiul OKLCH este calibrat perceptiv uniform: o luminozitate de 70% va părea la fel de luminoasă pe orice nuanță (verde, albastru, roșu sau galben), garantând că trecerea la teme de contrast ridicat sau Dark Mode respectă automat normele WCAG.