Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:

Главное о цветовых схемах

Базовые правила работы с цветом в дизайне сайтов.
card-photo
card-photo
ЛЮБАВА КУХТИНА

Автор в SKVOT

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

Джесс Томс, бренд-стратег и соосновательница дизайн-студии Xandra, Inc., рассказала про теорию цвета, цветовой круг, психологию цвета и цветовую сочетаемость в дизайне. Мы дополнили.

 

Базово о цветах

Сначала разберемся с терминами, которые относятся к теории цвета.

Вот основные:

Тон (hue): какого цвета объект (например, красный или синий).

Хроматичность (chroma): есть ли примеси белого или черного.

Насыщенность (saturation): как сильно цвет выражен.

Яркость (value): насколько цвет темный или светлый.

Тональность (tone): сколько серого добавили к чистому цвету.

Тень (shade): сколько черного добавили к чистому цвету.

Оттенок (tint): сколько белого добавили к чистому цвету.

Теперь к истории.

Все началось с физика Исаака Ньютона и его экспериментов с призмой. В 1676 году ученый определил, что белый солнечный свет содержит в себе все цвета, кроме пурпурного, и расположил цвета по кругу. Ньютон выделил семь неравных секторов — красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый. Размер сектора зависел от интенсивности цвета.


Цветовой круг Ньютона из книги «Оптика» 1704 года. Источник: wikipedia.org

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


Цветовой круг Иттена. Источник: doodleandsketch.com

Как работает цветовой круг

В базовый цветовой круг входит 12 цветов:

основные (первичные) — красный, желтый и синий

дополнительные (вторичные) — фиолетовый, оранжевый и зеленый

комбинированные (третичные) — смешение соседних цветов (например, оранжевый из красного и желтого)

Цветовая гармония — теория эстетичной сочетаемости цветов. Если хочется, чтобы дизайн-элементы в проекте смотрелись стройно, игнорировать ее нельзя.

Есть несколько подходов к тому, как правильно сочетать цвета. Но веб-дизайнеры чаще всего используют комплементарный, аналоговый и триадный.

Комплементарные цвета

В цветовом круге комплементарные цвета лежат друг напротив друга: синий–оранжевый, красный–зеленый, фиолетовый–желтый.

Дизайнеры сайта WeWork пошли по этому пути. Там важную роль играют два комплементарных цвета — оранжевый и ярко-синий. Первый использовали в изображениях, а второй — как акцент на кнопках и ссылках.


В дизайне сайта WeWork использованы комплементарные синий и оранжевый.
Источник: wework.com

Аналоговые цвета

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

В недавнем редизайне Dropbox показал, как сочетать близкие оттенки — на новом сайте вместе стоят фиолетовый, синий и розовый.

На сайте Dropbox использовали цвета, которые сочетают не часто, и это сработало.
Источник: dropbox.com

Триадные цвета

На цветовом круге триадные цвета лежат на равном расстоянии друг от друга — на вершинах равнобедренного треугольника. Такая цветовая схема выглядит сбалансировано и гармонично.

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

Триадная желто-красно-голубая цветовая схема сайта Петера Оравица — зеленый тут тоже подключился.
Источник: peteroravec.com

Психология цвета

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

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

КРАСНЫЙ

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

Лендинг iPhone X (RED) — красный на красном. Источник: apple.com

ЖЕЛТЫЙ

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


Онлайн-магазин продуктов Headery на основе конопляного масла — все в желтых тонах.
Источник: headery.com

ОРАНЖЕВЫЙ

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


Оранжевый онлайн-магазин бренда Aloha — продуктов на основе растительного белка.
Источник: aloha.com 

СИНИЙ

Синий = спокойствие, умиротворение и надежность. Страховые службы, банки и IT-компании часто выбирают этот цвет для своих логотипов и сайтов, потому что он транслирует безопасность и честность.

Например, визуальный стиль Facebook как раз основан на оттенках синего. Но этот выбор объясняется не только «надежным» характером синего, но и тем, что Марк Цукерберг — дальтоник. Он не различает красный и зеленый, а вот синий видит.


Сине-белый сайт книги When the World Went Digital о главных событиях в веб-дизайне.
Источник: thehistoryofweb.design

ЗЕЛЕНЫЙ

Зеленый — это символ жизни, обновления и роста. Главная среда обитания всех оттенков зеленого — природа, это ее главный цвет. Чтобы показать гармонию и внутреннее спокойствие, используй зеленый.

Сайт американской студии дизайна Unboundary — в оттенках зеленого.
Источник: unboundary.com

РОЗОВЫЙ

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


