Как подобрать палитру сайта из пяти цветов

Сначала роли, потом оттенки

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

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

Соберите рабочий набор

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

Что брать из изображения

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

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

Проверьте палитру на маленьком экране

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

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

Упражнение: меняйте один параметр

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

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