6 инструментов для работы с цветом

Исследование

Мы провели глубокий анализ других тематических цветовых палитр, использующих схемы цветовых переходов —  исследовали палитры IBM Design, и Open-Color. (Заметка: Если вам интересно изучение других дизайн-систем, можно начать с Adele от UXPin). Цель исследования заключалась не в том, чтобы скопипастить их идеи, а скорее в том, чтобы «заглянуть за кулисы» и понять, каким образом принимаются решения по выбору того или иного цвета.

В процессе исследования мы фокусировались на следующем:

• Тон (Hue): Используется ли в каждой цветовой палитре одно значение тона? Или же значение тона меняется в пределах одной схемы цветовых переходов?

• Паттерн: подчиняется ли выбор значений какому-либо правилу? Если такое правило существует, применимо ли оно для других палитр?

• Насыщенность и яркость (светлота): Как работают насыщенность и яркость, когда каждое значение уменьшается или увеличивается в пределах схемы цветовых переходов?

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

Правила 60–30–10

Этот метод исходит из основного дизайна, но он идеально подходит для цифровых продуктов.  Правило 60% + 30% + 10% работает, потому что оно приносит ощущение баланса и помогает глазу плавно перемещаться от одной области CTA (call to action)  к другой, направляя пользователя через интерфейс.

Правило очень простое и звучит так:

60% — пространства предназначено для  основного цвета / цвета области;30% — это вторичный / поддерживающий цвет;10% — акцент и сопровождающий цвет.

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

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

Пример, для лучшего помимания правила  «60–30–10»:

Бонусный совет:

Также можно применять цвета в другом порядке, и это все равно будет работать.

Вторая версия: Обновление цветовой палитры

Когда мы решили исправить проблему последовательности значений контрастности, мы также решили проработать просьбу, единую почти для всех наших бизнес-единиц: темная тема, которая обычно используется для HUDs (Heads Up Displays) в Operations Centers и других средах мониторинга. В первом варианте цветовой палитры использовались сверхнасыщенные цвета на темном конце схемы перехода. Когда мы разместили эти цвета на черном фоне, они выглядели неуместно.

Для второй версии палитры мы дополнили предыдущую версию несколькими дополнительными шагами и новой цветовой кривой, благодаря которой тёмная тема стала возможной:

1. Создать серый паттерн

Как показано на этой диаграмме, «простым» решением может быть увеличение значений с использованием равномерного интервала между каждым значением. Я задал яркость 95% для темы-10 и 15% для темы-100. Для каждого шага мы уменьшали яркость на 9% по мере увеличения значений темы.

После тестирования некоторых ключевых цветов нашей системы мы поняли, что этот подход хорош для начала, но все же не идеален.

Рассмотрим тему-60: значение яркости составляет 50%, что не соответствует среднему уровню (AA), так как соотношение контрастности составляет 3,95:1. Этот результат заставил нас попробовать более проработанный паттерн «горная вершина»:

Мы поставили яркость темы-10 на 95%, яркость темы-60 на 45% и яркость темы-100 на 15%. Затем мы пробовали разные последовательности непоследовательных  увеличений значений, которые вместе на графике выглядели как «рост, пик и падение» и обнаружили, что если значения повышались одинаково, более низкие или более высокие значения значительно отличались от таковых в середине.

2. Создание цветового паттерна

У нас есть серая схема переходов, которая работает со всеми темами — теперь можно обратить внимание на тон и насыщенность. Подход, который мы использовали, похож на первую версию палитры , с одной большой разницей: мы использовали овальную кривую для уменьшения насыщенности более темных значений, чтобы они выглядели естественно в тёмном интерфейсе

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

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

В большинстве цветовых тем используются круговые схемы, но для красного, мадженты и бронзового используются овальные, потому что из-за значения яркости цветности, круговые узоры закрепляют насыщенность на 100%, что выглядит ужасно в тёмном интерфейсе.

Мой монитор довольно-таки большой и широкий

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

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

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

More resources

• The source code for the Playground app used in this article can be found on GitHub
• “The Components of Material Design” — A great presentation by Cameron Ketcham and Gautham Sajith at Android Dev Summit 2018, covering a brief history of Material Design and how to use Material Components for Android
• “Designing and building a real Android app using Material Tools & Components” — A presentation I gave at Droidcon Kenya and DevFest South Africa 2018, covering how I designed and built Rugby Ranker using the Material Theme Editor Sketch Plugin, Material Gallery and, of course, Material Components for Android
• Material Design Codelabs

Как подобрать цвет для проекта

Человеческий глаз видит 10 миллионов цветов. Из этих 10 миллионов вам нужно выбрать 1 цвет, который будет коррелировать с сайтом и брендом.

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

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

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

К счастью, подобрать цвет сегодня не так сложно:

• Возьмите за основу существующий дизайн. Если у вас есть логотип и цветовая тема, начните с нее, не переделывайте все с нуля.
• Не используйте цвета конкурентов. Это поможет вам отстраниться от них и не давать бесплатной рекламы.
• Помните про аудиторию. Сайт детского сада не должен напоминать похоронное бюро. Продумайте тон послания, которое вы хотите донести аудитории (радость, серьезность намерений и т.п).
• Не используйте клише. Помнить про запросы аудитории — хорошо, но необязательно раскрашивать сайт для девочек в розовый цвет. Отход от клише повысит доверие к вам.
• Выпишите слова. Если сложно подобрать цвет, выпишите слова, которые у вас ассоциируются с вашим брендом. Ассоциации помогут натолкнуть вас на правильный выбор цвета. Если все равно не получается, попробуйте загуглить значения цветов.

Можно черпать идеи у сайтов, которые вам нравятся:

Загрузите скриншот понравившегося сайта и узнайте его цветовую палитру. Подборка цветов от Адобе: https://color.adobe.com/ru/create/color-wheel/

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

Выберите гармоничный основной цвет.

Черпать вдохновение можно на Дриббле и Дизайниспирейшене можно посмотреть работы дизайнеров и заимствовать их цветовые палитры.

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

Создание цветовой палитры.

Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.
Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.
Яркость / Brightness — обозначает степень отличия цвета от белого или черного.

Теперь у вас должен быть HEX-код цвета. HEX-код состоит из трех пар цифр и может принимать значения от 0 до 9 и букв от A до F.

Первая цифра уточняет цвет, вторая — оттенок. Чем больше значение пар, тем светлее цвет:

В уже знакомым нам RGB и CMY значения цветов будут такими:

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

Есть несколько простых техник работы с кодом:

• Переставлять одну пару в разные места кода
• Удвоение первой цифры в первой паре и разделение на два остальные первые цифры
• Комбинирование цветов из фото

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

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

Реально вам нужно только 2 цвета:

