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: