Миксер цветов — смешивание двух цветов

Смешайте два экранных цвета

Смешивание цветов полезно, когда нужно состояние hover между двумя токенами, середина градиента, переходный цвет для диаграммы или быстрая проверка того, как соотносятся два фирменных цвета. Этот миксер цветов объединяет два выбранных цвета, интерполируя их красный, зелёный и синий каналы. Переместите ползунок пропорции к цвету B, чтобы увеличить его долю, а затем скопируйте результат как HEX, RGB или HSL для CSS, документации или дизайн-токенов.

Смешивание RGB описывает, как экраны комбинируют свет. Это делает его идеальным для веб-разработки, но оно не то же самое, что смешивание красок или чернил: середина между синим и жёлтым на экране ведёт себя не так, как та же смесь физических пигментов. Тем не менее для дизайна интерфейсов смешивание RGB практично, ведь браузер в итоге отображает цвета как экранные значения. Предпросмотр обновляется мгновенно, поэтому вы можете оценить результат до копирования.

Использование пропорций в дизайне интерфейсов

Пропорция определяет баланс между двумя входными цветами. При 0 процентов результатом будет цвет A, при 100 процентах — цвет B. Значения около 10–25 процентов часто полезны для ненавязчивых состояний hover или тонированных поверхностей, так как исходный цвет остаётся доминирующим. Значения около 50 процентов лучше подходят для переходных палитр, середин градиентов и цветовых шкал диаграмм. Если результат выглядит блёклым, позже увеличьте насыщенность в HSL или выберите исходные цвета с большей разницей.

Копирование надёжных токенов цвета

Найдя подходящую смесь, скопируйте формат, который лучше всего подходит вашему рабочему процессу. HEX компактен для передачи дизайна, RGB удобен, когда нужны значения каналов или наложения с альфой, а HSL проще корректировать по оттенку, насыщенности или светлоте после смешивания. Поскольку инструмент работает локально, вы можете безопасно экспериментировать с неопубликованными фирменными палитрами или цветами клиентов. Всегда проверяйте итоговый цвет в контексте, особенно если он будет использоваться под текстом или рядом с важными цветами статуса.