• основной цвет (в нашем случае это #30c9e8),
• акцентный цвет.

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

Избегайте чистых цветов

«Чистые» оттенки — это те, которые расположены точно под 60°, 120°, 180°, 240°, 300° и 360°/0° на цветовом круге:

Давайте разберем пример, чтобы научиться определять “чистый” цвет. В HSV/HSB значение оттенка (hue) этого ярко-синего ⬤. равно 180°, значение насыщенности (saturation) — 67%, а значение яркости — 91%. Вы также можете проверить значения RGB: если хотя бы два значения совпадают, цвет — «чистый». Например, наш ⬤. — это rgb (77, 232, 232).
Чтобы ваши цвета выглядели более естественными и приятными для глаз читателей, вы можете либо уменьшить насыщенность чистых цветов, либо сделать их темнее. Если вы хотите получить яркие, насыщенные цвета, полагайтесь на смешанные цвета на расстоянии не менее 5-10° от чистых цветов.
На изображении выше красный, оранжевый, синий и зеленый имеют одинаковую насыщенность и яркость. Единственная разница — оттенок! Красный ⬤ (0°), синий ⬤ (240°) и зеленый ⬤ (120°) выглядят более красочно, чем оранжевый ⬤ (40°), светло-синий ⬤ (211°) и ярко-сине-зеленый ⬤ (170°). Почему бы тоже не выбрать их, ведь всем хочется яркой, красочной визуализации? Давайте разбираться.

Генераторы полезных цветовых палитр

28. Цветное приложение

В приложении «Цвет» есть функция увеличения, позволяющая получить большую сетку цветов. Он позволяет производить выборку цветов, определять значения Hex, RGB и HSLA, а также создавать цветовые палитры. Вы можете сохранить свои цвета и визуализировать их по-разному. Когда вы закончите с цветовыми палитрами, экспортируйте их на цветные панели Adobe и Mac.

29. Генератор цветовой палитры Colllor.

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

30. Плоские цвета пользовательского интерфейса

Flat UI Colors имеет набор из 14 цветовых палитр и предлагает 280 цветов для вашей презентации, дизайна и проектов. Что вам нужно сделать, так это скопировать / вставить шестнадцатеричный код прямо в таблицу стилей CSS или в Photoshop. В результате вы получаете несколько существующих плоских цветовых палитр.

31. Проверь мои цвета

Автор проекта «Проверь мои цвета» – Джованни Скала. Его главный девиз по созданию этого генератора цветовой схемы – видеть смесь цветов переднего и заднего плана всех элементов DOM и решать, обеспечивают ли они достаточный контраст при просмотре кем-то, у кого дефицит цвета.

32. Генераторы шестнадцатеричных цветовых схем

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

33. Цветной

В colormod вы просто выбираете один цвет из заданной области виджетов. Вы вводите начальное значение и получаете автоматическое преобразование. Это генератор цветовой схемы, который позволяет вам выбрать собственные цвета и получить цвета, соответствующие значениям RGB, HSV и Hex. Этот сверхлегкий генератор цветовой палитры превращается в самую быструю и совместимую палитру цветов DHTML.

34. Colr.org

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

35. Colorgrab

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

36. Грейбит

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

37. Контраст-А

Contrast-A – это дизайнер цветовых схем, который позволяет вам играть с цветовыми комбинациями и тестировать их в соответствии с рекомендациями по доступности для создания пользовательских цветовых схем. Он отображает результат для нормального зрения и имитирует цвета и результаты для различных типов цветового дефицита.

Как дизайнеры интерьера используют цветовой круг Иттена

Самым популярным инструментом считается цветовой круг Иттена. Он разделен на сегменты, оттенки цветов в которых меняются по законам спектрального разложения светового луча. Каждый сегмент разделен на зоны. Ближе к центру располагаются светлые, почти прозрачные оттенки. По краю круга – самые насыщенные цвета.

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

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

• желтый-фиолетовый;
• оранжевый-синий;
• красный-зеленый.

Это всегда беспроигрышные комбинации. Они считаются классикой и всегда хорошо воспринимаются человеком.

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

А вот три оранжевых сегмента вызывают ощущение осенней солнечной листвы. Сместив это соседство на один сегмент в сторону красного можно получить эффект жаркой пустыни.

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

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

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

Раздельно-комплементарная цветовая гармония

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

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

Дизайн цветовой палитры

Система тем в Mineral содержит серую схему (она используется во многих темах) и ещё несколько тематических схем. Когда мы говорим о «цветовой палитре», мы имеем в виду тематические схемы.

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

Как определить смену в теме за три простых шага

1. Базовый цвет базовый цвет — доминирующий цвет в темах; это тот цвет, который будет использоваться в основном в элементах интерфейса. Тема-60 всегда является базовым цветом для светлых шаблонов (белый текст на цвете темы), а тема-50 — базовым цветом для темных шаблонов тем (черный текст на цвете темы). Коэффициент контрастности этих двух цветов всегда 4,5:1 или выше.
2. Цвета рядом с базовыми: эти цвета будут использованы в ховерах, активных и фокусных состояниях базового цвета в элементах действия, таких как кнопки, ссылки и элементы форм.
3. Начальные и конечные цвета: эти цвета чаще всего используются как акцентные фоновые цвета, либо для добавления визуальной массы элементу интерфейса, как в светлых, так и в тёмных темах. Например, тема-10 (светлая) или тема-100 (темная) могут использоваться в качестве фона для выбранных элементов в выпадающем меню или в строке таблицы.

Правило 1: Разнообразие в яркости и в оттенках

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

Светло-голубой из палитры материального дизайна от Google: полноцветная версия, протанопия и оттенки серого.

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

По оси x — разные оттенки; по оси y — разные уровни яркости. Серые мордочки — люди, неспособные различать цвета; цветные мордочки — все остальные.

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

Цветовой круг: взаимодействие и основные комбинации

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

На самом деле все зависит от того, каких целей вы хотите добиться – создать выразительный и насыщенный контраст или умиротворяющую и спокойную атмосферу. В любом случае работа над цветовым кругом основана на принципах оппозиции и близости. Исходя из этого, выделяют пять ключевых цветовых сочетаний.

Монохромная (аналоговая) палитра

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

Так, рядом с желтым на цветовом круге расположены желто-зеленый и желто-оранжевый. Если идти по сектору от центра к краю круга, то таким образом можно собрать палитру более светлых (ближе к центру) и более темных (ближе к краю) тонов. В результате мы получаем две возможные комбинации — три оттенка желтого, один с зеленым, а другой с оранжевым подтоном, или триаду более темных, светлых и средних желтых тонов.

Монохромные палитры считаются самыми спокойными и сдержанными. Именно их рекомендуется использовать в помещениях с успокаивающей и расслабляющей атмосферой – в первую очередь, в детских и спальнях.

Дополнительные цвета

Это цвета, расположенные на цветовом круге точно напротив друг друга. Найти их очень просто: достаточно провести линию из интересующего вас цветового сектора ровно через центр круга. Например, зеленый дополняет красный, красно-оранжевый — сине-зеленый, а желтый — сине-фиолетовый.

Такие сочетания вам понадобятся, если вы хотите создать эффектный и выразительный интерьер. Однако нежелательно использовать дополнительные цвета в равных пропорциях: цвета будут подавлять друг друга и создавать ненужное зрительное расстройство. Идеальным решением будет выбрать один цвет в качестве основного, а второй – в качестве акцентного или на отдельных элементах интерьера.

Цветовая триада

Если вам не нужны резкие контрасты, но есть желание использовать выразительные цветовые сочетания, сделать это правильно вам поможет так называемая триада — так называют три цвета с достаточной контрастностью.

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

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

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

Цветовая тетрада (полихромная палитра)

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

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

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

Говоря обо всех этих сочетаниях, мы вовсе не имеем в виду исключительно яркие и чистые тона. Вы можете выбирать как более светлые и пастельные оттенки, так и более глубокие и темные оттенки, перемещаясь в пределах одного цветового сектора. Итак, при выборе синего тона вам доступны светло-голубой, темно-синий и классический деним. Однако имейте в виду: сочетающиеся с ними контрастные оттенки должны быть равноудалены от центра круга. Иначе будет диссонанс.

Заключение

Особая благодарность:

• CA Central Design TeamAlbert Tan, Aaron Sagray, Sun Young Han, Matthew Talebi

• Mineral UI Component Team: Mike Waite, Mike Holm, Kyle Gach, Brent Ertz, Victoria Vasys.

Быстрые и простые решения для цвета

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

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