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

Кеша выбирает цвета для сайта

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

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

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

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

Сайт мебели использует 2 цвета
2 контрастный цвета — кричащее впечатление

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

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

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

Использованы зеленый, красный, желтый и оранжевый
4 цвета для сайта детских товаров — сомнительная читабельность

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

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

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

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

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

Сохранение цвета из существующего лого
Инструмент пипетка позволяет вытащить цвет из картинки

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

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

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

Цветовой круг аналоговая пара
Выбираем в цветовом круге 2 похожих цвета (на круге через 1 цвет)
В цветовом круге контрастные цвета напротив друг друга
Выбираем 2 контрастных цвета для сайта (напротив друг друга)

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

 

солнца.

 

 

 

 

 

 

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

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

Контрастный треугольник для выбора триады цветов сайта
Выбираем три цвета для сайта: один и два по сторонам от его противоположности — узкий треугольник
Классическая триада цветового круга с равносторонним треугольником
Выбираем 3 цвета, вписывая в круг равносторонний треугольник (любые цвета через 3)

 

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

 

 

 

 

 

 

 

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

Цветовая схема из 4 цветов: квадрат или прямоугольник
Выбирая 4 цвета для сайта, подумайте — оно вам надо?

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

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

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

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

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

Палитра цветов для сайта через онлайн-сервис
Онлайн-сервис определяет основной тон фотографии, подходящие к нему цвета

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *