Как использовать OKLCH в CSS

Синтаксис

color: oklch(62% 0.19 255);
color: oklch(62% 0.19 255 / 50%); /* с прозрачностью */

• Светлота изменяется от 0% (черный) до 100% (белый).
• Насыщенность показывает, насколько ярким является цвет. 0 — серый, а большинство пригодных цветов укладываются примерно в 0.37.
• Оттенок — это угол цвета на цветовом круге, от 0 до 360.

Попробуйте OKLCH Color Picker или переведите цвет вашего бренда с помощью HEX to OKLCH Converter.

Создание набора оттенков

Оставьте насыщенность и оттенок без изменений и меняйте только светлоту:

:root {
  --brand-300: oklch(80% 0.12 255);
  --brand-500: oklch(62% 0.19 255);
  --brand-700: oklch(45% 0.17 255);
}

Создание состояний при наведении

Синтаксис относительных цветов позволяет получить один цвет из другого:

.btn { background: var(--brand-500); }
.btn:hover { background: oklch(from var(--brand-500) calc(l - 0.08) c h); }

Относительные цвета новее самой функции oklch(), поэтому проверьте поддержку браузерами у своей аудитории.

Смешивание цветов

Используйте color-mix(), чтобы смешать два цвета. Смешивание в OKLCH обычно даёт более чистые промежуточные оттенки, чем в sRGB:

background: color-mix(in oklch, var(--brand-500) 70%, white);

Проверить смеси можно с помощью Color Mixer.

Добавление запасного варианта

Современные браузеры поддерживают OKLCH. Для совсем старых укажите сначала значение в HEX. Браузеры пропускают то, что не могут прочитать:

color: #2563eb;
color: oklch(54.6% 0.215 262.9);

Значение в нужном формате можно получить с помощью OKLCH to HEX Converter.

Проверка контраста

Светлота делает контраст более предсказуемым, но не гарантирует его. Всегда проверяйте пары текста и фона с помощью Contrast Checker.