Выбор и конвертация цвета OKLCH

Что такое OKLCH?

OKLCH — цветовое пространство, разработанное Бьорном Оттоссоном (2020) и добавленное в CSS в спецификации Color Level 4. Цвет описывается тремя понятными значениями: L — светлота (0–100%), C — насыщенность (примерно от 0 до 0,37 для экранных цветов) и H — оттенок (угол от 0 до 360°). В отличие от HSL, это пространство перцептивно равномерное: два цвета с одинаковым L действительно кажутся человеческому глазу одинаково светлыми.

Почему разработчики переходят с HSL

• Предсказуемые палитры: в HSL жёлтый при светлоте 50% выглядит намного ярче синего при 50%. В OKLCH изменение только оттенка сохраняет воспринимаемую светлоту, что удобно для согласованных состояний кнопок и масштабов дизайн-систем (именно поэтому Tailwind CSS v4 поставляет свою палитру в OKLCH).
• Более точная математика доступности: фиксированная разница в светлоте даёт достаточно стабильную разницу в контрасте.
• Цвета широкого охвата: OKLCH может описывать цвета Display P3, которые нельзя задать в HEX и rgb(), поэтому современные экраны показывают более насыщенные цвета.

Охват и запасные значения

Не каждая комбинация L/C/H существует на экране sRGB. Когда насыщенность слишком велика, инструмент сохраняет светлоту и оттенок и уменьшает насыщенность, пока цвет не войдёт в охват, а затем выводит результат как запасное значение HEX/RGB. В CSS запасное значение пишут первым, а OKLCH — вторым: браузеры, которые понимают OKLCH, используют вторую строку:

color: #e5484d;
color: oklch(63% 0.2 25);

OKLCH и OKLab

OKLab — то же пространство в прямоугольных координатах (L, a, b). Оно идеально подходит для смешивания и градиентов, попробуйте Смеситель цветов, а OKLCH проще для ручного редактирования человеком.

Также ищут как: oklab, перцептивный цвет, hex в oklch, oklch в hex, пипетка цвета, цветовой охват p3.

Инструменты, которые хорошо сочетаются с Конвертер цвета OKLCH

• Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
• Генератор цветов Tailwind — Вставьте один цвет бренда и получите сбалансированную шкалу из 11 оттенков (от 50 до 950), построенную в OKLCH, с подсказками контраста и экспортом для Tailwind v3, v4, CSS и SCSS.
• HEX в RGBA конвертер — Вставьте HEX-код, передвиньте ползунок прозрачности и скопируйте нужный CSS: классический rgba(), современный rgb( / alpha) или 8-значный HEX.
• APCA калькулятор контраста — Рассчитайте светлотный контраст APCA (Lc) между текстом и фоном, узнайте, для каких случаев подходит пара цветов, и сравните результат с классическим коэффициентом WCAG 2.