Тон, насыщенность и светлота

В HSL у жёлтого и синего светлота 50%, но по формуле яркости WCAG жёлтый отражает почти в 13 раз больше света, чем синий.

Превращаем куб в цилиндр

Числа RGB удобны для экрана и неудобны для человека. Если хочешь «тот же синий, но чуть светлее», придётся менять все три канала сразу на разные величины. HSL перестраивает те же цвета sRGB так, чтобы регуляторы соответствовали тому, как люди говорят о цвете. CSS Color 4 описывает его как цилиндрическую модель: угол тона по окружности, центральная ось светлоты от чёрного до белого и радиус насыщенности, то есть то, как далеко цвет от нейтрального серого.

Представь куб RGB, стоящий на чёрном углу, с белым прямо над ним. Ось серых теперь вертикальна. Посмотри сверху, и шесть ярких углов, красный, жёлтый, зелёный, голубой, синий и пурпурный, образуют кольцо вокруг оси. HSL берёт это кольцо, делает его круглым и растягивает всё тело в цилиндр. Модель выше показывает результат: горизонтальный диск при выбранной светлоте и вертикальный срез при выбранном тоне и противоположном ему. Нажми в любом месте на любой из двух поверхностей, чтобы выбрать этот цвет.

Тон

Тон — это угол в градусах. CSS Color 4 фиксирует начало отсчёта: 0deg — красный sRGB, 120deg — зелёный, 240deg — синий, а 360deg возвращает к красному. На полпути между основными цветами стоят вторичные: 60deg жёлтый, 180deg голубой и 300deg пурпурный. Поскольку тон — это угол, он замыкается. Тон 390deg — то же, что 30deg, а прибавление 180deg к любому тону даёт цвет прямо напротив на круге.

Насыщенность и светлота

Насыщенность задаётся в процентах. При 100% цвет находится на внешней стороне цилиндра и так ярок, как позволяет sRGB при этой светлоте. При 0% он лежит на центральной оси и является серым; CSS Color 4 говорит, что тон тогда вообще не влияет, поэтому hsl(0deg 0% 50%) и hsl(180deg 0% 50%) — один и тот же серый. Светлота тоже задаётся в процентах. 0% — это чёрный для любого тона, 100% — белый для любого тона, а 50% даёт самую яркую версию тона. Так hsl(0deg 100% 50%) — тот же красный, что #ff0000, а hsl(120deg 100% 25%) — тёмно-зелёный, rgb(0 128 0).

Где HSL вводит в заблуждение

HSL удобна, и спецификация CSS откровенно говорит о её пределах. Её светлота — не та светлота, которую видит глаз. У жёлтого, hsl(60deg 100% 50%), и синего, hsl(240deg 100% 50%), одинаковая L, равная 50%, но жёлтый выглядит гораздо светлее. Формула яркости WCAG даёт 0.9278 для этого жёлтого и 0.0722 для этого синего, отношение почти 13. Угол тона тоже неравномерен: спецификация отмечает, что шаг в 30 градусов среди синих кажется малым, а тот же шаг между жёлтым и зелёным кажется большим. Более новые пространства CSS, например oklch(), созданы, чтобы это исправить. Чтобы проверить, читается ли текст, никогда не доверяй светлоте HSL. Используй коэффициент контраста, который ты вычислишь в уроке 6.