Цвета HTML HSL и HSL расшифровываются как оттенок, насыщенность и яркость.
Цветовые значения HSLA являются расширением HSL с альфа-каналом (непрозрачность).
Цветовые значения HSL
В HTML цвет можно указать с помощью оттенка, насыщенности и яркости (HSL) в форме:
HSL (hue, saturation, lightness) оттенок, насыщенность, яркость
Оттенок (hue) — это степень на цветовом круге от 0 до 360. 0 — красный, 120 — зеленый, 240 — синий.
Насыщенность (saturation) — это процентное значение. 0% означает оттенок серого, а 100% — полный цвет.
Яркость (lightness) также является процентным значением. 0% — черный, 100% — белый.
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</div>
<div style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</div>
<div style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</div>
<div style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</div>
<div style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</div>
Насыщенность (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%)
★ Примечание: с цветами HSL меньшая насыщенность означает меньше цвета. 0% полностью серый.
<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</div>
<div style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</div>
<div style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</div>
<div style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</div>
<div style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</div>
Яркость (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%)
★ Примечание: для цветов HSL яркость 0 % означает черный цвет, а яркость 100 – белый цвет.
<div style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</div>
<div style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</div>
<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</div>
<div style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</div>
<div style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</div>
Оттенки серого
Оттенки серого часто определяются путем установки оттенка и насыщенности на 0 и регулировки яркости от 0% до 100%, чтобы получить более темные или светлые оттенки:
hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)
<div style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</div>
<div style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</div>
<div style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</div>
<div style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</div>
<div style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</div>
<div style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</div>
Цветовые значения HSLA
Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность цвета.
Значение цвета HSLA указывается с помощью:
HSLA (hue, saturation, lightness, alpha) оттенок, насыщенность, яркость, альфа
Альфа-параметр — это число от 0,0 (полностью прозрачный) до 1,0 (совсем непрозрачный):
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)
<div style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</div>
<div style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</div>
☛ Стили HTML CSS
Цвета HTML HEX ☚
