О цвете HSL

Цвет HSL — это цветовая модель, представляющая цвета с помощью оттенка, насыщенности и светлоты. В отличие от RGB, где напрямую задаётся интенсивность красного, зелёного и синего света, HSL разделяет тон, яркость цвета и светлоту, поэтому удобен для настройки цветов и работы с CSS.

Например, основные цвета, такие как красный, можно представить следующим образом.

Чтобы добавить прозрачность, укажите альфа-значение. Например, полупрозрачный красный можно представить как hsl(0deg 100% 50% / 0.5).

В качестве входных данных можно использовать запись с пробелами hsl(0deg 100% 50%), а также старую запись с запятыми hsl(0deg, 100%, 50%).

Обработка оттенка, насыщенности и светлоты

Оттенок обрабатывается как угол; значения больше 360deg и отрицательные значения нормализуются в диапазон от 0deg до 360deg. Например, hsl(360deg 100% 50%) считается тем же цветом, что и hsl(0deg 100% 50%), а hsl(-120deg 100% 50%) — тем же цветом, что и hsl(240deg 100% 50%).

Насыщенность и светлота обрабатываются в диапазоне от 0% до 100%. При насыщенности 0% цвет становится ахроматическим серым независимо от оттенка. При светлоте 0% цвет чёрный, при 100% — белый.

Разница между HSL и RGB

RGB напрямую задаёт красный, зелёный и синий компоненты, поэтому близок к отображению на экране и данным изображения. HSL разделяет оттенок, насыщенность и светлоту, упрощая операции вроде «сделать светлее при том же оттенке» или «уменьшить только насыщенность».

Однако HSL не является перцепционно равномерным цветовым пространством. Когда нужно удобнее работать с визуальной светлотой или различиями цветов, могут использоваться такие цветовые пространства, как Lab, LCH, Oklab и Oklch.