Опубликовано: 7 июля 2015Обновлено: 21 января 20220 комментариев
Функция hsl() используется для задания цветов в формате HSL. Функция принимает три значения, разделенных между собой запятой: тон (Hue), насыщенность (Saturation) и яркость (Lightness).
background: hsl(65, 10%, 50%);
background: hsl(320, 65%, 70%);
Тон
Тон или цвет, представляет собой угол (задается в градусах без указания единицы измерения), в диапазоне от 0° или 360° цветового круга относительно красного цвета. Красный цвет имеет угол 0° или 360°. Зеленый — 120°. Синий — 240°. Отрицательные значения допускаются, например 300° можно записать как -60°.
Рис. 1. Цветовой круг HSL от Erin Sowards
Насыщенность
Насыщенность задается в процентах. 100% означает полную насыщенность, а 0% дает оттенок серого.
Яркость
Яркость, или светлота, также задается в процентах. 100% светлоты дает белый цвет, 0% — черный цвет.
Таблицы HSL-цветов
Изменяя значения насыщенности и яркости, можно получить соседние оттенки для того или иного цвета. Чтобы лучше понять, как работают эти два параметра, посмотрите таблицы ниже.
