Теория цвета: как выбирать цвета для сайта и контента
Цвет создает настроение на сайте, помогает выделить важные элементы, сделать навигацию проще и дать позитивные ощущения от первого знакомства с сайтом. Но просто выбрать понравившийся цвет на свой вкус недостаточно, цвета нужно правильно сочетать и грамотно расставлять акценты. Мы собрали основные и важные моменты теории цвета.
Какие цвета бывают
Цвета бывают первичные или основные, вторичные, третичные.
Первичные цвета. Существует всего три первичных или основных цвета: желтый, синий, красный. Их невозможно создать путем комбинации каких либо цветов.
Вторичные цвета. Их создают путем сочетания любых 2-х из 3-х первичных цветов. Вторичных цвета всего 3: оранжевый, фиолетовый и зеленый. Создаются они так:
- Зеленый = желтый + синий
- Фиолетовый = синий + красный
- Оранжевый = красный + желтый
Третичные цвета. Их создают путем сочетания первичного цвета со вторичным, который находится рядом с ним на цветовом круге. Этому требованию соответствуют 6 третичных цветов:
- Пурпурный = красный + фиолетовый
- Киноварь = красный + оранжевый
- Фиолетовый = фиолетовый + синий
- Бирюзовый = синий + зеленый
- Янтарный = желтый + оранжевый
- Шартрез = желтый + зеленый
Что такое цветовой круг?
Это круговая диаграмма. Она отображает каждый первичный, вторичный и третичный цвет, а также их соответствующие оттенки, тени и тона. Цветовой круг помогает выбирать цветовые схемы.
Какие эмоции и ассоциации создают цвета
Разные цвета несут разное настроение для пользователей сайта
- Красный — это сила, страсть, энергия. Он приводит к активным действиям на сайте.
- Оранжевый несет радость и энтузиазм.
- Желтый создает ощущение счастья, но не переборщите.
- Зеленый ассоциируется с ростом.
- Синий показывает спокойствие, а также уверенность. Светлые тона дают ощущение умиротворения.
- Фиолетовый — цвет роскоши и креативности.
- Черный — цвет силы и строгости.
- Белый — цвет безопасности и чистоты.
7 основных цветовых схем
Эксперты в дизайне определили 7 распространенных цветовых схем:
— Монохроматическая. В ней всего один цвет с различными оттенками. В нем нет цветового контраста, она выглядит очень аккуратно.
— Аналогичная. Создается с помощью сочетания одного основного цвета с двумя цветами, находящимися рядом с ним на цветовом круге. Их используют для создания мягкого дизайна.
— Дополнительные. В них использованы два цвета, расположенные напротив друг друга на цветовом круге. Они обеспечивают максимальный цветовой контраст. Лучше взять один цвет, а второй использовать в качестве акцента.
— Раздельная схема. В ней есть один доминирующий цвет и 2 цвета, смежные с доминирующим цветом. Схема создает тонкую цветовую палитру и сохраняет преимущества контрастных цветов.
— Триадная — высококонтрастная схема. Такие схемы создают выбором трех цветов. Они равномерно размещаются линиями вокруг цветового круга.
— Квадратная. В ней есть 4 цвета, равноудаленные друг от друга на цветовом круге. Схема обеспечивает значимый контраст дизайну. Рекомендуется выбрать один доминирующий цвет.
— Прямоугольная. Предлагает более тонкий подход к выбору цвета, чем квадрат.
Как выбрать цветовую схему
1. Ориентируйтесь на удобство работы для пользователей. Прежде чем добавлять цвет, нанесите дизайн в оттенках серого. Не уверены, что хорошо? Посмотрите на улицу. Природа — отличный пример цветов, которые дополняют друг друга.
2. Задайте настроение сайту. Подумайте о настроении, которое вы хотите создать выбранной схемой.
3. Учтите цветовой контекст и как цвета смотрятся на контрасте. Посмотрите на изображении ниже. Середина каждой фигуры одного размера, формы и цвета. Меняется цвет фона. Но одни круги кажутся мягче, ярче в зависимости от цвета за ними.
4. Посмотрите на цветовой круг. Выберите несколько схем. Не все они подходят для дизайна вашего сайта — вы это увидите сразу. Действуйте методом проб и ошибок. Это поможет найти нужную цветовую схему.
5. Пользуйтесь правилом 60-30-10: основной цвет для 60% дизайна, вторичный цвет для 30% и акцентный цвет для 10%.
6. Создавайте несколько вариантов дизайна и посмотрите, какой из них выделяется. Потом подождите несколько дней и снова проверьте, не изменились ли ваши предпочтения.