Вся правда о гармонии цвета
Гармония цвета – это в первую очередь приятное глазу сочетание цветов. Одним из первых этапов создания дизайна, будь то интерьер, сайт или другая графика является поиск подходящей цветовой палитры.
В данной статье я расскажу об основах теории цвета, какими бывают цветовые палитры, как правильно их выбирать для разных проектов, какие существуют на данный момент лучшие инструменты работы с цветом и многое другое. Путешествие в мир гармонии цвета начинается!
Содержание
- Теория цвета
- Главные правила гармонии цвета
- Цветовые схемы
- Монохромная цветовая схема
- Аналогавая цветовая схема
- Триадная схема
- Комплементарная схема
- Сплит-комплементарная схема
- Тетрадная схема
8 лучших инструментов для создания гармоничных цветовых палитр
- Color.adobe.com
- ColorScheme.ru
- Flatcolors.net
- MaterialPallete.com
- GetUIColors.com
- Canva.com
- Romanuke.com
- 0to255.com
- coolors.co
Теория цвета
Цвет имеет огромное значение в повседневной жизни. Он окружает нас всюду, заставляет обращать внимание на вещи или объекты, оповещает об опасности, создает настроение.
Понять насколько сочетается та или иная комбинация цветов, нам помогает теория цвета (колористика), разрабатываемая многими художниками и дизайнерами на протяжении веков.
Давайте разберем несколько основных понятий теории цвета, таких как:
- цветовой круг,
- тон,
- яркость,
-насыщенность.
Все мы знаем об основных цветах — красном, желтом, синем. Если их смешать получатся еще 3 цвета:
зеленый (желтый + синий);
оранжевый (желтый + красный);
фиолетовый (синий + красный).
После смешения полученных цветов с основными получатся еще цвета, затем еще и еще. Так образуется цветовой круг.
Тон — это характеристика цвета, определяющая его положение в цветовом круге. Называя цвета (красный, оранжевый, фиолетовый и другие), мы по сути называем их тон.
Насыщенность — это интенсивность цвета. Чем ближе цвет к серому, тем он менее насыщенный. Насыщенные цвета яркие, сочные, а ненасыщенные тусклые, приглушенные.
Яркость — это близость цвета к белому. Чем больше в изображении белого света, тем оно ярче и наоборот, чем больше черного, тем оно темнее.
Главные правила гармонии цвета
Ни для кого не секрет, что гармония цвета и правильное сочетание цветов – это одна из самых больных тем для дизайнеров. Опираясь на рассмотренные выше понятия разберем несколько важных правил гармонии цвета.
…Избегайте использовать чистые цвета в своих работах, это выглядит неестественно и уродливо.
…Варьируйте такими параметрами, как яркость и насыщенность.
Это нужно не только для того, чтобы получить более мягкие оттенки цветов, но и, чтобы подчеркнуть настроение изображения или анимации. Например, яркие и насыщенные цвета будут отражать позитивное настроение и, наоборот, тусклые и ненасыщенные – пессимистичное настроение.
Цвета вообще имеют огромное влияние на настроение человека. И это касается не только графики, но и дизайна интерьера.
…Излишек насыщенных цветов в изображении компьютерной графики может выглядеть ненатурально и раздражать.
Старайтесь использовать яркие насыщенный цвета, чтобы сделать акцент на важном.
… Правильно выбирайте тематику для ярких цветов.
Например, насыщенные и яркие цвета отлично смотрятся в мультфильмах, стиле киберпанк и так далее, а в других темах — нет. Например, при создании графики или анимации в ретро стиле или винтажном гармонично смотрятся приглушенные цвета.
Цветовые схемы
Теперь рассмотрим, какие схемы можно составить на основании цветового круга, чтобы получить гармоничное сочетание. И когда, каждая из них уместна.
Монохромная цветовая схема
(1 цвет разной насыщенности и яркости) подходит для одиночных изображений – позволяет почувствовать атмосферность и сконцентрироваться на деталях.
При использовании данной схемы нужно учесть, что иногда дизайн может быть условно монохромным. В этом случае основу составляет один цвет, а детали могут выбиваться из схемы.
Аналогавая цветовая схема
(классическая, цвета расположены рядом друг с другом) приятна глазу и создает спокойное, расслабленное настроение. Такое сочетание часто встречается в природе.
Существует расширенная аналоговая схема, когда цвета берутся через один на круге. Главный принцип — использование цветов, близких друг к другу, переходящих один в один.
Триадная схема
В такой схеме цвета равноудалены друг от друга. Она трудна в использовании и подходит для мультфильмов и сюрреалистичных картин. Способна создавать настроение. Например, базовые цвета круга — красный, желтый и синий — это один из вариантов классической триады.
пример триадой палитры
Комплементарная схема
В данной схеме цвета располагаются друг напротив друга. Она очень популярна, так как естественным образом приятна глазу. Обязательное условие! Один цвет должен быть доминирующим, как правило, более слабый. Комплиментарная схема — самая сильная и яркая, так как она создает контраст.
пример комплементарной цветовой схемы
Одним из традиционных сочетаний цветов по комплементарной схеме является голубой и оранжевый. Можно подобрать разные оттенки таких цветов, чтобы дизайн был ярким и оригинальным.
Сплит-комплементарная схема
Её еще называют «контрастная триада». В данном случае нужно выбрать один цвет, найти его противоположность и взять два цвета, расположенные рядом с ним на цветовом круге. Данная схема обычно дает больше творческой свободы и возможность создавать радостную и живую атмосферу. Свойственна природе.
пример сплит-комплементарной цветовой схемы
Тетрадная схема
Это по сути двойная комплементарная схема, где используются две пары противолежащих цветов не важно из какой части круга. Такой вариант хорош для переднего и заднего фона. Одна пара для переднего фона, вторая – для заднего. Нельзя использовать по 25% каждой краски. Основной – самый слабый цвет, остальные – вкраплять участками.
пример тетрадной цветовой схемы
Дополнительную информацию о гармонии цвета и цветовых схемах вы можете посмотреть на следующем видео.
8 лучших инструментов для создания гармоничных цветовых палитр
Итак, как я уже сказала, работа над любым проектом — дизайном интерьера, сайта или полиграфии, начинается с поиска необходимой комбинации цветов.
1. Color.adobe.com
Было бы странно, если бы такого инструмента у компании Adobe не было. Выбор палитры происходит на основании цветового круга. Вы можете применить разные варианты схем, указанные в списке слева и посмотреть какое сочетание цветов наиболее гармонично для вашего проекта.
Самое интересное кроется за кнопкой СМОТРЕТЬ — там вы можете найти готовые цветовые схемы и примеры их использования, тем самым подсмотрев, как в действительности смотрятся разные варианты палитр.
2. ColorScheme.ru
Тоже один из самых популярных сервисов для подбора цветовой палитры. Принцип работы такой же, как и в предыдущем случае. Вы выбираете необходимо цветовую схему, тон и меняете настройки оттенков, перемещая ползунки по цветовому кругу.
Инструмент позволяет выбрать не только цветовую схему, и на основании нее подобрать гармоничное сочетание, но и обладает следующими полезными функциями:
- Выбор цветовой модели (Безопасные цвета, оттенки серого, цветовая модель Pantone, цвета ниток-мулине и другие)
- Тонкая настройка схемы — редактирование каждого цвета. Его насыщенности и яркости.
- Просмотр, как будут видеть изображение в выбранной палитре люди с нарушением зрения (дальтонизм разной степени сложности и подобное).
- Как будет выглядеть веб-страница в выбранной палитре в темной и светлом режимах.
- Калькулятор для перевода цвета из одного режима в другой (из CMYK в RGB и т.д.)
3. Flatcolors.net
Инструмент для выбора цвета и палитры для популярного сейчас плоского дизайна — flat дизайна. Данный стиль имеет ряд особенностей, в том числе в выборе гармоничного сочетания цветов, поэтому отлично, что такой сервис, как flatcolors существует.
4. MaterialPallete.com
Сервис выбора цветовой палитры для популярного material дизайна. Сайт предлагает ограниченный набор цветов, используемый в данном стиле и возможность увидеть, как будет смотреться та или иная комбинация в интерфейсе приложения.
5. GetUIColors.com
Данный инструмент подходит для UI — дизайна, но может быть полезен и в других сферах. Он позволяет увидеть, как будет выглядеть белый текст на том или ином фоне.
6. Canva.com
Интересный инструмент для создания уникальных дизайн проектов Canva. Сервис расширил свой функционал до возможности создания и подбора гармоничных цветовых палитр.
Здесь вы можете:
- Посмотреть готовые варианты палитр
- Сгенерировать цветовую палитру на основании загруженного фото, таким образом заимствовать понравившуюся комбинацию цветов с чужого проекта, например, в интерьере.
- Использовать выбранную или сгенерированную цветовую палитру в готовых шаблонах Canva и сразу создать на их основании свой проект.
7. Romanuke.com
Инструмент так же известный под именем «In color balance» содержит постоянно обновляемую базу цветовых палитр, составленных на основании фото. Здесь вы можете не только подсмотреть гармоничные сочетания цветов, но и сортировать их по типам оттенков — холодные, теплые, пастельные цвета. А так же найти комбинацию цветов, выбрав два главных.
Интересным является также то, что на сайте есть описание к каждой палитре — какие чувства и настроение она дарит, где лучше использовать и так далее. Это может быть очень полезно при выборе цветов для интерьера.
8. 0to255.com
Интересный сервис для подбора оттенков любого цвета от самого яркого до самого темного. Такая возможность может быть полезна при создании цветовой палитры для проекта по правилу трех цветов.
Вы можете не только брать цвета из предоставляемой базы, но и задавать свои коды для поиска оттенков.
- coolors.co
Крутой инструмент для работы с цветом и не только. На сайте Coolors.co вы можете:
- Найти большое количество готовых цветовых палитр
- Создать собственную палитру цветов
- «Подсмотреть» цветовую палитру на любой фотографии
- Найти большое количество готовых красивых градиентов
- Найти цвет для текста, контрастный к фону
и многое другое.
Этот сайт — действительно незаменимый помощник в работе с цветом. Многие его функции доступны бесплатно.
Ну вот пожалуй и все. Теперь вы знаете всю правду о гармонии цвета. Не бойтесь экспериментировать и получать удовольствие от процесса, возможно вы найдете что-то лучше, чем классические палитры.