Выбор цветов в CSS через hsl() и hsla()

CSS-функции hsl() и hsla() позволяют задавать цвета на основе восприятия человеком, а не машинной модели RGB. Это делает работу с цветами более гибкой и наглядной, особенно при создании адаптивных интерфейсов, тёмных тем или анимаций.

Что такое HSL

HSL расшифровывается как Hue (оттенок), Saturation (насыщенность) и Lightness (светлота).

Пример:

color: hsl(120, 100%, 50%);

Этот цвет обозначает:

• 120° — зелёный оттенок на цветовом круге;
• 100% — максимальная насыщенность (яркий зелёный);
• 50% — средняя светлота (не тёмный и не бледный).

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

Прозрачность с hsla()

hsla() работает так же, как hsl(), но добавляет четвёртый параметр — прозрачность (alpha), от 0 (полностью прозрачный) до 1 (полностью непрозрачный):

background-color: hsla(240, 80%, 60%, 0.5);

Это создаёт полупрозрачный синий фон — оттенок 240°, высокая насыщенность и светлота, прозрачность 50%.

Почему HSL удобнее, чем RGB

Цвета в rgb() задаются через красный, зелёный и синий каналы:

color: rgb(0, 255, 0); /* чисто зелёный */

Но если вы хотите, например, осветлить этот цвет или изменить насыщенность — с RGB это делать сложно.

В hsl() всё проще:

color: hsl(120, 100%, 70%); /* тот же зелёный, но светлее */

Вы меняете только третий параметр — и управляете яркостью без догадок.

Примеры в интерфейсе

1. Создание градиента:

background: linear-gradient(
  to right,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%)
);

Цвет плавно переходит от красного к жёлтому и к зелёному — удобно для визуальных схем, фильтров и интерфейсных линеек.

2. Цвет по переменной:

:root {
  --hue: 200;
}
.button {
  background-color: hsl(var(--hue), 80%, 50%);
}

Так можно динамически изменять цвет кнопок, просто меняя --hue через JavaScript или медиазапросы.

3. Полупрозрачная подсветка:

.highlight {
  background-color: hsla(60, 100%, 80%, 0.3);
}

Используется для подсветки текста, не перекрывая его.

Советы по использованию

• HSL особенно удобен, когда нужно генерировать цвета программно — например, циклом менять угол оттенка.
• Если нужен адаптивный дизайн с тёмной темой — управление светлотой (lightness) делает это проще.
• Прозрачность (alpha) в hsla() важна при наложении цветов на фоны, изображения и эффекты.
• Цветовой круг HSL — это наглядный инструмент, его можно использовать прямо в редакторах кода и графики.

Поддержка

Функции hsl() и hsla() поддерживаются всеми современными браузерами, включая мобильные. Это надёжная альтернатива rgb() и rgba() с более понятным управлением.

Заключение

hsl() и hsla() — мощные инструменты для работы с цветом. Они позволяют мыслить не как машина (в числах RGB), а как дизайнер: оттенок, насыщенность, светлота и прозрачность. Это делает ваш CSS гибким, читаемым и более выразительным.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.