Смешиватель цветов онлайн
Выберите два цвета и пропорцию — инструмент покажет результат смешивания и его коды.
Результат
Всё считается в вашем браузере: введённые данные никуда не отправляются.
Как смешать два цвета
- Выберите первый цвет в палитре или введите его HEX-код.
- Так же выберите второй цвет.
- Ползунком задайте пропорцию: по центру — поровну, ближе к краю — больше одного из цветов.
- Нажмите на код результата, чтобы скопировать его.
Как считается результат
Инструмент берёт значения красного, зелёного и синего каналов обоих цветов и находит их взвешенное среднее с учётом пропорции. Например, при смешивании поровну #FF0000 и #0000FF получится #800080 — фиолетовый. Это соответствует тому, как браузер смешивает цвета при прозрачности и в функции CSS color-mix(in srgb, …).
Экран и краски смешиваются по-разному
На экране цвета получаются сложением света: красный и зелёный дают жёлтый, а все три канала на максимуме — белый. Краски, наоборот, поглощают свет: чем больше пигментов, тем темнее смесь, а синий с жёлтым дают зелёный. Поэтому результат смешивания экранных цветов не совпадёт со смешиванием гуаши — инструмент работает с цифровыми цветами для интерфейсов и веб-дизайна.
Где пригодится
- подобрать промежуточный оттенок для градиента или состояния кнопки при наведении;
- получить цвет фона с лёгким оттенком основного цвета бренда;
- проверить, во что сливаются два цвета при наложении полупрозрачного слоя.
Частые вопросы
Почему смесь красного и зелёного получается коричневато-серой, а не жёлтой?
Усреднение каналов даёт оттенок средней яркости. Жёлтый получается при сложении света на полной яркости, а не при смешивании пополам.
Как получить тот же результат в CSS?
Используйте color-mix(in srgb, #ff6a5b 50%, #1fc1b6). Процент задаёт долю первого цвета.
Можно ли ввести цвет в формате RGB?
Поле принимает HEX — три или шесть символов. Результат показывается в HEX, RGB и HSL.