OKLCH в CSS: предсказуемые оттенки и тёмная тема

Почему дизайнеры переходят с HEX на `oklch()` и как не сломать контраст WCAG.

OKLCH (Lightness, Chroma, Hue) перцептивно равномернее HSL: шаг +0.1 по L даёт одинаковый «визуальный» контраст.

В токенах храните oklch(0.55 0.12 250) и генерируйте палитру через color-mix(in oklch, ...).

- [oklch() — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) — Синтаксис цвета.

- [OKLCH in CSS — web.dev](https://web.dev/articles/oklch-in-css) — Миграция палитр.

---

## Доступность

Проверяйте пары текст/фон APCA или WCAG в Figma-плагинах — насыщенный chroma в OKLCH обманывает глаз.

Fallback: дублируйте критичные цвета в srgb для старых PDF-экспортов брендбука.

#CSS#цвет#токены

Читайте также