Теория цвета для дизайнеров: система, лежащая в основе каждой удачной цветовой палитры.
Теория цвета для работающих дизайнеров. Цветовое колесо, гармонии, восприятие, психология, доступность и то, как современные дизайн-системы превращают все это в готовый продукт.
Теорию цвета преподают как обзор истории искусств, а применяют на практике как инженерное дело в строительстве. Цветовые круги, гармонии, дополнения. Теплые и холодные тона.
«Красный означает страсть». Это те артефакты, которые большинство дизайнеров получают в школе, и почти ничто из этого не выдерживает контакта с реальным интерфейсом продукта.
Работающим дизайнерам на самом деле нужна система уровней. Многоуровневая система, которая начинается с того, как глаз воспринимает цвет, проходит через цветовой круг и его гармонии, через контраст и иерархию, через психологию и культуру, через построение палитры и, наконец, до токенов и дизайн-систем, которые обеспечивают выпуск работы. Пропустите один слой, и палитра будет хорошо выглядеть в Figma, но развалится в процессе производства.
Этот документ — вся эта система уровней. У каждого слоя есть свой собственный документ Brainy для более глубокого изучения. Здесь мы их соединяем.
Что на самом деле требует от вас решить теория цвета
Теория цвета — это не набор эстетических правил, это совокупность зрения, восприятия и систематического мышления, которые должны работать вместе, прежде чем палитра будет выпущена.
Вкратце: человеческое зрение — это нечто странное, цвет — это физическое явление, и дизайнеры должны создавать результаты, которые будут работать для миллионов людей на сотнях устройств в десятках контекстов. Теория — это словарь, который мы используем для рассуждений об этой проблеме. Это не набор заповедей. Это набор общих концепций, которые позволяют перейти от «это выглядит неправильно» к «акцент конкурирует с фоном, и контраст недостаточен при 14 пунктах».
Столб цветов намеренно построен. Каждый слой отвечает на отдельный вопрос.
| Слой | Вопрос, на который он отвечает |
|-------|-------------------------|
| Восприятие | Как глаз на самом деле видит этот цвет в контексте? |
| Цветовой круг | Каково соотношение оттенков между этими цветами? |
| Гармония | Связаны ли эти цвета или конфликтуют? |
| Контраст | Можно ли это прочитать, увидеть, нажать? |
| Палитра | Какие цвета принадлежат этому бренду или продукту? |
| Система | Как эти цвета последовательно применяются в масштабе? |
| Доступность | Подходит ли каждая пара в системе каждому пользователю? |
Каждый слой является несущим. Палитра, разработанная без учета восприятия, не работает в контексте. Система, созданная без учета доступности, не проходит проверку.
Гармония, выбранная без логики палитры, не работает в масштабе. Слои накапливаются, поэтому правильный выбор цвета приносит накопительный эффект.
Колесо, гармонии и для чего они на самом деле нужны
цветовой круг — это модель соотношения оттенков, а гармонии — это упрощенные способы выбора пар и групп, которые глаз воспринимает как связанные.
Большинство дизайнеров изучают цветовой круг как треугольники «первичный-вторичный-третичный» и больше никогда его не используют. Это пустая трата времени. Цветовой круг — это самый быстрый способ понять, какие цвета сочетаются друг с другом, а какие конфликтуют, что важно каждый раз, когда вы добавляете новый цвет в палитру, диаграмму или знак.
Четыре гармонии оправдывают себя в работе над продуктом и брендом.
Дополнительные цвета
Противоположные цвета на цветовом круге. Синий и оранжевый, красный и зеленый, фиолетовый и желтый. Дополнительные цвета создают максимально возможное визуальное напряжение между двумя оттенками.
Это отлично подходит для мгновенного воздействия (плакат, главное изображение, спортивная форма) и ужасно для длительного использования в интерфейсе, поэтому вы почти никогда не увидите чисто комплементарных палитр продуктов. В пользовательском интерфейсе комплементарные цвета смягчаются: один оттенок доминирует, другой выступает в качестве сдержанного акцента.
Аналогичные цвета
Соседние цвета на цветовом круге. Небесно-голубой, синий, сине-фиолетовый. Аналогичные палитры создают ощущение целостности и спокойствия.
Они являются основой большинства современных цветовых решений брендовые системы. Опасность заключается в том, что они могут казаться монотонными, если между оттенками недостаточно контраста по тону. Аналогичные решения работают, когда вы рассматриваете цветовая палитра как семейство, а не как набор конкурирующих цветов.
Триадические и расщепленно-комплементарные: недооцененная пара
В дизайнерских школах основное внимание уделяется комплементарным и аналоговым цветам. Следующие две гармонии обсуждаются реже и часто оказываются более полезными для работающих дизайнеров.
Триадические
Три оттенка, равномерно распределенные по цветовому кругу. Красный-желтый-синий. Оранжевый-зеленый-фиолетовый. Триадические палитры создают ощущение игривости и энергии, поэтому они встречаются в детских брендах, спорте и развлечениях.
В дизайне продукции чистая триадическая палитра встречается редко, потому что ее сложно сбалансировать. Палитры, вдохновлённые триадами (один доминирующий оттенок, два других приглушённых), встречаются повсюду.
Раздельно-комплементарная цветовая гамма
Один оттенок плюс два оттенка, смежных с его комплементарным. Синий плюс жёлто-оранжевый и красно-оранжевый. Раздельно-комплементарная гамма сохраняет большую часть контраста комплементарной, но с меньшим напряжением. Это недооценённая гармония, которая проявляется во многих хорошо реализованных системах брендинга, если присмотреться.
Гармонии — это инструменты, а не ответы. Вы не выбираете палитра бренда, говоря: «Давайте сделаем триаду». Вы используете гармонии, чтобы рассуждать о предлагаемых комбинациях и выявлять те, которые уже работают.
--
Восприятие всегда превосходит теорию
Один и тот же красный цвет на одной и той же кнопке воспринимается как срочный на нейтральной странице, как шумный на оранжевой странице и как невидимый на тёмно-красной странице, и ничто из этого не объясняется цветовой палитрой.
Контекст — это множитель силы в цвете. Цвет не имеет фиксированного значения, фиксированной яркости или фиксированной читаемости. Он связан с тем, что находится рядом, с тем, что было на экране секунду назад, с тем, на какой дисплей смотрит пользователь, и с тем, какой свет на этот дисплей падает. Теория без восприятия — это теория в вакууме.
Стоит знать названия трёх эффектов восприятия.
Одновременный контраст. Один и тот же серый цвет выглядит светлее рядом с чёрным и темнее рядом с белым. Следствие: выбранный вами фирменный цвет на белом фоне студии будет восприниматься совершенно иначе на тёмном главном экране. Необходимо тестировать цвета в контексте их производства, а не изолированно.
Хроматическая адаптация. Глаз адаптируется к окружающему цвету за 500 мс или меньше. Страница, которая провела пять секунд на тёплом оранжевом главном экране, прежде чем прокрутиться до нейтральной области контента, будет ощущаться немного холоднее, чем эта область контента на самом деле. Восприятие пользователя изменилось незаметно для него.
Кластеризация значений. Глаз группирует элементы схожей яркости как связанные, а схожей темноты — как отдельные. Так работает иерархия. В сильном дизайне контраст значений используется больше, чем контраст оттенков, потому что именно значение визуальной системы обрабатывается в первую очередь.
Психология цвета: доказательства против суеверий
Психология цвета реальна, но большая часть того, что называют психологией цвета, — это переработанные мифы, поэтому дизайнерам необходимо отделять доказательства от фольклора.
Существуют реальные исследования, например, исследование узнаваемости бренда в Университете Лойолы (цвет влияет на узнаваемость бренда до 80%), влияние насыщенности на воспринимаемую срочность, предпочтения темного режима и культурные ассоциации, связанные с цветом. Это полезно. Также существует множество постов в блогах, утверждающих, что «красный цвет увеличивает конверсию на 21%», которые рассыпаются при малейшем анализе. Это бесполезно.
Быстрый тест: любое утверждение в области психологии цвета, не учитывающее контекст, культуру или аудиторию, является суеверием. Значение цвета всегда контекстуально. Зеленый цвет в финтех-индустрии США ассоциируется с деньгами, а в сфере оздоровления — с природой, и оба утверждения верны в своем контексте.
Для полного анализа того, что реально, что является переработанным и как на самом деле применять психологию цвета в работе над брендом и продуктом, в статье психология цвета в дизайне представлена научно обоснованная концепция.
--
Почему правила пропорций перестали работать в масштабах продукта
правило 60-30-10 и его аналоги решили проблему одной поверхности, а дизайн продукта — это не одна поверхность.
Дизайн интерьеров изобрел правило 60-30-10, чтобы ответить на вопрос «сколько каждого цвета должно быть на стенах, мебели и акцентах». Это четко соответствует помещению. Это не подходит для цифрового продукта, имеющего сотни поверхностей, десятки состояний, светлый и темный режимы, а также пользователей на самых разных устройствах.
Современная цветовая модель продукта отказалась от пропорций для ролей. Поверхность, контент, акцент, состояние, семантика. Каждая роль получает дизайн токен, который преобразуется в различное исходное значение для каждой темы. Это замена модели 60-30-10, и это единственное, что масштабируется.
Подробное объяснение того, почему пропорции перестали работать и как выглядят системы токенов на основе ролей на практике, содержится в статье Правило 60-30-10 нарушено..
Доступность теперь является частью теории цвета
WCAG и АПКА перевели доступность из разряда «то, что проверяется отделом контроля качества в конце» в разряд свойств самой цветовой системы.
Долгое время доступность была отдельной темой для обсуждения. Дизайнеры выбирают палитру из эстетических соображений, в конце проверяют соотношение сторон, что-то корректируется, и все двигаются дальше. Такой рабочий процесс не масштабируется. Каждая выпущенная дизайн-система теперь кодирует доступность на уровне токенов, а это значит, что сама палитра должна быть разработана с учетом коэффициент контрастности и пороговых значений восприятия с самого начала.
Вкратце: WCAG 2.2 AA — это минимальный уровень соответствия (соотношение сторон основного текста 4,5:1, соотношение сторон крупного текста и нетекстовых элементов интерфейса 3:1). APCA — это алгоритм восприятия, который лучше коррелирует с фактической читаемостью и предлагается для WCAG 3. Реальные продукты ориентированы на оба стандарта.
Полный рабочий взгляд дизайнера на соотношения сторон WCAG, APCA и токенизацию контраста в дизайн-системах описан в документе доступный цветовой контраст, охватывающем весь процесс от начала до конца.
Создание палитры: рабочий набор цветов для дизайнера
Палитра, которая работает и масштабируется, создается слой за слоем, а не выбирается за один раз.
Работающий процесс проходит в продуманной последовательности. Каждый слой ограничивает следующий, именно так вы сохраняете целостность палитры, а не скатываетесь к набору отдельных цветовых решений.
-
Начните с нейтральной шкалы. Создайте от 8 до 12 ступеней серого (или почти серого, часто слегка смещенного в сторону цветовой температуры бренда). Большая часть реального интерфейса состоит из нейтральных цветов. Это основа, на которой держится каждый последующий слой.
-
Выберите акцентный цвет бренда. Один основной цвет, то, что читатель ассоциировал бы с брендом, если бы увидел его отдельно. Сдержанность здесь – залог успеха. Оставьте акцентный уровень для моментов, связанных с брендом, основных действий и важных сигнальных элементов.
-
Добавьте семантические цвета. Успех, предупреждение, критическая информация, информация. Это функциональные, а не декоративные элементы, и они должны работать как в светлом, так и в темном режиме, не передавая индивидуальность бренда. Рассматривайте их как вспомогательные средства, а не как элемент оформления.
-
Расширьте до уровня состояний. Наведение, фокус, нажатие, отключение, выбор. Обычно они наследуются от других уровней (более темный акцент для наведения, приглушенный нейтральный для отключения), но являются собственными токенами.
-
Токенизуйте все. Каждая пара элементов, которая используется в продукте, должна иметь название роли.
text-on-accent,bg-subtle,border-default. Если дизайнер может использовать базовый цвет без токена, палитра уже «протекает». -
Проверяйте восприятие, а не только математические расчеты. Сначала коэффициенты WCAG, затем оценки APCA, а потом реальные тесты: режим оттенков серого, тест на косоглазие, предварительный просмотр при слабом освещении, пятисекундные реакции людей, не работающих над брендом.
-
Выпускайте темный режим как параллельный набор токенов. Не фильтр. Не инверсия. Правильная параллельная палитра, которая преобразует одни и те же токены в разные значения.
Создавайте по порядку, а не за один раз
Порядок имеет значение, потому что нейтральные цвета выполняют основную работу на любой странице, и дизайнеры, которые начинают с акцентный цвет, в итоге строят остальную часть палитры вокруг одного решения, которое может оказаться несостоятельным. Начните со спокойного слоя. Добавьте громкий слой в самом конце.
--
Системы дизайна как прикладная теория цвета
Лучшим справочным материалом по теории цвета сегодня является не учебник, а общедоступная документация по системам дизайна брендов, выпускающих продукцию в больших масштабах.
Эти системы включают каждый слой стека в настройки по умолчанию. Они также бесплатны, открыты и поддерживаются людьми, которые ежедневно занимаются разработкой цветовой гаммы для продуктов.
Material Design 3
Смотрите трансляцию в прямом эфире на m3.material.io
Material 3 — наиболее явно демонстрирующий теорию цвета как прикладную систему. Каждая роль имеет парный аналог on- (текст/иконки, которые располагаются поверх этой роли), шкалы основаны на оттенке-хроматограмме-тоне, а не на HSL, и вся система построена таким образом, чтобы динамически создавать темы на основе одного исходного цвета.
Что из этого следует: паттерн on-. Когда дизайнер выбирает primary для кнопки, система уже знает, какого цвета должен быть текст на этой кнопке. Доступность и теория контраста заложены в саму систему наименования.
Цвета Radix
Смотрите трансляцию в прямом эфире на radix-ui.com
Radix использует 12-ступенчатую шкалу для каждого оттенка, где каждая ступень соответствует определенной роли (фон приложения, ненавязчивый фон, элемент пользовательского интерфейса, при наведении курсора, фокус, активный, сплошной, текст, высококонтрастный текст). По сути, это аналог цветовая гармония, прикрепленный к шкале контраста. Дизайнеры обращаются к 11-й ступени, когда им нужен высококонтрастный текст, зная, что он пройдет проверку AA по сравнению с более низкими ступенями.
Что из этого следует: нумерованная шкала. Присвоение каждой ступени шкалы определенной роли устраняет спор «какой серый цвет использовать» из каждого обзора дизайна.
Adobe Spectrum: Перцептивная однородность в масштабе
Material и Radix решают проблему цвета на уровне ролей. Adobe идет дальше, строя сами шкалы на основе перцептивных моделей, так что контрастные соотношения сохраняются при смене оттенков.
Смотрите прямую трансляцию на spectrum.adobe.com
Spectrum использует перцептивно однородные шкалы, так что два токена с одинаковым номером шага имеют одинаковый визуальный вес для каждого оттенка. Это означает, что тема может меняться от синего к оранжевому без нарушения контраста, поскольку перцептивные соотношения зафиксированы на уровне шкалы.
Что из этого следует: перцептивная однородность. Если ваша шкала построена на перцептивных моделях, таких как OKLCH или HSLuv, доступность становится переносимой между темами бренда, а не чем-то, что нужно перепроверять для каждого нового цвета.
Часто задаваемые вопросы
Как дизайнеру на самом деле изучить теорию цвета?
Прочитайте весь набор инструментов сверху вниз (восприятие, цветовой круг, гармония, контраст, палитра, система), а затем примените его по порядку в реальном проекте. Теория без применения забывается через неделю. Теория, примененная к готовой палитре, запоминается, потому что обратная связь мгновенная. Начните с чтения книги Йозефа Альберса «Взаимодействие цвета» для изучения восприятия, потратьте полдня на изучение документации Radix Colors по применению контрастных лестниц и создайте реальную палитру, используя приведенный выше набор инструментов.
Нужно ли мне знать науку или я могу просто использовать инструменты?
Вы можете выпустить продукт, не зная физики света или биологии колбочковых клеток. Вы не можете выпустить продукт, не зная восприятия, контраста и системного мышления, основанного на ролях.
Инструменты занимаются математикой. Дизайнер занимается принятием решений. Дизайнер, который полностью полагается на инструменты, — это дизайнер, который не может определить, когда инструменты не работают (а это часто случается, особенно в случае математических расчетов WCAG 2).
Какую самую большую ошибку совершают начинающие дизайнеры при работе с цветом?
Выбор акцента в первую очередь. Акцент — это самый яркий цвет в палитре, и построение остальной части палитры вокруг одного яркого решения почти всегда приводит к созданию яркой палитры.
Начните с нейтральных оттенков. Пусть акцент будет последним, что вы определитесь. Вы всегда можете заменить акцент позже, если остальная часть палитры будет правильной.
--
Теория цвета — это не факультативный, а эмбиентный аспект
Теория цвета — это та часть дизайна, о которой никто не спорит, и которую применяют все, знают они об этом или нет.
Дизайнер, который выбирает «этот коралловый, он кажется правильным», применяет теорию цвета. Менеджер по продукту, который спрашивает «можно ли сделать кнопку более выразительной», задает вопрос по теории цвета. Пользователь, который говорит «эта страница выглядит загроможденной», сообщает о нарушении контраста значений.
Теория уже в обиходе. Вопрос в том, работаете ли вы на её основе осознанно или реагируете на неё постфактум.
Работа с этим стеком делает невидимое видимым. Вы перестаёте выбирать цвета и начинаете разрабатывать палитры. Вы перестаёте выбирать оттенки и начинаете проектировать системы. Вы перестаёте гадать о доступности и начинаете выпускать продукт.
Результат накапливается. Палитра, разработанная с помощью этого стека, обеспечивает чистый ребрендинг, чистый переход к тёмным тонам, чистое масштабирование и чистое прохождение аудитов. Палитра, выбранная на основе атмосферы, не делает ничего из этого и каждый раз, когда что-то из этого имеет значение, обходится команде впустую.
Изучите стек. Работайте с этим стеком. Выпускайте продукт с помощью этого стека.
Want a color system that actually works end to end? Brainy builds palettes from perception to tokens with accessibility baked in.
Get Started
