Что такое цвета HSL в CSS?

Question

Accepted Answer

## Базовая идея

**HSL** — Hue (оттенок 0–360), Saturation, Lightness. Удобно строить палитры: фиксируем H, меняем S/L.

```css
:root {
  --brand: hsl(173 80% 36%);
  --brand-soft: hsl(173 60% 92%);
}
.card {
  background: hsl(220 30% 20% / 0.9); /* с альфой */
}
```

Современный синтаксис без запятых; раньше был `hsla()`. Рядом есть `hwb()`, `oklch()` для перцептивно ровных шкал.

## Итог

HSL — человекочитаемая модель для темизации; для «равных шагов светлоты» всё чаще смотрят на OKLCH.