CSS Цвет HSL и HSLA
Цвет HSL в CSS
В CSS цвет может быть задан с помощью оттенка, насыщенности и яркости (HSL) в форме:
hsl(hue, saturation, lightness)
Оттенок - это градус на цветовом круге от 0 до 360. 0 - красный, 120 - зеленый и 240 - синий.
Насыщенность - это процентное значение, 0% означает оттенок серого, а 100% - полный цвет.
Яркость - это также процент, 0% - черный, 50% - ни светлый, ни темный, 100% - белый
Поэкспериментируйте, смешивая значения HSL ниже:
HUE
SATURATION
LIGHTNESS
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Попробуйте сами »
Saturation
Насыщенность можно описать как интенсивность цвета.
100% - это чистый цвет, никаких оттенков серого
50% - зто 50% серого, но вы все равно можете видеть цвет.
0% - полностью серый, вы больше не можете видеть цвет.
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Попробуйте сами »
Lightness
Яркость цвета можно описать как количество света, которое вы хотите дать цвету, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни светлый), 100% означает полную яркость (белый).
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Попробуйте сами »
Оттенки серого часто определяются путем установки оттенка и насыщенности на 0, а также регулировки яркости от 0% до 100%, чтобы получить более темные/светлые оттенки:
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
Попробуйте сами »
Цвет HSLA в CSS
Значения цвета HSLA являются расширением значений цвета HSL с альфа - каналом, который определяет непрозрачность для цвета и задается с помощью:
hsla(hue, saturation, lightness, alpha)
Альфа параметр - это число между 0.0 (полностью прозрачное) и 1.0 (совсем не прозрачное):
Поэкспериментируйте, смешивая значения HSLA ниже:
HUE
SATURATION
LIGHTNESS
ALPHA
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
Попробуйте сами »