CSS HSL Цвета

HSL значение

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

hsl(hue, saturation, lightness)

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

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

Lightness (яркость) также выражается в процентах, 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 ниже: