Теория цвета: как выбирать цвета для сайта и контента

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

Какие цвета бывают

Цвета бывают первичные или основные, вторичные, третичные.

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

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

  • Зеленый = желтый + синий
  • Фиолетовый = синий + красный
  • Оранжевый = красный + желтый

Третичные цвета. Их создают путем сочетания первичного цвета со вторичным, который находится рядом с ним на цветовом круге. Этому требованию соответствуют 6 третичных цветов:

  • Пурпурный = красный + фиолетовый
  • Киноварь = красный + оранжевый
  • Фиолетовый = фиолетовый + синий
  • Бирюзовый = синий + зеленый
  • Янтарный = желтый + оранжевый
  • Шартрез = желтый + зеленый

Что такое цветовой круг?

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

Какие эмоции и ассоциации создают цвета

Разные цвета несут разное настроение для пользователей сайта

  • Красный — это сила, страсть, энергия. Он приводит к активным действиям на сайте.
  • Оранжевый несет радость и энтузиазм.
  • Желтый создает ощущение счастья, но не переборщите.
  • Зеленый ассоциируется с ростом.
  • Синий показывает спокойствие, а также уверенность. Светлые тона дают ощущение умиротворения.
  • Фиолетовый — цвет роскоши и креативности.
  • Черный — цвет силы и строгости.
  • Белый — цвет безопасности и чистоты.

7 основных цветовых схем

Эксперты в дизайне определили 7 распространенных цветовых схем:

— Монохроматическая. В ней всего один цвет с различными оттенками. В нем нет цветового контраста, она выглядит очень аккуратно.

— Аналогичная. Создается с помощью сочетания одного основного цвета с двумя цветами, находящимися рядом с ним на цветовом круге. Их используют для создания мягкого дизайна.

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

— Раздельная схема. В ней есть один доминирующий цвет и 2 цвета, смежные с доминирующим цветом. Схема создает тонкую цветовую палитру и сохраняет преимущества контрастных цветов.

— Триадная — высококонтрастная схема. Такие схемы создают выбором трех цветов. Они равномерно размещаются линиями вокруг цветового круга.

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

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

Как выбрать цветовую схему

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

2. Задайте настроение сайту. Подумайте о настроении, которое вы хотите создать выбранной схемой.

3. Учтите цветовой контекст и как цвета смотрятся на контрасте. Посмотрите на изображении ниже. Середина каждой фигуры одного размера, формы и цвета. Меняется цвет фона. Но одни круги кажутся мягче, ярче в зависимости от цвета за ними.

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

5. Пользуйтесь правилом 60-30-10: основной цвет для 60% дизайна, вторичный цвет для 30% и акцентный цвет для 10%.

6. Создавайте несколько вариантов дизайна и посмотрите, какой из них выделяется. Потом подождите несколько дней и снова проверьте, не изменились ли ваши предпочтения.