Как использовать сочетания цветов в дизайне сайта

Иван Алексеев

9 years ago

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

Истина где-то посередине. Многие дизайнеры жалуются на отсутствие вдохновения, особенно, когда речь идет о выборе цветов другими людьми. Возможно потому, что в последнее время, клиентов трудно удивить чем-то новым. Каждый читатель может поинтересоваться: как дизайнеры способны выбрать только подходящие цветовые сочетания, когда количество цветов бесконечно?. Ответ окажется неожиданным и слегка забавным: многие цвета не любят друг друга! Конечно, количество цветов практически безгранично, но только немногие из них являются “дружественными”! Кроме того, хороших цветовых комбинаций довольно мало в сравнении с огромным количеством оттенков.

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

Давайте начнем. Красный, синий и желтый называются основными цветами, потому что из них образуется большинство комбинаций. Практически, их можно назвать «родителями» цветов. Вторичные цвета создаются путем объединения основных цветов, в равных частях:

Синий + Желтый = Зеленый

Синий + Красный= Фиолетовый

Красный + Желтый= Оранжевый

И наконец, есть цвета третьего уровня, которые образуются путем комбинации первично-вторичных или вторично-вторичных цветов. Безусловно, это происходит в равных частях. Результаты получаются следующие:

Синий + Зеленый = Аквамарин

Синий + Фиолетовый = Лиловый

Красный + Оранжевый = Алый

Красный + Фиолетовый = Пурпурный

Желтый + Оранжевый = Золотистый

Желтый + Зеленый = Желто-зеленый

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

Значение наиболее часто используемых цветов

Красный

Когда человек задумывается о значении красного цвета, в его голове сразу же возникают ассоциации с любовью и Днем Святого Валентина, потому что большинство подарков в этот праздник красного цвета. Также красный провоцирует волнение – поэтому многие кнопки вызова и действий окрашены в красный цвет; кроме того он повышает кровяное давление. А еще красный означает опасность. Вас когда-нибудь интересовало, почему есть дорожные знаки красного цвета? Вот вам и объяснение.

Тест бесплатно

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

Синий

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

Тест бесплатно

Шаблоны ниже иллюстрируют, как теория осуществляется на практике.

Желтый

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

Вот несколько тем, с дизайном в желтых тонах.

Тест бесплатно

Зеленый

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

Обратите внимание на удивительное использование зеленого цвета в веб-дизайне.

Тест бесплатно

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

Сочетания цветов и цветовые комбинации

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

Монохромная

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

Аналоговая

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

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

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

Триадическая

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

Тетрадическая

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

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

Любимые инструменты по подбору цветовых схем

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

#1 – Canva Color Wheel
Это прекрасное приложение с удобным интерфейсом. Он простой в использовании и интуитивно понятен. Будьте уверены, его стоит попробовать!

# 2 – Adobe Color Wheel

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

#3 – Colors Co

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

Вот собственно и все. Теперь вы обладаете необходимыми ресурсами, чтобы достичь мастерства в теории цвета. Будьте терпеливы, уверенны в себе и усердно работайте – и достигнете результата!