HSL цвета

HSL означает тон, насыщенность и светлота (от англ. Hue, Saturation, Lightness)

HSL значения

В CSS цвет может быть определен при помощи значений тона, насыщенности и светлоты. Для этого используется CSS функция:

hsl(hue, saturation, lightness)

Hue (Тон) - это значение на цветовом колесе от 0 до 360. 0 - красный, 120 - зеленый и 240 - синий.

Saturation (Насыщенность) - это процентное значение. 0% означает оттенок серого, а 100% - полноценный цвет.

Lightness (Светлота) - также процентное значение. 0% - черный, 50% - ни светлый ни темный, 100% - белый.

Ниже вы можете поэкспериментировать, изменяя различные значения HSL:

Примеры:

Насыщенность (Saturation)

Насыщенность это иными словами интенсивность или наполненность цвета.

100% - чистый цвет без оттенков серого.

50% - цвет наполовину серый, но цвет еще виден.

0% - полностью заполнено серым, цвет больше не виден.

Примеры:

Светлота (Lightness)

Светлоту можно описать как количество света, которое вы хотите придать вашему цвету. Здесь 0% означает без света (черный), 50% означает 50% света (среднее между темным и светлым), 100% означает полную освещенность (белый).

Примеры:

Оттенки серого

Оттенки серого обычно определяются устанавливая тон и насыщенность на 0, а светлоту от 0% до 100%, регулируя затемненность оттенка:

Примеры:

HSLA значения

Цветовые значения HSLA это расширение цветовых значений HSL. К ним добавляется альфа-канал, который определяет прозрачность для цвета.

Для определения цветового значения HSLA используется CSS функция:

hsla(hue, saturation, lightness, alpha)

Для параметра alpha используется число от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность).

Ниже вы можете поэкспериментировать, изменяя различные значения HSLA:

Примеры: