— Цветовой круг онлайн: Подбор цветов и генерация цветовых схем

Сочетания цветов, цветовые гармонии

Комплиментарные цвета (Complementary)

Аналоговые цвета (Analogous)
Монохроматические цвета (Monochromatic)
Триадные цвета (Triadic)
Квадратная и прямоугольная схема (Tetrads)
Составные цвета (Compounds, secondary)
Контрастные цвета (High Contrast)
Пентаграмма (Pentagram)
Illustrator’s Colour Harmonies | Tony Harmer’s Design Jungle.

Создайте цветовую схему из изображения в Adobe Color CC

Я хотел посмотреть, как просто создать схему из изображения. Я загрузил фотографию своего велосипеда, так как он содержит пару ярких цветов, и я хотел посмотреть, как сайт справился с этим. Как видно из изображения, все прошло хорошо. Он выбрал зеленый цвет, красный и угольный каркас.

Выбор меню «Цветовое настроение» слева позволил мне изучить различные варианты темы, включая «Яркий», «Приглушенный», «Глубокий», «Темный» или «Пользовательский». Цвета, выбранные Adobe Color CC для каждой настройки, были на месте. Если кто-то, как я, может это сделать, то любой может!

Немного литературы

Если вы хотите вникнуть поглубже и стать гуру в области колористики, то вот парочка полезных книг:

  • «Сочетание цветов на практике», Наоми Куно
  • «Искусство цвета», Иоханнес Иттен
  • «Диалектика мифа», Алексей Лосев (уровень «со звёздочкой» — для тех, кто хочет понимать всю глубину символизма цвета)

Культурный контекст

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

Танец дракона в Китае

Танец дракона в Китае

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

Слайд, чтобы править

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

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

Сделайте схему с Color CC

Так может ли кто-то, у кого нет художественных способностей, такой как я, создать схему? Что вы можете.

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

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

Сложные правила хороши при поиске дополнительных цветов. Shades выбирает четыре дополнительных оттенка вашего основного выбора, а Custom позволяет вам перемещать пять ползунков в любом месте на колесе.

Простота использования

Adobe Color CC полностью фирменный, если вы знакомы с другими продуктами Adobe. Конструкция плоская и простая с удобством в использовании. Основная идея – это лицевая сторона и центр страницы, которая ставит под угрозу большое цветовое колесо, образцы, ползунки и некоторые цветовые правила.

Вы можете вручную перетаскивать цветовое колесо, чтобы создавать новые цвета, просматривать цветовые схемы других людей, создавать схемы из загруженного изображения и многое другое. Это очень мощное веб-приложение, которое должен использовать каждый дизайнер. Я не склонен слишком лирично относиться к продуктам Adobe, потому что они очень дорогие, но Adobe Color CC бесплатна и очень, очень хороша в своих действиях.

Цвет как инструмент управления вниманием и настроением

Грамотное использование цветов улучшает юзабилити и повышает конверсию, помогает пользователям принимать решения. Но нужно помнить, что цвет — субъективная категория. Зачастую люди понимают цвета индивидуально и это зависит от их личного опыта. Кого-то желтый цвет в веб-дизайне  стимулирует к покупке, а кого-то будет раздражать. Поэтому чтобы создавать интуитивно понятные интерфейсы и не допускать ошибок, не стоит закапываться в психологию цветов, достаточно знать их популярные значения в UI.

Красный. Зачастую так маркируется ошибка в интерфейсе, важное предупреждение или невалидная отработка сценария. Красный отлично подходит для акцентирования внимания, поэтому его используют для скидок и актуальных предложений. Он часто ассоциируется с эмоцией недовольства, поэтому опции «Пожаловаться» и «Заблокировать пользователя» нередко имеют этот цвет.

Фрагмент интерфейса Telegram

Фрагмент интерфейса Telegram

Зелёный. Означает успешный результат, завершение процесса. Побуждает к действию, поэтому им часто маркируются кнопки «Зарегистрироваться» и «Купить».

Использование ваших схем в дизайне

Adobe Color CC отображает значения RGB для каждого выбранного цвета, которые вы можете использовать по своему усмотрению. Однако, если вы используете Illustrator, Photoshop или другой продукт Adobe, вы можете использовать схему напрямую.

Если вы вошли в систему со своим Adobe ID при создании схемы, вы можете использовать ее в другом продукте Adobe по своему усмотрению. Например, в Illustrator выберите «Окно», а затем «Цветовые темы». Сохраненные вами выборки из Adobe Color CC должны автоматически появиться в окне тем, чтобы вы могли их использовать напрямую. Просто добавьте образцы, чтобы сохранить их в Illustrator и перейти оттуда.

Adobe Color CC – фантастический ресурс для дизайнеров всех видов. Я не знаю ни одного другого приложения, которое было бы близко к простоте использования и мощной простоте Adobe Color CC. Учитывая, что его можно использовать бесплатно, даже если у вас нет других продуктов Adobe, я думаю, что это отличный ресурс!