Относительные цвета в CSS — Полное руководство с примерами

Введение

При разработке интерфейсных компонентов мы почти всегда работаем не с одним цветом, а с целым набором производных: цвет текста, фон, обводка, hover- и active-состояния. Чаще всего эти цвета логически связаны между собой, но в коде описываются как независимые значения.

Относительные цвета в CSS решают эту проблему. Они позволяют вычислять новые цвета на основе уже существующих, извлекая и изменяя отдельные компоненты цвета. Это особенно полезно при создании дизайн-систем и переиспользуемых компонентов.

Классический подход

Рассмотрим типичный пример кнопок с разными цветовыми вариантами.

<button class="btn btn-primary">Кнопка</button>
<button class="btn btn-secondary">Кнопка</button>

.btn {
    color: var(--btn-text-color);
    background-color: var(--btn-bg-color);
    border: 1px solid var(--btn-border-color);
}

.btn-primary {
    --btn-text-color: #fff;
    --btn-bg-color: #007bff;
    --btn-border-color: #007bff;
}

.btn-secondary {
    --btn-text-color: #fff;
    --btn-bg-color: #6c757d;
    --btn-border-color: #6c757d;
}

Даже в простом примере видно, что часть цветов фактически дублируется. При изменении базового цвета компонента нам приходится вручную править сразу несколько значений.

Что такое относительные цвета

Относительные цвета — это синтаксис цветовых функций CSS, позволяющий брать существующий цвет и использовать его компоненты (h, s, l, r, g, b, alpha и другие) для вычисления нового цвета.

Пример синтаксиса (HSL)

color: hsl(from <color> h s l / alpha);

• h — оттенок (hue)
• s — насыщенность (saturation)
• l — светлота (lightness)
• / alpha — прозрачность (alpha), опциональный параметр

Простейший пример:

color: hsl(from red h s l);

В этом случае результат будет полностью эквивалентен red.

Добавим прозрачность:

color: hsl(from red h s l / 0.5);

Теперь цвет остаётся красным, но становится полупрозрачным.

Изменение отдельных компонентов цвета

Главная сила относительных цветов — возможность заменять или вычислять отдельные компоненты.

Замена значений

color: hsl(from red h s 0);

Светлота установлена в 0, поэтому цвет станет чёрным.

Использование calc

color: hsl(from red h s calc(l * 0.5));

Мы берём исходную светлоту и уменьшаем её в два раза.

Перестановка компонентов

color: hsl(from red h l s);

Компоненты можно менять местами, что иногда позволяет получать нестандартные эффекты.

Работа с CSS-переменными

color: hsl(from var(--primary-color) h s calc(l * 0.5) / 0.5);

Пример с RGB

Относительные цвета работают не только с HSL, но и с другими моделями, например rgb().

color: rgb(from red r g b);
background-color: rgb(from red r g b / 0.5);

/* Инвертируем красный канал */
border-color: rgb(from red r g calc(255 - r) / 0.9);

Здесь мы напрямую работаем с каналами r, g и b, включая вычисления.

Практический пример: универсальная кнопка

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

<button class="btn btn-primary">Нажми!</button>
<button class="btn btn-secondary">Нажми!</button>
<button class="btn btn-tertiary">Нажми!</button>

/* Создадим три CSS-переменных для цветов */
:root {
    --green: #2A9D8F;
    --yellow: #E9C46A;
    --red: #E76F51;
}

.btn {
    padding: 24px;
    width: 300px;
    border-radius: 24px;
    font-size: 1.5rem;

    /* Базовый цвет кнопки */
    color: var(--btn-color);

    /* Фон: тот же оттенок, насыщенность 20%, светлота 90% */
    background-color: hsl(from var(--btn-color) h 20 90 / 0.9);

    /* Обводка: базовый цвет с прозрачностью */
    border: 5px solid hsl(from var(--btn-color) h s l / 0.5);
}

.btn:hover {
    /* Уменьшаем прозрачность цветов при наведении */
    color: rgb(from var(--btn-color) r g b / 0.7);
    background-color: hsl(from var(--btn-color) h 20 90 / 0.7);
    border: 5px solid hsl(from var(--btn-color) h s l / 0.7);
}

.btn-primary {
    --btn-color: var(--green);
}

.btn-secondary {
    --btn-color: var(--yellow);
}

.btn-tertiary {
    --btn-color: var(--red);
}

В результате мы получаем компонент, полностью описанный через один цветовой параметр. Для создания нового варианта кнопки достаточно изменить значение --btn-color.

Когда относительные цвета особенно полезны

• при создании дизайн-систем
• при работе с темами (light / dark)
• для генерации hover и active-состояний
• при построении переиспользуемых UI-компонентов

Поддержка

Относительные цвета уже имеют высокую поддержку браузеров (88%). Однако лучше их использовать в качестве улучшения, обязательно задавая fallback-значения на случай, если в браузере не поддерживаются относительные цвета.

Заключение

Относительные цвета в CSS позволяют описывать не конкретные значения, а логику работы цвета. Такой подход делает компоненты более гибкими, уменьшает дублирование и упрощает поддержку интерфейсов.

Если вы проектируете масштабируемые UI-компоненты или дизайн-системы, относительные цвета — мощный инструмент, который стоит добавить в свой арсенал.

Начните свой путь в мир веб-разработки с нашим курсом HTML и CSS. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир HTML и CSS прямо сегодня.