HTML HSL и HSLA Цвета

HSL означает hue, saturation, lightness (оттенок, насыщенность и лёгкость).

Значение цвета HSLA является расширением HSL с альфа-каналом (непрозрачность).

HSL Значения цвета

В HTML цвет можно указать, используя оттенок, насыщенность и легкость (HSL) в форме:

hsl(hue, saturation, lightness)

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

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

Lightness (легкость) - это также процентное значение 0% - черный, а 100% - белый.

Экспериментируйте, смешивая значения HSL ниже:

Saturation / Насыщенность

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

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

50% - это 50% серого, но вы все равно можете видеть цвет.

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

Lightness / Легкость

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

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

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

HSLA Значения цвета

Значение цвета HSLA - это расширение значений цвета HSL с помощью альфа-канала, определяет непрозрачность цвета.

Значение цвета HSLA указывается с помощью:

hsla(hue, saturation, lightness, alpha)

Параметр alpha - это число от 0,0 (полностью прозрачный) до 1,0 (совсем не прозрачный):

Экспериментируйте, смешивая приведенные ниже значения HSLA: