Как создать цветовую палитру для вашего дизайна
Цвет — одна из первых вещей, которые вы замечаете на сайте, в приложении или дизайне. Хорошо выбранная палитра создаёт согласованный и профессиональный рендеринг. Плохо выбранная палитра делает даже хороший контент шатким.
Не нужно быть дизайнером, чтобы выбирать хорошие цвета. Теория цвета предоставляет надёжные формулы.
Режимы цветовой гармонии
Они основаны на отношениях между цветами на цветовом колесе:
Комплементарные — два противоположных цвета (например, синий и оранжевый). Сильный контраст, энергичный. Идеально для призывов к действию, которые должны выделяться.
Аналогичные — три цвета рядом на колесе (например, синий, сине-зелёный, зелёный). Гармоничные и успокаивающие. Идеально для фонов и природных рендеров.
Триадные — три цвета, равноудалённые на колесе (например, красный, жёлтый, синий). Яркие и сбалансированные. Идеально для игривых или творческих дизайнов.
Расщеплённо-комплементарные — один цвет плюс два соседа его дополнения. Похожий контраст с комплементарными при меньшем напряжении.
Монохроматические — разные оттенки, тона и тоны одного цвета. Всегда гармонично, но может не хватать визуального интереса при чрезмерном использовании.
Как создать палитру
- Выберите режим гармонии — выберите Случайный, Аналогичный, Комплементарный, Триадный или другой режим, чтобы зафиксировать отношения между цветами.
- Заблокируйте цвета, которые вам нравятся — когда вы найдёте цвет, который хотите оставить, заблокируйте его и регенерируйте остальные, пока вся палитра не подойдёт.
- Экспортируйте — скопируйте HEX-коды, CSS-переменные или сохраните палитру как изображение.
Построение пригодной для использования палитры
Палитра — это больше, чем набор красивых цветов. Для реального проекта вам нужны:
- Основной цвет — ваш брендовый цвет, используется для кнопок, ссылок и ключевых элементов интерфейса
- Вторичный цвет — поддерживает основной, используется для менее заметных интерактивных элементов
- Нейтральные цвета — серые или приглушённые тона для текста, фонов и границ (большая часть вашего интерфейса)
- Акцентный цвет — используется экономно для подсветки, уведомлений или сигнализации важного состояния
- Цвета ошибки/успеха — красный для ошибок, зелёный для успеха (обычно отдельные от палитры)
Советы
- Начинайте с одного цвета — выберите основной цвет, который вам нравится, затем используйте режим гармонии, чтобы найти цвета, которые его дополняют. Это проще, чем пытаться выбрать 5 цветов независимо.
- Тестируйте на реальном контенте — палитра, которая хорошо рендерится в образцах, может не работать применённой к реальному тексту, кнопкам и фонам. Всегда тестируйте с реальным интерфейсом.
- Проверяйте контраст — красивые цвета бесполезны, если текст нечитаем. Пропустите ваши комбинации текст/фон через проверщик контраста, чтобы соответствовать WCAG (соотношение 4,5 : 1 для обычного текста).
- Меньше — лучше — дизайн с 3 хорошо выбранными цветами выглядит более профессионально, чем дизайн с 7. Используйте нейтральные для большей части интерфейса и резервируйте яркие цвета для существенного.
Часто задаваемые вопросы
Сколько цветов должна содержать палитра?
Большинство дизайнов лучше работают с 3–5 цветами — основной цвет, вторичный, нейтральный и один или два акцентных цвета. Сверх этого дизайн может казаться хаотичным.
Что такое цветовая гармония?
Цветовая гармония обозначает приятные для глаза комбинации, основанные на позициях цветов на цветовом колесе. Распространённые гармонии — комплементарные (противоположные цвета), аналогичные (соседние цвета) и триадные (три равноудалённых цвета).
Как проверить, что мои цвета доступны?
Используйте проверщик контраста, чтобы валидировать, что ваши цвета текста и фона соответствуют стандартам доступности WCAG. Минимальное соотношение для обычного текста — 4,5 : 1 (уровень AA).
Можно ли экспортировать мою палитру?
Да. Вы можете копировать цвета в HEX-кодах, CSS-переменных или экспортировать палитру в изображение для использования в Figma, Canva, Sketch и т. д.