Подбираете цвета для сайта? Много схем, дизайнерских советов, терминов? Хотите 3 простых способа выбрать приятную гамму для вашей странички? Здесь не будет терминов вроде «дополнительных цветов», «колориметрии», «комплиментарности». Только практические подходы.
Сколько цветов выбрать для сайта?
Оптимально 3, максимально 4 (пример, как логотип windows). Минимально 2 (черно-белое как btlcentr, бело-синее как skype или Вконтакте, одноклассники). Серый, черный и бежевый в количестве не учитываются — их глаз не воспринимает цветом: есть и есть.
Из двух цветов один должен быть фоновым, мягким, приглушенным, спокойным. Второй ярким, акцентным, сочным для выделения важного на сайте (кнопок, ссылок, рамок, цен). Например, у Тинькофф банка это приглушенный синий и желтый. Могут быть исключения, как два контрастных цвета на снимке. Опасайтесь попугаизма!
Третий добавляемый цвет может быть:
- Также фоновым, тогда общее впечатление от сайта будет спокойным, достойным, уютным. Подходит сайтам о семье, рукоделии, недвижимости, бытовых услугах. Служит основой для яркой начинки: фотографий, каталогов, репортажей. Например, сайт клининговой компании использует в теме основной спокойный синий, добавляет цвет морской волны (второй фоновый) и акцентный розовый.
- Вторым ярким и акцентным. Сайт смотрится живо, ярко, иногда вызывающе, даже кричаще. Это нужно оправдать. Используется для молодежной аудитории, топовых компаний, детских товаров и услуг, творческих мастерских, агентств праздников. Например, сайт ИКЕА играет ярким оранжевым, синим на голубоватой основе.
Четыре цвета — игра на грани фола. Смотрится это ярко, красочно, главное — не переборщить с акцентами. В формате браузера (особенно на мобильных устройствах) такое обилие цвета вызывает рябь в глазах, отвлекает от нити повествования. Не советую. Посмотрите пример красного, желтого, оранжевого на зеленом фоне.
Итак, с количеством определились. Теперь нужно решить, где эти цвета взять. Ловите 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).
Никто не мешает вам сочетать все три способа, как сделала я при выборе цветов своего сайта. Проконсультироваться у меня тоже можно.