OKLCH vs HSL
Оба формата описывают цвет через оттенок и два других значения. Разница в том, что OKLCH построен на том, как люди воспринимают цвет, а HSL — нет.
Проблема светлоты в HSL
Задайте жёлтому и синему одинаковую светлоту в HSL, и жёлтый будет выглядеть заметно ярче:
color: hsl(60 100% 50%); /* bright yellow */
color: hsl(240 100% 50%); /* dark blue */В OKLCH светлота гораздо точнее соответствует тому, что мы видим. Цвета с одинаковым значением выглядят примерно одинаково ярко, поэтому палитры легче сбалансировать.
Сравнение
| HSL | OKLCH | |
|---|---|---|
| Светлота | Зависит от оттенка | Близка к тому, что видит человек |
| Диапазон цветов | Только sRGB | Включает более широкие цветовые пространства |
| Поддержка браузерами | Универсальная | Все современные браузеры |
| Удобство чтения | Привычный формат | Требует небольшого привыкания |
Когда что использовать
- Используйте OKLCH для дизайн-систем, сгенерированных оттенков и ярких цветов на современных экранах.
- Используйте HSL для быстрых единичных цветов или когда нужно поддерживать очень старые браузеры.
Готовы перейти? Конвертируйте цвет с помощью HEX to OKLCH Converter, затем следуйте нашему руководству как использовать OKLCH в CSS.
Инструменты, использованные в руководстве
Конвертер цвета OKLCHПодбирайте цвета в OKLCH ползунками светлоты, насыщенности и оттенка и конвертируйте их в HEX, RGB, HSL и OKLab. Проверка охвата sRGB и запасные CSS-значения.Конвертер HEX в OKLCHПереведите любой HEX-цвет в OKLCH для современного CSS.Конвертер цветовБесплатный конвертер цветов онлайн: HEX в RGB, HSL, HWB, OKLCH, CMYK и названия CSS-цветов.
Часто задаваемые вопросы
OKLCH лучше, чем HSL?
Для создания палитр — обычно да, потому что его светлота более последовательна. HSL при этом подходит для простых случаев.
В чём разница между LCH и OKLCH?
Оба описывают цвет похожим образом, но OKLCH использует более новую модель, которая делает оттенки стабильнее при изменении светлоты.
