Справочник HTML & CSS

hsl()

Цвет по тону, насыщенности и светлоте.

Синтаксис

hsl(hue saturation lightness / alpha)

Параметры

Параметр	Тип	Описание
hue	angle	Положение на цветовом круге от 0 до 360: 0 — красный, 120 — зелёный, 240 — синий.
saturation	percentage	От `0%` (серый) до `100%` (яркий).
lightness	percentage	От `0%` (чёрный) до `100%` (белый).
alpha	0–1	После косой черты: непрозрачность.

Примеры

Оттенки одного тона — меняется только светлота:

<style>
  div { padding: 8px; color: white; }
</style>
 
<div style="background: hsl(210 80% 30%);">hsl(210 80% 30%)</div>
<div style="background: hsl(210 80% 50%);">hsl(210 80% 50%)</div>
<div style="background: hsl(210 80% 70%);">hsl(210 80% 70%)</div>

Примечания

HSL легко читать и править вручную. Недостаток: цвета с одинаковой светлотой выглядят неодинаково яркими (жёлтый кажется светлее синего). Это исправляет oklch().

См. также

rgb() — Цвет из красной, зелёной и синей составляющих, по желанию с прозрачностью.
oklch() — Цвет в пространстве OKLCH: воспринимаемая светлота, насыщенность и тон.
color — Цвет текста (а также цвет рамок и SVG-значков по умолчанию).

В учебнике

Цвета — Цвет текста и фона, способы записи цвета в CSS — названия, hex, rgb() и hsl() — и прозрачность.

Спасибо, что читаете!