HTML HSL и HSLA Цвет

HSL значение цвета

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

hsl(hue, saturation, lightness)

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

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

Lightness - это также процентное значение, 0% - черное, а 100% - белое.

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

Насыщенность цвета

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

100% - это чистый цвет, никаких оттенков серого

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

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

Яркость цвета

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

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

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

HSLA значение цвета

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

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

hsla(hue, saturation, lightness, alpha)

Альфа-параметр - это число между 0.0 (полностью прозрачное) и 1.0 (совсем не прозрачное):

Поэкспериментируйте, смешивая значения HSLA ниже: