Изучаем правила цветовых сочетаний, используя цветовой круг
Правила цветовых сочетаний помогут подобрать удачную комбинацию цветов, подскажут, сколько цветов использовать, как они сочетаются друг с другом. В большинстве случаев лучше использовать меньше цветов, поскольку человеку сложнее найти информацию на пестрящей цветами странице. С другой стороны, страница с малым количеством цветов в ряде случаев может показаться слишком скучной, но это вопрос стиля.
Правила цветовых сочетаний
Удачная комбинации цветов является важной составляющей хорошего дизайна сайта, презентации или другого проекта.
Цветовые схемы для сайта включают в себя три главных функциональных группы цветов или совокупности оттенков:
- Главный цвет (или основной) доминирует и задает основной тон всей странице.
- Вторичный цвет дополняет основной цвет. Обычно вторичный цвет достаточно близок к основному.
- Цвет выделения применяется для привлечения внимания зрителя к определенным областям. Для этой цели используют дополняющий, либо дополняюще-совмещенный цвет (см. ниже.). Обычно этот цвет контрастирует с основным или вторичным цветом. Он должен использоваться в умеренных количествах.
Типы цветовых сочетаний
Использование цветового круга поможет при формировании цветовой схемы. Здесь представлено несколько самых распространенных цветовых сочетаний, подобранных с помощью цветового круга.
Монохромные цвета (mono)
Монохромное цветовой сочетание – это один основной цвет и различные вариации его яркости и насыщенности. Подходит для стилистически строгих решений, не отвлекает от контента. Эта цветовая схема всегда гармонична, но есть риск того, что страница сайта покажется слишком скучной. Контраст в монохромной цветовой схеме обеспечивается применением белого и черного. Вариантом монохромной схемы является решение в градациях серого. Оно включает в себя нейтральные оттенки в диапазоне от белого до черного. Такой «серый» вариант можно разнообразить, добавив всего один яркий цвет для создания акцента.
Соседние (аналоговые) цвета (analogic)
Лежат по обе стороны от какого-то определенного цвета. Данная цветовая схема часто используется в природе. Вторичный цвет, о котором шла речь выше, подбирается из аналоговых оттенков.
Дополняющие (противосторонние) цвета (complement)
Располагаются напротив друг друга в цветовом кольце. Эти цвета обеспечивают максимальный цветовой контраст, поэтому используются для выделения.
Дополняющие совмещенные цвета (triad)
Являются аналоговыми цветами противостороннего цвета. Использование таких цветов поможет вам создать дизайн с высоким уровнем контраста, но не такой экстремальный, как при использовании противостороннего цвета. Возможна триада из цветов, находящихся на углах равностороннего треугольника, вписанного в цветовой круг.
Парная четверка
К паре дополняющих цветов добавляется пара аналоговых.
Акцентирование аналоговых цветов
Четверка состоит из основного цвета, пары его аналоговых и дополняющего акцента.
Как создать цветовые схемы для сайта, используя цветовой круг
- Выбираем основной цвет
- Выбираем тип цветовых сочетаний
- Во вкладке «Тонкая настройка – Палитры» определяем степень насыщенности, яркости и контрастности схемы.
- Во вкладке «Тонкая настройка – Коррекция вариантов» определяем степень насыщенности и яркости каждого цвета.
- Копируем коды цветов из вкладки «Список цветов»
Перечень сайтов, которые помогут в работе по подбору цветовых схем:
Ищите готовые цветовые схемы на сайтах:
- ColorHunt — цветовые палитры высокого качетсва с функцией быстрого предпросмотра. Отличный ресурс, если вам достаточно четырех цветов.
- COLOURlovers — отличное сообщество по цвету, с разнообразными инструментами для создания цветовых палитр.
- Coolors — генератор легких цветовых палитр, позволяющий оставить выбранные цвета и заменить все остальные.
- Flat UI Colors — отличный набор цветов для UI, один из самых популярных
- Material Design Colors — еще одна отличная палитра UI. Она не только предоставляет богатый ассортимент цветов, но и предлагает разные “веса” или уровни яркости каждого цвета.
- Palettab — расширение для Chrome, которое показывает новую палитру цветов и шрифт на каждой вкладке.
- Swiss Style Color Picker — еще одна коллекция хороших цветовых палитр
Как подбирать палитры для визуализации данных
Цветовая палитра осени
