Когато зададеш hsl(60, 70%, 50%) и hsl(240, 70%, 50%), математически и двата цвята имат еднаква "светлост". Но окото ти ги вижда съвсем различно - жълтото е ослепително, синьото е тъмно. HSL не отчита как мозъкът ни обработва светлина.
Точно тук влиза OKLCH.
Осем свота с еднакъв L параметър. Вляво - HSL, вдясно - OKLCH. Разликата в перцептивната яркост е очевидна.
Какво е OKLCH
OKLCH е цветови модел, базиран на OKLab - пространство проектирано да съответства на човешкото зрение. За разлика от RGB и HSL, той гарантира, че промяната на един параметър засяга само онова, което казва параметърът.
Синтаксисът е прост:
css
color: oklch(65% 0.20 265);
Трите оси на OKLCH: L (яркост), C (наситеност), H (цветови тон).
L - Lightness (яркост)
Стойности от 0% (черно) до 100% (бяло). Ключовата разлика с HSL: ако зadadesh L: 65% на червено и на синьо, те ще изглеждат еднакво ярки за окото - не само математически.
C - Chroma (наситеност)
Стойности от 0 (сиво, без цвят) до около 0.4 (максимална наситеност). Горната граница зависи от hue - някои цветове физически не могат да бъдат много наситени в sRGB пространството.
H - Hue (цветови тон)
Ъгъл от 0° до 360°. Разпределението е по-равномерно от HSL:
- 0° / 360° - червено
- 90° - жълто
- 145° - зелено
- 265° - синьо
- 310° - лилаво
Защо OKLCH замества HSL
Три конкретни причини, поради които модерните CSS фреймуърки и дизайн системи преминават към OKLCH.
1. Перцептивна равномерност
При HSL, жълтото с L: 50% изглежда почти два пъти по-светло от синьото с L: 50%. При OKLCH, еднаквият L дава еднаква видима яркост - независимо от hue-то.
2. Автоматична тъмна тема
Тъй като L е предсказуема ос, dark mode се прави с обръщане само на светлостта:
css
:root {
--bg: oklch(98% 0.005 265);
--text: oklch(18% 0.02 265);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: oklch(18% 0.02 265);
--text: oklch(92% 0.005 265);
}
}Резултатът: перфектен контраст в двата режима, без ръчно fine-tuning на RGB стойности.
3. Програмно генериране на палитри
Цялата палитра на даден бранд може да се генерира с промяна само на L - оттенъкът и наситеността остават константни:
css
:root {
--brand-hue: 265;
--brand-50: oklch(95% 0.05 var(--brand-hue));
--brand-100: oklch(85% 0.10 var(--brand-hue));
--brand-200: oklch(75% 0.14 var(--brand-hue));
--brand-400: oklch(65% 0.18 var(--brand-hue));
--brand-500: oklch(55% 0.18 var(--brand-hue));
--brand-700: oklch(35% 0.18 var(--brand-hue));
--brand-900: oklch(20% 0.15 var(--brand-hue));
}За да смениш целия бранд цвят - сменяш само --brand-hue.
9-стъпкова палитра генерирана от един hue. Само L се променя.
Браузърна поддръжка
OKLCH е поддържан от всички модерни браузъри от 2023 г. насам. Глобалното покритие е над 93%.
Chrome от v111, Firefox от v113, Safari от v15.4.
За по-стари браузъри се използва стандартен fallback - браузърите, които не разпознават OKLCH, игнорират реда и използват предишния:
css
color: #7c5cbf; /* fallback за стари браузъри */
color: oklch(55% 0.18 300); /* модерни браузъри */Практически старт
Ако не искаш да конвертираш цветове на ръка, инструментът oklch.com позволява визуален избор с директно копиране на CSS стойности.
За Tailwind CSS - от версия 3.3 нататък можеш да дефинираш custom цветове директно в OKLCH в tailwind.config.js.
Готов ли е CSS за това?
OKLCH не е просто нов синтаксис - той е различна философия към цвета. Вместо да описваш цвета математически, описваш как окото го вижда. Резултатът е по-предсказуем дизайн, по-лесни dark mode палитри и по-малко ръчни корекции.
Ако изграждаш дизайн система или custom тема в WordPress през 2025 - OKLCH е правилната отправна точка.
Статията е публикувана от екипа на WebPulse - агенция за WordPress разработка и SEO оптимизация.
