Цвет в дизайне — обо всём понемногу

Статья

Что нужно знать и понимать заказчику при выборе цветовой гаммы для проекта

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

Цветовые модели

В любом фирменном стиле существуют фирменные цвета, указанные в брендбуке — конкретные коды цветов, которые можно использовать при создании креативов: полиграфии, сайтов, контента для соцсетей, мерча и т.д. Существует несколько разных систем: RGB, HEX, CMYK и PANTONE.

1. RGB — для цифровых экранов

Название RGB складывается из трёх основных цветов: Red (красный), Green (зеленый), Blue (синий). Используется данная модель для обозначения цветов на цифровых экранах разных устройств — ноутбуков, телефонов, цифровых панелей. Каждый из трёх цветов добавляется в большей или меньшей степени — по шкале от 0 до 255. Один светодиод на экране горит ярче, а другой тусклее, и таким образом «замешиваются» цвета на дисплее.

2. HEX-коды

Коды Hex похожи на систему RGB — они начинаются с символа #, а дальше следуют шесть знаков, которые можно разбить на три пары, каждая пара обозначает степень проявления одного из цветов — красного, зеленого и синего цвета. В таком коде полное отсутствие цвета обозначается символами 00, а максимальное — символами FF.

3. CMYK — для печати

CMYK — это цветовая модель, которая используется в полиграфии, и её название складывается из четырёх оттенков типографских красок: Cyan (голубой), Magenta (пурпурный), Yellow (желтый), Key (ключевой, т.е. чёрный). Значение каждого компонента в системе варьируется от 0 до 100%, и их сочетания образуют необходимые для печати цвета.

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

4. Pantone — для креатива

Pantone LLC — это большая компания, которой принадлежит институт цвета Pantone и цветовая модель Pantone Matching System. В неё входят как цифровые, так и физические цвета.

В Pantone Matching System собственная нумерация и особый способ представления образцов — в виде плашек, где каждому цвету присваивается порядковый номер и название. Эти цвета называются «плашечными» или «смесевыми». Они замешиваются заранее и печатаются уже в готовом виде.

Разница между RGB и CMYK

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

Разница между CMYK и PANTONE

Разница между CMYK и PANTONE заключается в том, что CMYK — это имитация, полученная смешением четырех цветов, PANTONE — это стандартизованная палитра из тысяч оттенков с присвоенным определённым номером и прописанным рецептом его получения (в печатный станок заливается уже готовая краска).

Сочетание цветов и цветовой круг

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

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

Первичные цвета

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

Вторичные цвета

Вторичные цвета — зелёный, оранжевый и фиолетовый. Получаются при смешении первичных цветов.

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

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

Комбинации цветового круга

Комплементарное

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

Контрастная триада

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

Классическая триада

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

Аналоговая триада

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

Тетрада

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

Прямоугольная схема

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

Составляющие цвета

Оттенок цвета

Цветовым тоном или оттенком называют общее определение цвета.

Психология выбранного цвета во многом влияет на его восприятие.

Яркость цвета (светлота)

Яркость определяется тем, насколько тёмным или светлым будет цвет. Цвета, имеющие низкий уровень света, называются тёмными.
Цвета с высоким уровнем светлоты – светлые.

Насыщенность цвета (хрома)

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

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

Черный цвет

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

Серый цвет

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

Белый цвет

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

Бежевый цвет

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

Коричневый цвет

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

Красный цвет

Характеризуется насыщенностью, стойкостью и яркостью. Психология красного цвета связана с силой, страстью, воинственностью и темпераментом. Светло-красный тон отражает возбуждение, тогда как темный оттенок выглядит солидно и важно.
Если с красным «переборщить», то этот тон способен пробудить злость и другие негативные эмоции.

Бордовый цвет

Бордовый цвет ассоциируется с силой духа и воли, роскошью, статусностью и роскошным стилем. Придаёт объекту изысканность и изящность, воплощает силу, страсть и чувственность.

Розовый цвет

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

Синий цвет

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

Голубой цвет

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

Фиолетовый цвет

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

Сиреневый цвет

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

Зеленый цвет

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

Бирюзовый цвет

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

Желтый цвет

Является символом солнечного света, всего божественного и золота. В психологии отражает счастье, легкость, воздушность, теплоту и насыщенность, обеспечивает активность, весёлый нрав, хорошие впечатления и положительно воздействует на умственную деятельность.

Оранжевый цвет

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

Правила цветов

Никаких жёстких правил

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

Узнавание и кодирование

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

Иерархии информации

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

Привлечение внимания

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

Ассоциации

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

Контекст цветов

Цвет не существует сам по себе, без фона или соседних цветов. Важно сочетание и соответсвие цвета с его окружением.

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

1. Собрать информацию о компании

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

2. Исследовать конкурентов

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

3. Определить направление цветовой палитры

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

4. Создать несколько палитр

Основываясь на информации о компании и конкурентах, можно создать 3–5 черновых варианта палитры, стараясь выразить в каждом из них главную идею и миссию продукта или компании.

5. Оценить и протестировать палитру

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

6. собрать финальную палитру

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

Статьи

Designer Panina Maree

Дизайнер с маркетинговой экспертизой: создаю презентации, анимированную графику, фирменный стиль, полиграфию и веб‑интерфейсы, которые работают на бизнес‑цели.

Режим работы: будни, 10:00–19:00 (мск).