Цвета в oklch(): современный цветовой формат

  • 4 июня 2026

CSS

Евгений Шкляр

HEX-коды вроде #3b82f6 — привычный способ задавать цвета в CSS. Но у них есть большая проблема: они не интуитивны для человека. Как сделать цвет светлее на 10%? Добавить прозрачность? Подобрать гармоничный акцентный оттенок? С HEX и даже с HSL это превращается в угадайку. oklch() решает эту задачу.

Что такое oklch

oklch — это цветовое пространство, построенное на основе восприятия человеческим глазом. Буквы расшифровываются так:

  • L — lightness (яркость), от 0 до 1
  • C — chroma (насыщенность), от 0 примерно до 0.4
  • H — hue (оттенок), угол от 0 до 360 градусов
color: oklch(0.6 0.2 250);

Это синий средней яркости и насыщенности. В отличие от HSL, oklch-цвета одной яркости действительно выглядят одинаково яркими для глаза — это называется перцептивной равномерностью.

Почему oklch лучше HSL

В HSL одинаковое значение lightness: 50% у жёлтого и синего даёт совершенно разные воспринимаемые яркости — жёлтый кажется намного ярче. oklch это исправляет: L: 0.7 у любого оттенка выглядит одинаково.

Главные преимущества oklch для дизайн-систем:

  1. Легко строить цветовые палитры — достаточно менять только H, оставляя L и C постоянными.
  2. Простое управление яркостью через CSS-переменные — удобно для тёмных тем.
  3. oklch охватывает более широкий спектр цветов (P3 и даже Rec2020), в том числе цвета, которые недоступны в sRGB.

Попробуйте сами

0.60
0.20
250
Палитра (L меняется, H и C фиксированы):

oklch в CSS-переменных

Самая сильная связка — oklch с кастомными свойствами:

:root {
  --brand-h: 250;
  --brand-c: 0.2;
}

.btn-primary   { background: oklch(0.55 var(--brand-c) var(--brand-h)); }
.btn-secondary { background: oklch(0.75 var(--brand-c) var(--brand-h)); }
.btn-ghost     { background: oklch(0.95 var(--brand-c) var(--brand-h)); }

Чтобы изменить весь бренд — достаточно поменять значение --brand-h.

oklch поддерживается во всех современных браузерах: Chrome 111+, Firefox 113+, Safari 15.4+. Для старых браузеров всегда можно добавить fallback:

color: #3b82f6; /* fallback для старых браузеров */
color: oklch(0.6 0.2 250);

oklch — перцептивно равномерное цветовое пространство: цвета с одинаковым L действительно выглядят одинаково яркими. Это делает oklch идеальным для построения палитр дизайн-систем и управления тёмной темой через CSS-переменные.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники