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

Раньше, чтобы получить из фирменного цвета вариант для наведения, полупрозрачную подложку и светлый фон уведомления, дизайнер подбирал три отдельных значения, а верстальщик заводил три переменные. При смене фирменного цвета все производные приходилось пересчитывать вручную или через функции препроцессора вроде darken() в Sass. Относительные цвета переносят такие расчёты в сам браузер: производный цвет вычисляется от исходного в момент применения стилей, в том числе от значения из переменной.

Как устроен синтаксис

Внутри любой цветовой функции пишут from и исходный цвет. После этого имена каналов становятся числами, с которыми можно делать вычисления: в rgb() это r g b, в hsl() — h s l, в oklch() — l c h, а прозрачность доступна как alpha.

:root { --brand: #2563eb; }

.btn { background: var(--brand); }
.btn:hover {
  background: oklch(from var(--brand) calc(l - 0.08) c h);
}
.badge {
  background: rgb(from var(--brand) r g b / 12%);
  color: var(--brand);
}

При наведении кнопка становится темнее на 0,08 по светлоте, а плашка получает полупрозрачный фон того же тона. Если поменять --brand, все производные цвета изменятся сами. Удобнее всего работать в oklch(): шаг светлоты там воспринимается глазом примерно одинаково для любого тона, чего не скажешь о hsl().

Чем отличается от color-mix()

Функция color-mix() смешивает два цвета в заданной пропорции: «70% фирменного и 30% белого». Относительный синтаксис работает с каналами одного цвета и позволяет менять их по отдельности: только светлоту, только насыщенность, только прозрачность. Для простого осветления подходят оба способа, для точной настройки — относительные цвета. Вместе с пользовательскими свойствами CSS это даёт полноценную систему тем без препроцессора.

Поддержка и запасной вариант

Синтаксис поддерживается актуальными версиями основных браузеров, но появился сравнительно недавно. На старых устройствах объявление с from будет отброшено целиком, поэтому перед ним ставят обычный цвет: background: #1d4ed8; и следующей строкой — относительный. Браузер, который понимает новый синтаксис, применит последнее объявление, остальные останутся с запасным значением. Проверить поддержку можно в CSS через @supports (color: rgb(from red r g b)), а в скрипте — через CSS.supports() с тем же условием.