CodeKitHubЧто это за инструмент?
Смеситель цветов линейно интерполирует значения красного, зелёного и синего каналов двух цветов в заданной пропорции — та же математика, что и внутри градиента. При 0% результат равен Цвету A, при 100% — Цвету B, а при 50% каждый RGB-канал получает арифметическое среднее.
Это отличается от смешивания реальной краски (которое субтрактивно и зависит от пигмента), и это не то же самое, что усреднение в пространстве HSL — именно линейная интерполяция в RGB используется в CSS-градиентах, дизайн-инструментах и большинстве утилит «цвет между двумя цветами», поэтому результат совпадает с тем, что вы увидите в градиенте браузера между теми же двумя цветами.
Зачем его использовать?
- Найдите естественно выглядящий цвет наведения или активного состояния, который находится между базовым цветом и акцентом — вместо того чтобы угадывать случайную корректировку.
- Смотрите точный HEX-код при любой пропорции, а не оценивайте на глаз скриншот градиента.
- 11-шаговая шкала одним кликом создаёт полную палитру от одного цвета к другому — полезно для визуализации данных или многоточечного градиента.
- Кликните по любому шагу, чтобы мгновенно скопировать его HEX-код.
- Бесплатно, мгновенно и полностью локально — без загрузки файлов, без регистрации.
Как использовать
- Выберите Цвет A и Цвет B с помощью палитры или введя HEX-код.
- Перетащите ползунок пропорции, чтобы задать, сколько добавить Цвета B.
- Прочитайте итоговые значения HEX и RGB над образцом.
- Кликните по любому образцу в 11-шаговой шкале ниже, чтобы скопировать его HEX-код.
Пример
Ввод
Цвет A #3B82F6 (синий), Цвет B #F59E0B (янтарный), пропорция 50%Результат
#9B9E7D — rgb(155, 158, 125)Ровно при 50% каждый RGB-канал представляет собой арифметическое среднее соответствующих каналов двух исходных цветов.
Часто задаваемые вопросы
Почему это не совпадает с тем, что получится при смешивании настоящей краски?
Смешивание красок субтрактивно (пигменты поглощают свет) и зависит от конкретных используемых пигментов — например, синяя и жёлтая краска дают зелёный. Этот инструмент смешивает свет (RGB-каналы) аддитивно/линейно — именно так экраны, CSS-градиенты и большинство инструментов цифрового дизайна комбинируют цвета. Эти две системы намеренно дают разные результаты, а не по ошибке.
Это то же самое, что CSS linear-gradient между двумя цветами?
Да — CSS linear-gradient(цветA, цветB) интерполирует RGB-каналы точно так же, как этот инструмент, поэтому цвет, который вы увидите в середине такого градиента, совпадёт с результатом при 50% здесь.
Почему смешанный цвет иногда выглядит мутным или серым?
Смешивание двух насыщенных, но очень разных по оттенку цветов (например, синего и оранжевого, которые почти дополнительные) в пространстве RGB часто даёт малонасыщенную, серовато-коричневую середину — это реальное свойство RGB-интерполяции, а не ошибка. Если нужна более яркая смесь, попробуйте цвета, расположенные ближе друг к другу на цветовом круге, или смешивайте в пространстве HSL, меняя оттенок и сохраняя высокую насыщенность (этот простой RGB-смеситель так не делает).
Можно ли смешать больше двух цветов за раз?
Не за один шаг — инструмент смешивает ровно два цвета. Чтобы объединить три, смешайте первые два в нужной пропорции, скопируйте результат и вставьте его как новый Цвет A против третьего цвета. Пошаговый подход также даёт контроль над весом каждого цвета, чего не даст прямое усреднение сразу трёх.
Что использовать — этот инструмент или Генератор оттенков цвета?
Если нужен цвет, находящийся между двумя разными цветами — например, переходный оттенок между фирменным синим и акцентным янтарным — используйте этот смеситель. Если нужны более светлые и более тёмные варианты одного цвета (состояния наведения, фоны, шкала в стиле Tailwind 50-900), используйте вместо этого Генератор оттенков цвета: он сохраняет оттенок и насыщенность неизменными и меняет только светлоту, поэтому все результаты остаются явно в одной цветовой семье.
Какие форматы цвета можно вводить в текстовые поля?
Текстовые поля принимают 6-значные HEX-коды, с символом # или без него (например, 3B82F6 или #3B82F6). Сокращённый 3-значный HEX, запись rgb() и названия цветов CSS здесь не распознаются — но вы можете визуально выбрать любой цвет с помощью встроенной палитры рядом с каждым полем, и поле HEX обновится автоматически.