Как подобрать цветовую палитру для дизайна
Рабочая палитра начинается не с набора красивых оттенков, а с задачи: что человек должен прочитать, заметить и сделать. Выберите нейтральный фон и текст, один основной цвет, один акцент и служебный оттенок, назначьте каждому роль и проверьте сочетание на реальном макете и контрасте.
Начните с задачи, а не с любимого цвета
Один и тот же оттенок может выглядеть уместно в упаковке, мешать чтению в интерфейсе и теряться в презентации. До выбора цвета запишите четыре условия:
- что создаётся: сайт, карточка, презентация, упаковка или печатный материал;
- кто будет смотреть и в какой ситуации;
- какой элемент должен быть первым, вторым и третьим по вниманию;
- какие ограничения уже есть: фирменный цвет, фон фотографии, требования доступности или печати.
Прилагательные вроде «современный», «дорогой» и «яркий» слишком широки. Превратите их в проверяемое условие: например, «основной текст читается на светлом фоне, акцентная кнопка заметна, а фотографии товара остаются главным изображением».
Цвет не заменяет композицию. Если все элементы одинакового размера и плотности, добавление нескольких ярких оттенков только усиливает визуальный шум.
Пять функциональных ролей цвета
Для первого макета удобно собрать палитру не из пяти равноправных оттенков, а из пяти ролей.
| Роль | Для чего нужна | Как проверить |
|---|---|---|
| Фон | Основная поверхность и пространство вокруг контента | Не спорит с текстом и изображениями |
| Основной текст | Заголовки и обычный текст | Достаточный контраст и комфортное чтение |
| Основной цвет | Идентичность, крупные смысловые области | Повторяется последовательно, но не заполняет всё |
| Акцент | Главное действие или небольшой важный сигнал | Используется редко и не конкурирует сам с собой |
| Служебный | Границы, вторичный фон, подписи и состояния | Поддерживает структуру, а не создаёт новую тему |
Количество оттенков внутри роли может увеличиться позднее: у основного цвета появятся светлая и тёмная версии, у интерфейса — цвета успеха и ошибки. Но сначала должна работать минимальная система.
Пошаговая сборка палитры
Выберите фон и текст
Начните с самой большой площади и самого частого элемента. Для светлого макета это может быть тёплый почти белый фон и тёмный графитовый текст. Чисто белый и чисто чёрный допустимы, но не обязательны.
Добавьте основной цвет
Свяжите его с задачей и контекстом, а не с универсальной таблицей «значений цвета». Проверьте оттенок на крупной области, маленькой иконке и рядом с изображением.
Назначьте один акцент
Он должен выделять главное действие или один тип информации. Если акцент появляется в каждом блоке, он перестаёт быть акцентом.
Добавьте служебный оттенок
Используйте его для границ, спокойных подложек и вторичных элементов. Он должен поддерживать фон и текст, а не формировать ещё один центр внимания.
Проверьте роли на макете
Разместите реальный заголовок, абзац, кнопку, изображение и вторичный блок. Образцы цветов без содержания не показывают, выдержит ли палитра настоящую иерархию.
Как использовать цветовой круг
Цветовой круг помогает найти отношения между оттенками, но не принимает решение за дизайнера.
- Монохромная схема использует светлые и тёмные варианты одного тона. Её легко сделать цельной, но акцент может оказаться слабым.
- Аналоговая схема соединяет соседние тона. Она обычно спокойна, если различия по светлоте достаточны.
- Комплементарная схема строится на противоположных тонах. Она даёт сильный контраст, поэтому один цвет лучше сделать доминирующим, второй — редким акцентом.
- Разделённо-комплементарная схема заменяет один противоположный цвет двумя соседними. Возможностей больше, но контролировать иерархию сложнее.
Не назначайте каждому цвету одинаковую площадь. Схема показывает связь оттенков, а композиция определяет их долю и роль.
Проверьте контраст и доступность
Читаемость зависит прежде всего от разницы светлоты между текстом и фоном, а не от названий цветов. В критерии WCAG 2.1 минимального контраста текста указано соотношение не ниже 4,5:1 для обычного текста и 3:1 для крупного текста, с оговорёнными исключениями. Не округляйте пограничное значение вверх и проверяйте реальные пары перед публикацией.
- проверьте основной текст, подпись, ссылку и текст на кнопке отдельно;
- не передавайте смысл только цветом: добавьте подпись, форму или значок;
- оцените макет в оттенках серого — иерархия должна сохраняться;
- проверьте состояния наведения, фокуса, ошибки и недоступного элемента;
- смотрите макет на реальном экране и при обычном размере текста.
Удачный контраст одной пары не делает доступной всю палитру. Например, тёмный текст может хорошо читаться на фоне, а белая надпись на основном цвете — уже нет.
Пример палитры из пяти ролей
Представим лендинг небольшой мастерской предметов для дома. Задача — создать спокойный фон, сохранить читаемость каталога и выделить одно действие «Выбрать коллекцию».
| Роль | Пример кода | Применение |
|---|---|---|
| Фон | #F7F4ED | Основная поверхность страницы |
| Текст | #1F2933 | Заголовки и абзацы |
| Основной | #2F6F68 | Навигация, крупные плашки, выделения |
| Акцент | #C96F3B | Главная кнопка и один важный маркер |
| Служебный | #D8DED9 | Границы и вторичные подложки |
Эти коды — учебная отправная точка, а не готовая палитра для любого бренда. Сначала проверьте контраст каждой текстовой пары. Затем разместите фотографии товара: если они тёплые и насыщенные, акцент может начать конкурировать с ними. В таком случае уменьшите его площадь или насыщенность, а не добавляйте шестой яркий цвет.
Было: голубой фон, фиолетовый заголовок, зелёная кнопка, оранжевые иконки и красные подписи. Исправление: вернуть нейтральный фон и тёмный текст, выбрать зелёный основным, оставить оранжевый только для главной кнопки, а подписи и границы перевести в нейтральный служебный оттенок. Смысл сохраняется, центров внимания становится меньше.
Как сохранить и передать палитру
Запишите не только коды, но и правила применения. Для цифрового макета сохраните HEX или подходящий цветовой формат, для печати согласуйте рабочее цветовое пространство и пробу с исполнителем. Не переносите значения между средами механически: экран излучает свет, а печать зависит от бумаги, красок и профиля.
Минимальная карточка палитры должна содержать:
- название и код каждого оттенка;
- его функциональную роль;
- разрешённые пары текста и фона;
- примеры главной и вторичной кнопки;
- правило использования акцента;
- версию и дату, если система развивается.
Финальная проверка на реальном макете
- Посмотрите на экран издалека: один ли главный акцент виден первым.
- Уберите цвет: понятны ли заголовок, текст и действие по форме и размеру.
- Проверьте все текстовые пары инструментом измерения контраста.
- Замените фотографию на другую типичную: палитра не должна рассыпаться.
- Оцените светлую и тёмную сцену, если обе предусмотрены.
- Удалите один декоративный оттенок. Если ничего не потерялось, он был лишним.
Применение цвета в конкретном формате разобрано в статье «Дизайн презентации: как сделать слайды, которые работают», а связь палитры со знаком — в материале «Как создать логотип: от задачи до векторного макета».
Если нужно системно соединить цвет с композицией, типографикой, Illustrator и практическими макетами, подойдёт программа «Графический дизайн + ИИ».
От одной палитры — к системе композиции, цвета и типографики
Курс «Графический дизайн + ИИ» помогает применять цвет вместе с композицией, типографикой и инструментами на практических макетах. Преподаватель — Соколов Игорь; выдаётся удостоверение о повышении квалификации.
Короткий итог
Хорошая палитра — это не коллекция оттенков, а распределение ролей. Начните с фона и текста, добавьте основной цвет, редкий акцент и служебный оттенок, проверьте контраст и испытайте систему на настоящем содержании. Если каждый цвет помогает понять иерархию, палитра работает.
Вопросы и ответы
- Сколько цветов должно быть в палитре?
Жёсткого числа нет. Для первого макета удобно начать с пяти ролей: фон, текст, основной, акцентный и служебный цвет. Дополнительные оттенки вводят только под конкретную функцию.
- Можно ли взять готовую палитру из генератора?
Можно использовать её как черновик, но нужно назначить оттенкам роли, проверить контраст, изображения и реальные компоненты. Красивый набор образцов ещё не является рабочей системой.
- Почему два контрастных по цвету оттенка могут плохо читаться?
Они могут сильно различаться по тону, но быть близкими по светлоте. Для текста нужно измерять именно контраст пары переднего плана и фона, а не полагаться на название цветов.