Справочник HTML & CSS

color-mix()

Смешивает два цвета в заданной пропорции.

Синтаксис

color-mix(in space, color1 p%, color2)

Параметры

Параметр	Тип	Описание
in space	color space	Цветовое пространство для смешивания: `in oklch`, `in srgb`.
color p%	color	Цвета с необязательными процентами; по умолчанию по 50%.

Примеры

Затемнение при наведении и светлый оттенок из одного фирменного цвета:

<style>
  :root { --brand: royalblue; }
  .btn { padding: 8px 16px; border: 0; color: white; background: var(--brand); }
  .btn:hover { background: color-mix(in oklch, var(--brand), black 25%); }
  .soft { background: color-mix(in oklch, var(--brand) 20%, white); color: black; }
</style>
 
<button class="btn">Hover — darker</button>
<button class="btn soft">A light tint</button>

Примечания

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

См. также

oklch() — Цвет в пространстве OKLCH: воспринимаемая светлота, насыщенность и тон.
var() — Подставляет значение пользовательского свойства (переменной CSS).
color — Цвет текста (а также цвет рамок и SVG-значков по умолчанию).

Вопросы и ответы по теме

Как использовать CSS-переменные для цветов

В учебнике

Современные цвета — Функция oklch() и почему с ней удобно строить палитры, смешивание цветов color-mix() и относительный синтаксис oklch(from ...).

Спасибо, что читаете!