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

Подбираете цвета для сайта? Много схем, дизайнерских советов, терминов? Хотите 3 простых способа выбрать приятную гамму для вашей странички? Здесь не будет терминов вроде «дополнительных цветов», «колориметрии», «комплиментарности». Только практические подходы.

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

Оптимально 3, максимально 4 (пример, как логотип windows). Минимально 2 (черно-белое как btlcentr, бело-синее как skype или Вконтакте, одноклассники). Серый, черный и бежевый в количестве не учитываются — их глаз не воспринимает цветом: есть и есть.

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

Третий добавляемый цвет может быть:

1. Также фоновым, тогда общее впечатление от сайта будет спокойным, достойным, уютным. Подходит сайтам о семье, рукоделии, недвижимости, бытовых услугах. Служит основой для яркой начинки: фотографий, каталогов, репортажей. Например, сайт клининговой компании использует в теме основной спокойный синий, добавляет цвет морской волны (второй фоновый) и акцентный розовый.
2. Вторым ярким и акцентным. Сайт смотрится живо, ярко, иногда вызывающе, даже кричаще. Это нужно оправдать. Используется для молодежной аудитории, топовых компаний, детских товаров и услуг, творческих мастерских, агентств праздников. Например, сайт ИКЕА играет ярким оранжевым, синим на голубоватой основе.

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

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

Способ 1. Логотип — основа стиля сайта

У вас есть лого фирмы, набросок, фирменная одежда, вам нравится оформление вашего офиса. Это прекрасная основа:

• если цвета 2, то можно ими ограничиться;
• из трехцветного логотипа выберите 2 цвета в основу сайта;
• если в нем 1 яркий цвет, то подбираем к нему фоновый;
• если 1 спокойный цвет — хватайте яркий контраст.

В любом редакторе рисунков (даже встроенном Paint) есть инструмент «пипетка», который берет цвет из существующего изображения. Открываем логотип в редакторе, щелкаем пипеткой по окрашенной области и получаем цвет. Его можно сохранить в набор, нажав на панели «изменение цвета». Там же есть цифры, которые описывают цвет в оттенках красного, зеленого, синего. Запишите эти цифры — подставив их в любой программе, работающей с цветом, вы получите нужный оттенок.

Как подобрать цвет к одноцветному логотипу? Читайте способ 2.

Способ 2. Цветовой круг сайту в помощь!

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

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

 

солнца.

 

 

 

 

 

 

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

Для трех цветов тоже есть несколько схем:

 

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

 

 

 

 

 

 

 

Четыре цвета — это много. Не увлекайтесь!

Способ 3. Используем то, что приятно глазу

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

Это может быть:

• фото природы: цветка, животного, дерева;
• картина любимого художника;
• изображение прекрасного товара;
• рисунок дочки или сына.

Воспользуйтесь инструментом пипетка или онлайн ресурсами для создания палитр: https://www.imgonline.com.ua/ позволит выбрать количество определяемых цветов, а http://skillsup.ru/blog/soft-news/generator-czvetovoj-palitryi-dlya-kartinki.html покажет под палитрой противоположный цвет (complement) и оттенки треугольника (triade).

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