color-mix() широко доступна

07.03.2026 • css

Вступление

На днях с удивлением обнаружил, что color-mix() уже Baseline Widely Available.

111

113

16.2

В трёх браузерах эта CSS функция есть с мая 2023го года. Итого уже 2 года и около 9 месяцев (на момент написания статьи, на момент чтения может быть уже больше). А казалось, появление было совсем недавно)

По caniuse поддержка есть уже в 90% браузеров. Конечно, в первую очередь стоит ориентироваться на аудиторию вашего сайта.

В связи с этим давайте вспомним, что это такое и где можно применить.

Базовое описание

color-mix() позволяет смешать два цвета в какой-то пропорции. В самом простом виде получится что-то такое:

.block {
    background: color-mix(in srgb, #4eb0da, #fff);
}

(пример кликабельный)

Можно также задать степень смешения цветов:

.block {
    background: color-mix(in srgb, #4eb0da 90%, #fff 10%);
}

Разбираемся в деталях

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

Проценты смешения цветов

Как было видеть в начале, проценты опциональны. Что будет, если проценты в сумме не равны 100? Браузеры нормализуют значение. Например, если сумма равна 50, то значение будут увеличены в 2 раза:

.block {
    background: color-mix(in srgb, #4eb0da 25%, #fff 25%);
}

Также можно опустить одно процентное значение, в этом случае оно будет вычислено автоматически из второго: P2 = 100 - P1.

Способ смешения цветов

Конечно, первое, на что обращаешь внимание при первом знакомстве с этой функцией, это способ смешения цветов (в примерах выше srgb). Всего значений на текущий момент 15, и 11 относят к “прямоугольному” цветовому пространству, а 4 – к “полярному”:

Прямоугольное: srgb srgb-linear display-p3 a98-rgb prophoto-rgb rec2020 lab oklab xyz xyz-d50 xyz-d65

Полярное: hsl hwb lch oklch

Способ смешения цветов проще всего понять через линейные градиенты. В функции linear-gradient() (и не только в ней) тоже можно задать способ смешения цветов:

oklab

oklch

srgb

Тем самым, color-mix() позволяет получить “точку” из этого градиента.

Есть следующие рекомендации по выбору способа:

oklab. Используем, если важно получить равномерное распределение от одного цвета к другому.
oklch. Полезно при получении максимально ярких оттенков.
srgb. Если прям нужно повторить поведение srgb.

Есть и другие кейсы (не зря ведь придумали столько значений), но они будут использоваться, скорее всего, заметно реже.

Метод интерполяции

Для 4х “полярных” (hsl hwb lch oklch) способов смешения цвета можно задать метод интерполяции (hue interpolation method). Для простоты можно посмотреть на два градиента:

shorter hue

longer hue

Всего значений 4: shorter hue (по умолчанию), longer hue, increasing hue и decreasing hue.

Применение

Функция color-mix() сильно напоминает мне времена активного использования SASS/Stylus/Less. Тогда считалось нормальным каким-то способом смешать цвета, получить нужную палитру и спокойно всё это использовать в стилях. Сейчас такого (как будто) стало сильно меньше. Возможно, широкая доступность color-mix() повернёт время вспять и мы вновь окажемся во времени, когда смешение цветов активно используется для задания палитры?

:root {
    --accent: #4eb0da;
    --bg-primary: color-mix(in oklch, var(--accent), #fff 10%);
    --bg-secondary: color-mix(in oklch, var(--accent), #fff 20%);
    ...
}

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

Итого

Статус Baseline Widely Available для color-mix() стал для меня неожиданностью. “Как, уже?“. Да, уже. Похоже, время снова призадуматься о вычислении палитр, и на этот раз уже в CSS. А если вы считаете, что поддержка слишком слабая для такой важной штуки, как базовые цвета, то можно задуматься о вычислении в момент сборки – подойдёт не для всех случаев, но как фундамент для новых проектов – вполне.

Обсудить в Telegram