Смешивание цветов с помощью функции color-mix()

color-mix(): прощайте, костыли и сотни переменных для ховеров

Признавайся, сколько раз ты проклинал макеты, где для одного основного цвета дизайнер рисовал пять оттенков для ховеров, активных состояний и полупрозрачных подложек? Раньше это превращалось в бесконечный список переменных типа --primary-light, --primary-dark и --primary-opacity-10. А если проект на чистом CSS без препроцессоров, то любая правка превращалась в увлекательный квест «Найди и замени».

Функция color-mix() — это тот самый глоток свежего воздуха, который позволяет нам перестать быть калькуляторами и начать быть разработчиками. Мы наконец-то можем смешивать цвета прямо в браузере на лету, сохраняя при этом реактивность и чистоту кода.

Как мы страдали раньше

До появления этой фичи у нас было два пути, и оба вели в никуда. Первый — Sass с его darken() и lighten(). Круто, удобно, но работает только на этапе компиляции. Если твой пользователь сменил тему в рантайме или цвет прилетел из админки — Sass бессилен.

Второй путь — хаки с rgba(). Чтобы сделать цвет прозрачнее, нам приходилось хранить его в переменных в виде «голых» чисел: --brand-rgb: 255, 0, 0;. А потом использовать это чудо как rgba(var(--brand-rgb), 0.5). Выглядит ужасно, читать неудобно, а про смену оттенка (например, добавить каплю синего в серый) вообще можно забыть. Кстати, если ты до сих пор мучаешься с прозрачностью для интерфейсов, посмотри статью про эффект матового стекла (Glassmorphism) — там эти приемы разбираются подробно, но color-mix() делает жизнь еще проще.

Как делать правильно в 2026 году

Сегодня color-mix() поддерживается всеми современными браузерами, и это база для любого дизайн-системаря. Суть проста: ты указываешь цветовое пространство (чаще всего srgb или более продвинутое oklab), берешь первый цвет, добавляешь второй и говоришь, в какой пропорции их смешать.

Самое крутое, что это работает с CSS-переменными. Хочешь сделать кнопку чуть темнее при наведении? Просто подмешай к базовому цвету немного черного. Нужна полупрозрачная подложка? Смешай основной цвет с прозрачным (transparent). Это особенно полезно, когда ты используешь современную стилизацию форм, где состояния фокуса и ошибки должны четко считываться.

Готовый сниппет кода

Вот пример того, как элегантно создать палитру состояний для кнопки, используя всего одну базовую переменную. Никакого лишнего мусора в CSS-файле.

:root {
  --primary-color: #3b82f6;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s;
}

/* Делаем цвет на 15% темнее для ховера */
.button:hover {
  background-color: color-mix(in srgb, var(--primary-color), black 15%);
}

/* Делаем цвет на 25% светлее для активного состояния */
.button:active {
  background-color: color-mix(in srgb, var(--primary-color), white 25%);
}

/* Создаем нежную подложку, подмешивая 90% белого */
.button-secondary {
  background-color: color-mix(in srgb, var(--primary-color), white 90%);
  color: var(--primary-color);
}

Частая ошибка новичков

Самый частый затык — это непонимание того, как работают проценты. Если ты пишешь color-mix(in srgb, blue, red 20%), это значит, что в смеси будет 20% красного и, соответственно, 80% синего. Если проценты не указывать вовсе, браузер бахнет 50 на 50.

Вторая ловушка — выбор цветового пространства. Большинство по привычке пишет in srgb, и это ок для простых задач. Но если ты хочешь получить «чистое» смешивание без грязных серых оттенков (особенно при переходе от синего к желтому), попробуй in oklab. Это пространство гораздо лучше имитирует то, как человеческий глаз воспринимает яркость и цвет. Попробуй оба варианта в DevTools, и ты увидишь разницу в сочности и чистоте результата.

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!