Смешивание цветов
Смешайте два цвета в любой пропорции в OKLab, OKLCH или sRGB. Скопируйте результат или готовое выражение color-mix().
- HEX
- RGB
- OKLCH
CSS с запасным вариантом
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);Шаги от первого цвета ко второму
Та же смесь во всех пространствах
В sRGB середина сереет и темнеет. OKLab держит яркость ровной. OKLCH и HSL сохраняют насыщенность, но проходят по кругу оттенков.
Вопросы и ответы
Что такое color-mix() в CSS?
color-mix() это функция CSS, которая смешивает два цвета в выбранном пространстве, например color-mix(in oklab, #ff5733, #3b82f6 30%). Она работает во всех актуальных браузерах. Для старых оставьте перед ней обычный цвет как запасной вариант, как в сниппете выше.
В каком пространстве лучше смешивать?
OKLab самый надёжный вариант по умолчанию: середина сохраняет яркость и не становится грязной. OKLCH держит цвета насыщенными, но идёт по кратчайшему пути по кругу оттенков, поэтому красный и синий проходят через фиолетовый и розовый. sRGB это смешивание старых инструментов, и середина часто выходит серой и тёмной.
Почему смешивание света отличается от смешивания красок?
Экран складывает свет, поэтому инструмент усредняет световые значения: синий и жёлтый дают серый или бледный цвет, а не зелёный. Краски вычитают свет, поэтому та же смесь на бумаге выглядит зелёной. Чтобы предсказать смешивание красок, нужна модель красок, а не экранное цветовое пространство.