Какой цвет получится, если смешать два цвета? Простое руководство

Синий и жёлтый дают зелёный — это все помнят со школы. Но смешайте те же синий и жёлтый на экране компьютера, и может получиться тусклый серый. Красный и зелёный в коробке с красками дают коричневый, а на экране телевизора — яркий жёлтый. Так какой ответ правильный?

Оба, потому что краски и свет смешиваются противоположным образом. В этом руководстве объясняется разница, есть короткая таблица самых частых сочетаний и показано, как смешать цвета онлайн с точными кодами.

Смешать цветаСмешайте два цвета и получите промежуточные оттенки.

Два способа смешивать цвета

Краски, чернила, карандаши (субтрактивное смешение). Каждый пигмент поглощает часть падающего на него света. Смешанные пигменты поглощают ещё больше, поэтому результат темнеет. Традиционные основные цвета в живописи — красный, жёлтый и синий. В типографиях используют голубой, пурпурный и жёлтый, плюс чёрный.

Свет на экране (аддитивное смешение). Телефоны, мониторы и телевизоры собирают каждый цвет из крошечных красных, зелёных и синих огоньков. Чем больше света, тем светлее результат. Красный, зелёный и синий на полную мощность дают белый.

Поэтому одна и та же пара цветов может дать два разных ответа. Когда вы делаете сайт или приложение, вы работаете со светом. Когда красите стену или печатаете листовку — с пигментом.

Таблица смешивания красок

Цвета напротив друг друга на цветовом круге, например красный и зелёный или синий и оранжевый, гасят друг друга и превращаются в коричневый или серый. Художники пользуются этим нарочно: капля противоположного цвета успокаивает слишком яркий оттенок.

Таблица смешивания света (экран)

Как работает онлайн-смеситель цветов

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

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

Целая палитра из одного смешения

Когда нашли цвет, который нравится, эти инструменты помогут превратить его в полноценный набор:

• Светлые и тёмные оттенки: создайте варианты одного цвета для кнопок, фонов и состояний при наведении.

Генератор оттенковСоздавайте светлые и тёмные оттенки (50–900) любого цвета.

• Подходящие цвета: генератор палитр предложит дополнительные, аналоговые и триадные сочетания.

Генератор палитрСоздавайте гармоничные палитры по правилам теории цвета.

• Проверка читаемости: прежде чем ставить текст на новый цвет, проверьте контраст, чтобы текст читали все.

Проверка контраста цветовПроверьте контраст WCAG между текстом и фоном.

Частые вопросы

Какие два цвета дают фиолетовый? Красный и синий. Для холодного фиолетового добавьте больше синего, для тёплого — больше красного.

Какие цвета дают коричневый? Смешайте два противоположных цвета, например красный и зелёный или синий и оранжевый, или все три основных. Немного чёрного или белого сделает его темнее или светлее.

Почему синий и жёлтый на экране дают серый? На экране усредняется свет, а синий и жёлтый в свете противоположны, поэтому среднее близко к серому. Попробуйте режим «Линейный свет» или добавьте немного зелёного.

Как узнать HEX-код смешанного цвета? Смеситель показывает HEX-код результата, а конвертер цветов переведёт его в RGB или HSL.

Конвертер цветовКонвертируйте цвета между HEX, RGB, HSL, HSV и CMYK.

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