CSS hsla() — колір за тоном, насиченістю і прозорістю

CSS функція hsla() задає колір через тон (0–360°), насиченість, світлість і прозорість.

правити

Загальний опис

HSL зручніший за HEX там, де кольори треба виводити один з одного. Щоб зробити відтінок світлішим, достатньо змінити третє число — а в HEX довелось би перераховувати всі три канали.

Саме тому на HSL будують колірні системи: беруть один тон і породжують від нього всю палітру, змінюючи лише світлість.

правити

Порада

Тримай тон бренду в змінній, а відтінки роби зміною світлості: hsl(var(--hue) 70% 40%) і hsl(var(--hue) 70% 90%).

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

hsla(hue, saturation, lightness, alpha)

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
hsla	1+	3+	3.1+	10+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
hsla	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<div class="dark">Темний</div>
<div class="light">Світлий</div>

:root {
    --hue: 200;
}

.dark {
    background: hsla(var(--hue), 70%, 40%, 1);
    color: #fff;
}

.light {
    background: hsla(var(--hue), 70%, 90%, 1);
}