Advertisement
  1. Web Design
  2. Design Theory

Понимание качества и характеристики цвета

Scroll to top
Read Time: 10 min
This post is part of a series called Design School for Developers.
Defining and Recognizing Colors
Selecting Your Own Color Scheme

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

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


Красный

Частью теплую семьи цвет, красный основной цвет является сильным, эмоционально насыщенный цвет.

colour-redcolour-redcolour-red

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

Некоторые ассоциации красного цвета включают в себя:

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

Что интересно о нем, так это то, что он имеет две диаметрально противоположные ассоциации: любовь и война. Так как красный известен как цвет, который часто предупреждает об опасности, он также ассоциируется со множеством запоминающихся изображений войны. Но он также сильно ассоциируется с любовью и сердцем – используя различные оттенки красного (от сильных, насыщенных цветов к легким вариантам, например, розовому). Отчего он очень ассоциируется с Valentine's Day в западной культуре.

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

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

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


Оранжевый

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

colour-orangecolour-orangecolour-orange

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

Немного ассоциаций с оранжевым цветом:

  • Энтузиазм
  • Счастье
  • Импульсивность
  • Спонтанность
  • Приключения, риски
  • Осень и сбор урожая
  • Творчество
  • Цитрус
  • Здоровая еда

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

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

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

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


Желтый

Последний из палитры теплых цветов, желтый – это светлый, творческий цвет.

colour-yellowcolour-yellowcolour-yellow

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

Некоторые ассоциации с желтым цветом:

  • Творчество
  • Солнечный свет
  • Счастье
  • Энергия
  • Трусливость
  • Обманчивость
  • Предупреждения
  • Непостоянство
  • Ясность
  • Активность

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

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

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

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

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

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


Зеленый

Относится к семейству более прохладных цветов. Зеленый – цвет спокойствия, так он широко ассоциируется с природой и отдыхом.

colour-greencolour-greencolour-green

Несколько ассоциаций с зеленым цветом:

  • Весна
  • Рост
  • Обновление и перерождение
  • Равновесие
  • Природа
  • Трава и сады
  • Стабильность
  • Обладание
  • Ревность
  • Зависть
  • Фертильность
  • Безопасность
  • Деньги
  • Переработка

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

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

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

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

В других культурах зеленый обычно имеет положительные коннотации. В Ирландии, как видно с национального флага, это цвет, который сильно ассоциируется с Днем Святого Патрика. Зеленый также ассоциируется с удачей четырехлистного клевера, который является, наверное, самым известным символом счастья в мире. Зеленый – традиционный цвет в Исламе, часто положительно описывается в Коране. К примеру, люди, которые уже в раю, носят "зеленые одежды".


Синий

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

colour-bluecolour-bluecolour-blue

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

Некоторые ассоциации с синим цветом:

  • Море
  • Небо
  • Доверие
  • Честность
  • Лояльность
  • Искренность
  • Мир
  • Спокойствие
  • Интеллект

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

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

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

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

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


Фиолетовый/Пурпурный

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

colour-violetcolour-violetcolour-violet

Некоторые ассоциации с фиолетовым:

  • Величие
  • Воображение
  • Власть
  • Роскошь
  • Состояние
  • Экстравагантность
  • Амбиции
  • Мудрость
  • Волшебство
  • Мистика

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

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

Пурпурный популярен во многих культурах. В Тайланде пурпурный – это цвет скорби по усопшим для вдов, а в Египте он известен как любимый цвет Клеопатры, которая была последним фараоном Древнего Египта. Во многих других культурах, фиолетовый – традиционный цвет царских семей или людей с властью. А в США имеется "пурпурное сердце", важная награда американской армии тем, кого ранили или убили в бою.

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

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

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


Цветовые схемы

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

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

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

  • Hue: это сам цвет по себе – зеленый, синий, красный, пурпурный и т.д.
  • Tint: это когда к заливке добавляют белый цвет, делая эту заливку светлей.
  • Shade: это когда к заливке добавляют черный цвет, делая ее темнее.
  • Tone: создается, когда к заливке добавляют серый цвет.

Монохромная

Эта цветовая схема использует одну заливку (например, синюю) и затем использует различные tint и shade этого основного цвета.

colour-wheel-monochromaticcolour-wheel-monochromaticcolour-wheel-monochromatic

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

Последовательная

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

colour-wheel-analogouscolour-wheel-analogouscolour-wheel-analogous

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

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

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

colour-wheel-complementarycolour-wheel-complementarycolour-wheel-complementary

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

Расщепленная комплементарная

Это выбор нескольких противоположных цветов одному основному.

colour-wheel-split-complementarycolour-wheel-split-complementarycolour-wheel-split-complementary

Например, ваш основной – фиолетовый, тогда два других будут соседними желтому (так как он противоположен фиолетовому) цветами, то есть желто-зеленым и желто-оранжевым.

Хоть эта цветовая схема и близка к комплементарной, все же она работает иначе, она воспринимается спокойней и сбалансированней, чем чисто комплементарная. Вновь, при использовании этой цветовой схемы проще взять один цвет как основной, а остальные – как оттенки.

Треугольная

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

colour-wheel-triadiccolour-wheel-triadiccolour-wheel-triadic

Используя треугольную цветовую схему, вы получите яркую и насыщенную палитру, но вы также можете использовать tint и shade, чтобы получить подходящие спокойные оттенки. Как и с предыдущими цветовыми схемами, треугольная лучше работает, когда один цвет основной, а остальные – акцентные.

Прямоугольная

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

colour-wheel-tetradiccolour-wheel-tetradiccolour-wheel-tetradic

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


Заключение

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.