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

Как подобрать цвета для сайта
26.04.2015 КОММЕНТАРИИ: 0

Какие цвета хорошо сочетаются между собой? Сколько оттенков можно включить в веб-дизайн? Как подобрать цветовую схему для сайта, чтобы потом её можно было использовать и в социальных сетях, и в печатных буклетах? Ответы на все эти вопросы нам даёт теория цвета.

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

Rруг цветовых сочетаний

Виды цветовых сочетаний в веб-дизайне

Автор книги «Современный веб-дизайн. Эпоха Веб 3.0» Юлия Сырых выделяет 2  вида гармоничного сочетания цветов:

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

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

Яркие и пастельные тона на цветовом круге

Подбор цветовой схемы для сайта

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

Можно попробовать также «первичную триаду»: чёрный + белый + красный. Сочетание получится стильным, гармоничным, но едва ли оригинальным. Таких сайтов пруд пруди. Чуть больше шансов на уникальность у комбинации чёрного и белого с каким-нибудь другим ярким хроматическим цветом. Но если вы действительно хотите выделиться из толпы, идите на риск и используйте нетривиальные цветовые схемы. Составить таковые поможет всё тот же цветовой круг.

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

Монохромное сочетание

Монохромная цветовая схема

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

Аналоговое сочетание

Аналоговая цветовая схема

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

Комплементарное сочетание

Комплементарная цветовая схема

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

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

Сплит-аналоговое сочетание

Сплит-аналоговая цветовая схема

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

Сплит-комплементарное сочетание

Сплит-комплементарная цветовая схема

Сплит-комплементарная схема комбинируется путём сочетания основного цвета с двумя ближайшими соседями противоположного ему по месторасположению на цветовом круге.  

Триадное сочетание

Триадная цветовая схема

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

Программы-генераторы цветовых схем

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

Программа-генератор цветовых схем

Вот ссылки лишь на некоторые из них:

Напоследок приведём несколько дополнительных советов по оперированию цветами в дизайне.

Пробуждение эмоций с помощь цвета

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

Холодные и тёплые цветовые схемы в веб-дизайне

Ещё не определились с выбором? Тогда сравните примеры использования холодной и тёплой палитры компаниями Benefit Cosmetics и Corona. Розовый в Инстаграме женского бренда создаёт ощущение лёгкости и свободы, в то время как жёлтые тона фото в аккаунте Corona формируют атмосферу тепла и уюта.

Эффективные цветовые схемы

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

Пример гармоничной цветовой палитры в веб-дизайне

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

Согласование цвета текста с картинками

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

Подбор цвета текста под цвет фонового изображения

Эксперименты с палитрой

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

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

Верность фирменным цветам

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

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

Пример последовтельного использования фирменных цветов бренда

Единство цвета во всём дизайне

Выбранная цветовая схема должна распространяться не только на фоновое изображение и текст, но и на каждый элемент веб-дизайна: ссылки, кнопки, формы, таблицы, иконки, маркированные списки и т.д.

Соблюдение единства цветовой гаммы в веб-дизайне

Доски настроений для вдохновения

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

Доски настроений для вдохновения

Для разработки такой доски вам придётся ответить самому себе на следующие вопросы:

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

Источники:

Designyourway.net

Hubspot.com

Книга Ю.А. Сырых «Современный веб-дизайн. Эпоха Веб 3.0».

Статьи в тему:

«Выбор фонового цвета сайта»

 

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


Защитный код
Обновить