Функция hsl()

Функция hsl() используется для задания цветов в формате HSL. Функция принимает три значения, разделенных между собой запятой: тон (Hue), насыщенность (Saturation) и яркость (Lightness).

background: hsl(65, 10%, 50%);
background: hsl(320, 65%, 70%);

Тон

Тон или цвет, представляет собой угол (задается в градусах без указания единицы измерения), в диапазоне от 0° или 360° цветового круга относительно красного цвета. Красный цвет имеет угол 0° или 360°. Зеленый — 120°. Синий — 240°. Отрицательные значения допускаются, например 300° можно записать как -60°.

hsl-colors
Рис. 1. Цветовой круг HSL от Erin Sowards

Насыщенность

Насыщенность задается в процентах. 100% означает полную насыщенность, а 0% дает оттенок серого.

Яркость

Яркость, или светлота, также задается в процентах. 100% светлоты дает белый цвет, 0% — черный цвет.

Таблицы HSL-цветов

Изменяя значения насыщенности и яркости, можно получить соседние оттенки для того или иного цвета. Чтобы лучше понять, как работают эти два параметра, посмотрите таблицы ниже.

0° красный
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
30° оранжевый
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
60° желтый
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
90° желто-зеленый
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
120° зеленый
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
150° зелено-голубой
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
180° голубой
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
210° сине-голубой
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
240° синий
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
270° пурпурно-синий
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
300° пурпурный
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
330° пурпурно-красный
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%