Цвета CSS HSL
HSL означает оттенок, насыщенность и легкость.
Значение HSL
В CSS цвет можно указать с помощью оттенка, насыщенности и яркости (HSL) в форме:
hsl ( оттенок , насыщенность , яркость )
Оттенок — это степень на цветовом круге от 0 до 360. 0 — красный, 120 — зеленый, 240 — синий.
Насыщенность — это процентное значение, 0% означает оттенок серого, а 100% — полный цвет.
Яркость тоже в процентах, 0% — черный, 50% — ни светлый, ни темный, 100% — белый.
Поэкспериментируйте, смешав значения HSL ниже:
hsl(0, 100%, 50%)
оттенок
НАСЫЩЕННОСТЬ
ЛЕГКОСТЬ
Пример
Насыщенность
Насыщенность можно описать как интенсивность цвета.
100% чистый цвет, без оттенков серого
50% — это 50% серого, но вы все равно можете видеть цвет.
0% полностью серый, цвета уже не видно.
Пример
Легкость
Яркость цвета можно описать как количество света, которое вы хотите придать цвету, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни светлый), 100% означает полную яркость (белый).
Пример
Оттенки серого
Оттенки серого часто определяются путем установки оттенка и насыщенности на 0 и регулировки яркости от 0% до 100%, чтобы получить более темные/светлые оттенки:
Пример
Значение HSLA
Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность цвета.
Значение цвета HSLA указывается с помощью:
hsla( оттенок, насыщенность , яркость, альфа )
Альфа-параметр — это число от 0,0 (полностью прозрачный) до 1,0 (совсем непрозрачный):
Поэкспериментируйте, смешав значения HSLA ниже:
hsla (0, 100%, 50%, 0,5)
оттенок
НАСЫЩЕННОСТЬ
ЛЕГКОСТЬ
АЛЬФА