VIDEMIND
Цвет Тренды цветаГид

Как собрать палитру: методика вместо цветового круга

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

Как собрать палитру: методика вместо цветового круга — графика VIDEMIND
VIDEMIND · generated
Содержание · 11
  1. Проблема цветового круга
  2. Пропорции
  3. Светлота важнее оттенка
  4. Нейтральные с температурой
  5. Проверка
  6. Отношения между цветами
  7. Ахроматика и когда она уместна
  8. Порядок сборки палитры
  9. Нейтральные — половина работы
  10. Проверки, которые стоит сделать до утверждения
  11. Что в итоге

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

Проблема цветового круга

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

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

Пропорции

Правило 60–30–10 — не эстетическая догма, а способ задать иерархию. Оно работает и в интерьере, и в графике, и в интерфейсе.

ДоляРольОбычно это
60%Фон, основной объёмНейтральный тон
30%Основной цветДоминанта палитры
10%АкцентНасыщенный цвет, точечно
Как собрать палитру: методика вместо цветового круга — графика VIDEMIND
VIDEMIND · generated

Светлота важнее оттенка

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

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

Палитра в цвете и в чёрно-белом: разброс по светлоте определяет работоспособность
Палитра в цвете и в чёрно-белом: разброс по светлоте определяет работоспособностьVIDEMIND · generated

Нейтральные с температурой

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

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

Нейтральная шкала, выведенная из основного цвета

050#F4F2EDФон
200#DED9D0Разделители
400#9A948AВторичный текст
700#3A3733Основной текст
900#12110FМаксимальный контраст

Проверка

Четыре теста, которые выявляют нерабочую палитру до внедрения.

  1. Обесцветьте: есть ли разброс по светлоте?
  2. Проверьте контраст текста на каждом фоне: не ниже 4,5:1.
  3. Посмотрите при слабом освещении: не сливается ли?
  4. Проверьте в симуляторе дальтонизма: различимы ли функциональные цвета?

Отношения между цветами

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

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

Как собрать палитру: методика вместо цветового круга — графика VIDEMIND
VIDEMIND · generated

Ахроматика и когда она уместна

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

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

Порядок сборки палитры

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

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

  • Роли: фон, поддержка, акцент, нейтраль, состояния (ошибка, успех, внимание).
  • Светлота: развести роли по шкале, а не по цветовому тону.
  • Оттенки: подобрать под уже заданную светлоту.
  • Проверка контраста: текст к фону не ниже 4,5:1.
  • Проверка в сером: перевести в оттенки серого и убедиться, что иерархия сохранилась.
Как собрать палитру: методика вместо цветового круга — графика VIDEMIND
VIDEMIND · generated

Нейтральные — половина работы

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

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

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

Проверки, которые стоит сделать до утверждения

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

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

Как собрать палитру: методика вместо цветового круга — графика VIDEMIND
VIDEMIND · generated

Что в итоге

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

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

Коротко

Почему цветовой круг плохо работает на практике?
Он описывает отношения оттенков, но ничего не говорит о светлоте и пропорциях, а именно они определяют, соберётся палитра или нет. Схема «дополнительные цвета» из круга регулярно даёт неработающие сочетания.
В каких пропорциях смешивать цвета?
Хорошая точка отсчёта — 60/30/10: основа, поддержка, акцент. Акцент работает, пока он один: три равных по площади акцента превращаются в фон.
Как проверить палитру до применения?
Перевести в оттенки серого. Если элементы слились, различие держалось только на цвете — такая палитра развалится при печати в одну краску и будет недоступна части читателей.
Продолжить тему · Тренды цвета

Как формируются тренды цвета

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

Нашли ошибку или неточность в атрибуции? Напишите нам

Обсуждение

Загружаем…

Только имя и мысль. Ссылки, разметку, код и номера телефонов журнал не публикует — учётных записей на сайте нет, и оставлять здесь ссылку бессмысленно.

0 / 1500