Помните времена, когда делали палитру в HSL, а кнопка «синяя» внезапно выглядела темнее «красной»? Или когда градиенты в sRGB превращались в унылую серую кашу? Так вот, с OKLCH это прошлое.
⚙️ Что за зверь
OKLCH — это новая цветовая модель в CSS. Одинаковые шаги по яркости реально выглядят как одинаковые шаги.
⚙️ Почему это круто
— палитры без шаманства: хочешь 5 кнопок разного цвета — берешь одну светлоту и насыщенность, меняешь только оттенок → все цвета выглядят ровно.
— градиенты без боли: никаких «грязных» промежуточных оттенков, переходы выглядят естественно.
— современные экраны: поддержка Display-P3, то есть реально яркие и «живые» цвета, которых нет в sRGB.
— OKLCH гарантирует: цвета воспринимаются так, как задумывал дизайнер.
⚙️ Где подвох
— старые браузеры не в теме → нужен fallback. Но в 2025 году вопрос «а что с IE?» мы уже почти не задаем.
— можно задать «несуществующие» цвета, которые ни один экран не отрисует. Но это скорее прикол для тех, кто любит ломать прод.
Код-пример: fallback без боли
:root {
--color-primary: #0066ff; /* fallback для старых */
@supports (color: oklch(0 0 0)) {
--color-primary: oklch(65% 0.3 250);
}
}
⚙️ Что это значит для нас
— дизайнеры наконец могут генерировать палитры, которые выглядят одинаково «по ощущениям».
— фронтам проще держать консистентность без ручных костылей.
— и да, теперь «почему эта кнопка зеленее, чем синяя» — не наш геморрой.
Перевели специально для вас ❤️
Подписывайтесь 🔥 RDCLR.DEV