Смешивание цветов
Выберите два цвета и двигайте ползунок между ними. Смесь считается двумя способами: для каждого показаны HEX-код и строка color-mix() для CSS.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Введите цвет A и цвет B или выберите их палитрами.
- Ползунком задайте, сколько цвета B войдёт в смесь.
- Скопируйте HEX-код или строку CSS
color-mix() нужного варианта.
Как это работает
sRGB: каждое из значений красного, зелёного и синего движется по прямой от A к B. OKLab: оба цвета переводятся в OKLab (светлота плюс две цветовые оси, Бьорн Оттоссон, 2020), каждое из трёх чисел движется по прямой, и результат переводится обратно в sRGB. Каналы округляются до целых значений 0–255.
Пример
По умолчанию стоят красный #ff0000 и синий #0000ff при 50 %. В sRGB получается #800080 — тёмно-фиолетовый, в OKLab — более светлый #8c53a2. Строка CSS для первого варианта: color-mix(in srgb, #ff0000 50%, #0000ff 50%).
Советы
- Дополнительные цвета в sRGB часто дают тусклый серо-коричневый; OKLab сохраняет больше цвета.
- Для ряда ступеней двигайте ползунок равными шагами или возьмите генератор оттенков — для смеси с белым и чёрным.
Частые вопросы
Почему два результата различаются?
Значения sRGB закодированы с гаммой, поэтому их среднее не делит пополам видимую яркость и насыщенность. OKLab устроен так, чтобы равные шаги выглядели для человека ровнее. Чёрный и белый пополам в sRGB дают #808080, а в OKLab — более тёмный #636363.
Какой вариант выбрать?
OKLab — когда результат должен выглядеть плавно: градиенты, состояния при наведении, сгенерированные темы. sRGB — когда нужно совпасть с тем, что дают старые программы или обычные CSS-градиенты.
Что означает ползунок?
Это доля цвета B в смеси. При 0 % получается цвет A, при 100 % — цвет B, при 50 % — смесь поровну.
Можно сразу вставить строку CSS?
Да. Функция color-mix() с in srgb или in oklab поддерживается актуальными версиями Chrome, Edge, Firefox и Safari. HEX-код — запасной вариант для старых браузеров.