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

Подбирать цвета убийственно сложно: все эти RGB, CMY, RYB, HSV больше мешают, чем помогают. Разобрались, как удачно подобрать цвета для проекта и сэкономить на дизайнере.

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

Цвет подробно изучали двое ученых — Ньютон и Гете. Все современные модели работы с цветом основываются на их открытиях.

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

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

Спустя 150 Гете в «Теории цвета» анализирует цвет с точки зрения восприятия человека. Гете создает цветовой круг, который впоследствии улучшает художник Иоханнес Иттен:

Существует 5 популярных цветовых моделей: RYB, RGB, CMY (иногда указывается как CMYK), HSL (она же HSV) и LAB. LAB и HSV мы не будем рассматривать, потому что они не помогут научиться подбирать цвета. Остановимся на анализе RYB, RGB и CMY.

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

CMY — противоположная RGB модель. Она субтрактивна: цвета не излучаются от источника, а отражаются от носителя, например, бумаги. Поскольку цвета не складываются, а вычитаются из белого света, в CMY удобнее считать какое количество света отразилось, а не поглотилось. Если вычесть из белого три первичных цвета (RGB), мы получим тройку дополнительных цветов CMY. CMY используется при печати.

RYB — классическая цветоваяцветова, начало которой положил Гете, а улучшил Иттен. Эта модель популярна у художников, потому что объясняет правила смешивания пигментов цветов. Хотя RYB не используется в электронике и печати, она содержит ряд важных наблюдений: на ее основе разработаны RGB и CMY, и по ее примеру комбинируются цвета внутри этих моделей.

Иттен полагал, что можно найти цветовую гармонию через цветовое колесо:

В книге «Искусство цвета» он приводит несколько схем, которые помогают подобрать гармонирующие цвета. Цвета в цветовом круге расположены так, чтобы дополнительные цвета всегда давали темно-серый цвет: Иттен полагал, что темно-серый — самый гармоничный для глаза цвет.

Разберём несколько характеристик цвета: они помогут вамвам пон, как применять и комбинировать цвета в работе.

Тон — это чистый цвет: зеленый, синий, красный и так далее.

Оттенок — это добавление к чистому цвету белого цвета:

Тень — это добавление к чистому цвету черного цвета:

Первичные цвета — это основные цвета, из которых получаются остальные цвета. Вторичные цвета — это цвета, которые получаются при смешивании основных цветов. Из смеси вторичных цветов с первичными получаются третичные цвета.

Аналоговые и дополнительные цвета, Триада, Тетрада и Квадрат — это основные способы получения цветных схем.

В RYB первичные цвета: Красный, Желтый и Синий.В RGB: Красный, Зеленый и Синий.В CMY: Циан, Пурпурный и Желтый.

У RGB в середине получается белый свет, потому что модель RGB используется в источниках света, например, мониторах. У CMY и RYB в середине будет получаться черный, потому что смесь красок дает черный цвет.

CMYK — это тот же CMY, но с добавлением «ключевого цвета» — черного. Дело в том, что смесь CMY не дает настоящего черного цвета, поэтому эффективнее и экономичнее использовать черную краску.

Человеческий глаз видит 10 миллионов цветов. Из этих 10 миллионов вам нужно выбрать 1 цвет, который будет коррелировать с сайтом и брендом.

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

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

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

К счастью, подобрать цвет сегодня не так сложно:

Можно черпать идеи у сайтов, которые вам нравятся:

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

Черпать вдохновение можно на Дриббле и Дизайниспирейшене можно посмотреть работы дизайнеров и заимствовать их цветовые палитры.

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

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

Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.Яркость / Brightness — обозначает степень отличия цвета от белого или черного.

Теперь у вас должен быть HEX-код цвета. HEX-код состоит из трех пар цифр и может принимать значения от 0 до 9 и букв от A до F.

Первая цифра уточняет цвет, вторая — оттенок. Чем больше значение пар, тем светлее цвет:

В уже знакомым нам RGB и CMY значения цветов будут такими:

Если понимать шестнадцатеричный код цветов, вы сможете точно комбинировать цвета и цветовые схемы.

Есть несколько простых техник работы с кодом:

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

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

Реально вам нужно только 2 цвета:

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

Зайдите в Палеттон и вбейте код цвета. Вы сможете быстро подобрать к нему удачный акцентирующий цвет

Если результат не устраивает, то все-таки можно поиграться с триадами и тетрадами

В итоге мы получаем гармоничную цветовую схему. Добавим также белый цвет, потому что белый — всегда круто.

Осталось добавить серого

Подбираем гармоничный серый.

Подобрать серый можно в том же Дриббле и Дизайниспирейшене. Либо, если у вас есть Фотошоп, можно сделать так:

Нужно отметить, что этот метод работает очень хорошо с синим цветом. Если у вас другой цвет, вам нужно либо повысить прозрачность в пределах 5—10%, или ограничиться стандартным серым.

Посмотрите, какой кайф:

Можно сначала сделать сайт в черно-белом исполнении, а уже потом расставлять акценты:

В этом примере голубой — главный цвет. Он используется щедро: в качестве фона и на иконках.

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

Темно-серый используется для текста, логотива и контура иконок. Если делаете иконки, всегда наполняйте их цветом. Хорошо, если получится заменить иконки на живые фотографии.

Белый и светло-серый на фоне. Светло-серый необязателен, но он добавляет изюминки, страница выглядит продуманной и законченной.

Убедитесь, что у вас достаточно контраста между фоном и текстом: так его проще читать и быстрее усваивать.

Проверка на контраст

Несколько удачных и неудачных подборок цвета.

Попробуйте самостоятельно проанализировать, почему в этих сайтах плохо подобраны цвета:

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

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

Бонус

Попробуйте угадать, какого цвета эти квадраты (а потом проверьте значение HEX-кода в Фотошопе):

Источники:Иоханнес Иттен, «Искусство цвета»