OKLCH: новая цветовая модель в CSS, о которой стоит знать

Помните времена, когда делали палитру в 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