Цвета HTML HSL и HSLA

HSL означает оттенок, насыщенность и легкость.

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

Цветовые значения HSL

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

hsl ( оттенок , насыщенность , яркость )

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

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

Яркость также является процентным значением, 0% соответствует черному цвету, а 100% — белому.

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

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

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

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

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

0% полностью серый, цвета уже не видно.

Легкость

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

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

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

Цветовые значения HSLA

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

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

hsla( оттенок, насыщенность , яркость, альфа )

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

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