Содержание · 11
Правило доминанты, роль нейтральных, работа со светлотой и проверка на доступность. Практический способ собрать палитру, которая работает.
Проблема цветового круга
Схемы вроде комплементарной или триадной дают формально корректные, но безжизненные сочетания: они оперируют только оттенком, игнорируя светлоту и насыщенность, которые определяют, будет ли палитра работать.
Практика показывает: удачные палитры почти всегда строятся на одной доминанте и большом количестве нейтральных, а не на нескольких равноправных цветах.
Пропорции
Правило 60–30–10 — не эстетическая догма, а способ задать иерархию. Оно работает и в интерьере, и в графике, и в интерфейсе.
Светлота важнее оттенка
Проверьте палитру в чёрно-белом виде: если цвета превращаются в одинаково серые пятна, композиция развалится независимо от того, насколько удачны оттенки.
Хорошая палитра имеет разброс по светлоте: как минимум один очень светлый тон, один очень тёмный и несколько средних.
Нейтральные с температурой
Чистый серый в палитре почти всегда выглядит безжизненно. Нейтральные с примесью основного цвета — тёплые или холодные — создают ощущение продуманности.
Практический приём: возьмите основной цвет и получите из него шкалу нейтральных, сильно снизив насыщенность и меняя светлоту.
Нейтральная шкала, выведенная из основного цвета
Проверка
Четыре теста, которые выявляют нерабочую палитру до внедрения.
- Обесцветьте: есть ли разброс по светлоте?
- Проверьте контраст текста на каждом фоне: не ниже 4,5:1.
- Посмотрите при слабом освещении: не сливается ли?
- Проверьте в симуляторе дальтонизма: различимы ли функциональные цвета?
Отношения между цветами
Классические схемы — комплементарная пара напротив друг друга на круге, триада из трёх равноудалённых, аналоговая группа из соседних — описывают отношения, а не рецепты. Пользы от них ровно столько, сколько от знания, что противоположные цвета усиливают друг друга: комплементарная пара в равных долях даёт вибрацию на границе и почти всегда требует, чтобы один из цветов был приглушён или занимал мало места.
Практически важнее теплохолодность. Любой оттенок можно сдвинуть к тёплому или холодному, не меняя названия, и палитра держится тогда, когда этот сдвиг у всех цветов один: тёплый серый рядом с холодным белым читается как грязь, хотя по отдельности оба хороши. Проверять это проще всего на нейтральных — они выдают несогласованность раньше акцентов.
Ахроматика и когда она уместна
Ахроматическая схема — чёрный, белый и серые без примеси цвета — единственная, которая не может рассыпаться по оттенку: рассыпаться там нечему. Вся работа уходит в светлоту и фактуру, и потому такая палитра требует материалов: в интерьере она держится на разнице поверхностей, в графике — на плотности набора и полях.
Добавление одного цвета превращает ахроматику в самую надёжную из акцентных схем: нейтральное поле не спорит с акцентом, и его можно взять любым. Это же объясняет, почему чёрно-белые системы так живучи в айдентике — они переживают смену акцентного цвета без переделки.
Порядок сборки палитры
Работающая последовательность начинается не с цвета, а с ролей. Сначала определяется, что должно быть фоном, что поддержкой, что акцентом и что нейтралью; затем задаётся светлота каждой роли; и только в последнюю очередь выбираются оттенки. При обратном порядке — сначала красивые цвета, потом их применение — палитра почти всегда рассыпается.
Причина в том, что различие ролей держится на светлоте, а не на оттенке. Два цвета одинаковой светлоты не образуют иерархии, какими бы разными они ни казались на круге.
- Роли: фон, поддержка, акцент, нейтраль, состояния (ошибка, успех, внимание).
- Светлота: развести роли по шкале, а не по цветовому тону.
- Оттенки: подобрать под уже заданную светлоту.
- Проверка контраста: текст к фону не ниже 4,5:1.
- Проверка в сером: перевести в оттенки серого и убедиться, что иерархия сохранилась.
Нейтральные — половина работы
Палитру обычно обсуждают по акцентам, а видно её по нейтральным: именно они занимают большую часть площади. Нейтраль с примесью того же оттенка, что и акцент, собирает схему воедино; чистый серый рядом с тёплым акцентом читается как случайный и делает всю палитру дешевле.
Практический приём — строить нейтральные не от чёрного, а от основного цвета: добавлять к нему серый, а не наоборот. Тогда в схеме появляется общий подтон, который трудно объяснить, но легко заметить при сравнении.
Палитру обсуждают по акцентам, а видно её по нейтральным: именно они занимают большую часть площади.
Проверки, которые стоит сделать до утверждения
Первая — в оттенках серого: если элементы слились, различие держалось только на цвете, и часть читателей его не увидит. Вторая — на реальном носителе: экранный оттенок и печатный расходятся, а сложные приглушённые цвета расходятся сильнее всего. Третья — в пропорции: залить палитру не равными квадратами, а реальными площадями макета.
Последняя проверка меняет решение чаще прочих. Цвет, выглядевший идеально в виде плашки, на большой площади оказывается тяжёлым, а акцент, казавшийся ярким, на пяти процентах площади теряется вовсе.
Что в итоге
Работающая палитра — это доминанта, нейтральная шкала и минимум акцента, а не набор равноправных цветов.
Проверяйте разброс по светлоте в чёрно-белом виде: это единственный тест, который предсказывает результат надёжно.
Коротко
- Почему цветовой круг плохо работает на практике?
- Он описывает отношения оттенков, но ничего не говорит о светлоте и пропорциях, а именно они определяют, соберётся палитра или нет. Схема «дополнительные цвета» из круга регулярно даёт неработающие сочетания.
- В каких пропорциях смешивать цвета?
- Хорошая точка отсчёта — 60/30/10: основа, поддержка, акцент. Акцент работает, пока он один: три равных по площади акцента превращаются в фон.
- Как проверить палитру до применения?
- Перевести в оттенки серого. Если элементы слились, различие держалось только на цвете — такая палитра развалится при печати в одну краску и будет недоступна части читателей.
Как формируются тренды цвета
Кто и как определяет цвета сезона, насколько это самосбывающееся пророчество и стоит ли следовать таким прогнозам в проектах.ДальшеПосмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…