Цветовые сочетания для сайта

Просмотров: 871

Цветовые сочетания для сайта

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

Вместо вступления

Каждый цвет имеет множество оттенков, с которыми сочетаются разные цвета. Когда говорят "красный цвет" - каждый подразумевает свой оттенок красного. ли примера я нарисвала простую картинку, содержащую основной красный цвет 4-х оттенков и цвета, сочетающиеся с ним. Разницу видите сами:

Цветовые сочетания для сайта, оттенки красного

Поэтому важно не просто называть цвет в ТЗ, а показывать его визуально или описывать желаемое "настроение" и "эффект".

Как подобрать цвет для сайта?

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

1. По временам года:

  • Весна ( яркие, радостные, легкие оттенки)
  • Лето (пепельные, немного выцветшие от яркого солнца и голубого неба, пыльные)
  • Осень (теплые, насыщенные, «зрелые», оранжевые и красные)
  • Зима (холодные, морозные, яркие)

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

2. По цветовому кругу

— Сочетаются цвета аналоговые

Например, 2 и более соседних цвета в круге:

— Сочетаются контрастные цвета

Каждый теплый цвет сочетается с противоположным ему холодным:

— Сочетаются комплиментарные цвета

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

— Триада

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

Ну и черный и белый сочетаются со всеми цветами.

Цвет в дизайне сайта

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

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

Правила сочетания цветов на сайте:

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

Текст должен располагаться на однотонном фоне. Легче читать темный текст на светлом фоне, чем светлый текст на темном или ярком фоне.

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

Разноцветное меню подойдет только в том случае, если других ярких акцентов рядом с ним нет. Если рядом есть баннер, цветные иконки или яркая иллюстрация - меню лучше сделать однотонным, чтобы его дизайн отличался от соседних жлементов. При этом важно, чтобы цвета, используемые в меню, СОЧЕТАЛИСЬ между собой. Ошибочно думать, что если цвет просто яркий - это выделит раздел.. НЕТ. Если использовать просто набор ярких цветов - станет пестро и нечитаемо.

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