Онлайн-магазин женской одежды Femme and Fierce в основных оттенках розового.
Источник: femmeandfierce.nl

ФИОЛЕТОВЫЙ

У фиолетового много оттенков — например, лиловый, сиреневый, цвет парнасской розы и лавандовый. Классический фиолетовый — сочетание красного (страсти, энергии) и синего (спокойствия и умиротворения). Его часто используют, чтобы транслировать креативность. Если хочется рассказать о творческих победах — вперед, за фиолетовый.

Лавандово-фиолетовый сайт креативного агентства Omelet. Источник: omelet.com

Как составить цветовую палитру

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

Цветовую палитру составляют из первичных, вторичных и акцентных цветов.

Вот как это происходит:


Источник: gfycat.com

ДОМИНИРУЮЩИЕ ЦВЕТА

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

ВТОРИЧНЫЕ ЦВЕТА

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

Чтобы создать яркий дизайн, выбирай цвета, которые лежат друг напротив друга в цветовом круге. Для более спокойных решений нужны оттенки-«соседи».

АКЦЕНТНЫЕ ЦВЕТА

Акцентные цвета подходят для фонов, ссылок, кнопок и иконок. Если основная палитра сайта — монохромная, яркие акценты будут выглядеть отлично. Часто на сайтах ключевой брендовый цвет используют только для акцентов, а фон оставляют нейтральным.

Чтобы подбирать цвета было проще, вот бесплатные инструменты:

  • Colors Muzli — чтобы проверить цвета на сочетаемость, создать и отредактировать цветовую палитру. Загружай UI-наборы с кастомными цветовыми мэтчами, чтобы посмотреть, как они будут выглядеть в интерфейсе.

  • Coolors.co — чтобы создавать цветовые схемы по клику и смотреть тысячи палитр, созданных другими пользователями.

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

  • Colormind.io — чтобы подобрать цветовую схему и в режиме реального времени наложить ее на мокап лендинга.

Основные цветовые сочетания в веб-дизайне

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

АНАЛОГОВАЯ

Как и в случае с Dropbox, в дизайне сайта эко-инициативы Useless London используются аналоговые цвета — синий и зеленый, оба довольно насыщенные. Эта цветовая палитра хорошо воспринимается глазом и отлично передает главный посыл про борьбу за экологию.

Сайт Useless London, посвященный теме борьбы с отходами. Источник: useless.london

КОМПЛЕМЕНТАРНАЯ

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


Онлайн-магазин Kin Europhorics — бренда антистрессовых напитков.
Источник: kineuphorics.com

ГРАДИЕНТ

Градиент — плавный переход одного цвета в другой. С помощью градиента объединяют аналоговые цвета, например, синий и зеленый. Еще его используют, когда хотят остаться в рамках одного базового цвета — и «раскатывают» оттенки от более интенсивного к менее насыщенному. Сайт музыкального стриминга Spotify — идеальный пример того, как использовать градиент.

На сайте стриминга Spotify показали, как «перевести» желтый в персиковый.
Источник: spotify.com

АКЦЕНТ НА ФИРМЕННОМ ЦВЕТЕ

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


Онлайн-магазин постельного белья Casper с акцентом на синий. Источник: casper.com

МОНОХРОМНАЯ

В монохромную цветовую гамму входят все варианты одного цвета — его оттенки, тона и нюансы. К примеру, на сайте косметики для губ Axiology Beauty главный цвет — глубокий красный, а все остальные — чуть темнее или светлее.



Онлайн-магазин косметики для губ Axiology Beauty. Источник: axiologybeauty.com

ПАЛИТРА ПРИГЛУШЕННЫХ ЦВЕТОВ

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

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

Кофейные оттенки на сайте магазина кофе StumpTown Coffee. Источник: stumtowncoffee.com

СХЕМА ИЗ ОСНОВНЫХ ЦВЕТОВ

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


Красный, синий и желтый в дизайне сервиса знакомств Bumble. Источник: bumble.com

ВИНТАЖНАЯ ЦВЕТОВАЯ СХЕМА

Взять винтажные сочетания оттенков — хорошее решение, если хочется ретро-эстетики. Например, в схеме сайта для креативного агентства Five/Four дизайнеры использовали «старые» красный и желтовато-коричневый цвета, плюс усилили эффект зернистыми фото с сепией.

 
Винтажные акценты на сайте Five/Four — в фильтрах и основных цветах.
Источник: five-four.co

Чтобы создавать правильные винтажные сочетания, используй документальные референсы. Сервис Colorleap подбирает цветовые схемы по эпохам — от 2000 года до н. э. до 1960-х, беря за основу цвета исторических артефактов, картин, плакатов и афиш разных периодов.

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту