Смешиватель цветов онлайн

Как смешать два цвета

1. Выберите первый цвет в палитре или впишите его HEX-код.
2. Выберите второй цвет тем же способом.
3. Результат появится сразу. Нажмите на него, чтобы скопировать код.

Как считается результат

Инструмент берёт среднее значение по каждому каналу RGB: складывает красный первого цвета с красным второго и делит пополам, затем то же с зелёным и синим. Пропорция всегда равная, 50 на 50.

Поэтому результат предсказуем: смешение белого с чёрным даёт ровно средний серый #808080, а не тёмно-серый или светло-серый.

Цвета на экране и краски смешиваются по-разному

Это главная причина, по которой результат может удивить.

Экран светится. Красный, зелёный и синий здесь складываются: чем больше цветов, тем светлее результат, а все три вместе дают белый. Это аддитивная модель, по ней и работает инструмент.

Краска отражает. Пигмент, наоборот, поглощает часть света: чем больше красок смешать, тем темнее и грязнее выйдет, а всё вместе даёт бурый. Это субтрактивная модель.

Отсюда классическое расхождение: синий и жёлтый на палитре художника дают зелёный, а на экране — серый #808080. Обе величины верны, просто это разная физика.

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

Что получится, если смешать

Где пригодится

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

Вопросы

Можно ли задать пропорцию, например 30 на 70?

Нет, смешивание идёт поровну. Чтобы сместить результат в сторону одного из цветов, смешайте полученный оттенок с ним ещё раз: так вы получите соотношение 75 на 25.

Какие форматы поддерживаются?

HEX вида #RRGGBB. Результат тоже выдаётся в HEX, его понимают CSS, Figma, Photoshop и все редакторы.

Почему синий с жёлтым дали серый, а не зелёный?

Потому что экран смешивает свет, а не краску. Подробности в разделе выше.

Подойдёт ли для подбора краски и колеровки?

Только как грубый ориентир. Пигменты смешиваются по другой модели, точный колер подбирают по вееру производителя.

Как получить оттенок светлее или темнее?

Смешайте цвет с белым, чтобы осветлить, или с чёрным, чтобы затемнить. Повторите несколько раз, если нужен более сильный сдвиг.