CSS Цвет HSL

Цвет HSL

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

hsl(hue, saturation, lightness)

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

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

Яркость - это также процент, 0% - черный, 50% - ни светлый, ни темный, 100% - белый

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

Saturation

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

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

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

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

Lightness

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

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

Цвет HSLA

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

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

hsla(hue, saturation, lightness, alpha)

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

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