Основы теории цвета для UI-дизайнеров
Основы4 минРедакция Innovialabs
Коротко
В UI цвет — инструмент смысла и фокуса, а не украшение: выберите один основной цвет бренда, постройте широкую шкалу нейтральных для большей части интерфейса, добавьте семантические цвета для статусов и используйте акцент редко. Мышление в HSL помогает получать согласованные оттенки.
Коротко о главном
У цвета в интерфейсе три задачи: показать бренд, направить внимание и передать смысл (успех, ошибка, ссылка, недоступно). Рабочая UI-палитра обычно простая:
- один основной цвет для бренда и главных действий;
- шкала нейтральных (серых) для текста, фонов и границ — большая часть экрана;
- семантические цвета для статусов: успех, предупреждение, ошибка, информация.
Теория цвета помогает выбрать их так, чтобы они сочетались и оставались читаемыми.
Цветовой круг и гармонии
Цветовой круг располагает оттенки по окружности. Взаимное положение на круге даёт классические гармонии:
| Гармония | Как строится | Применение в UI |
|---|---|---|
| Монохромная | Оттенки одного цвета | Спокойные, цельные интерфейсы; проще всего сделать хорошо |
| Аналоговая | Соседние оттенки | Мягкие градиенты, иллюстрации, связанные категории |
| Комплементарная | Противоположные оттенки | Сильный акцент на фоне основного цвета; использовать дозированно |
| Расщеплённо-комплементарная | Цвет и два соседа его противоположного | Акцент с меньшим напряжением, чем чистая комплементарная |
| Триадная | Три равноудалённых оттенка | Графики и иллюстрации; для основного UI слишком шумно |
В интерфейсах гармонии редко используют «как есть». Обычно основа монохромная (основной цвет плюс нейтральные), а ещё один оттенок из гармонии становится второстепенным акцентом.
Думайте в HSL, а не в HEX
Код вида #7C3AED человеку ничего не говорит. HSL описывает цвет так, как думает дизайнер:
- Hue (тон) — положение на круге, 0–360 градусов;
- Saturation (насыщенность) — от серого до яркого, 0–100%;
- Lightness (светлота) — от чёрного до белого, 0–100%.
Так палитра становится системной. Нужен светлый фон — повышаете светлоту; состояние наведения — немного понижаете; приглушённый вариант — снижаете насыщенность. Тон не меняется, поэтому оттенки ощущаются родственными.
:root {
--primary-600: hsl(262 83% 58%); /* главные кнопки */
--primary-700: hsl(262 70% 45%); /* hover, нажатие */
--primary-100: hsl(262 90% 95%); /* светлые фоны */
--gray-900: hsl(260 30% 13%); /* основной текст */
--gray-500: hsl(260 8% 50%); /* второстепенный текст */
}
Важная оговорка: светлота в HSL не совпадает с воспринимаемой яркостью. Жёлтый и синий с одинаковой светлотой выглядят совсем по-разному. Всегда проверяйте результат глазами и инструментом проверки контраста. Эту проблему решают перцептивные модели вроде OKLCH, которые поддерживает современный CSS.
Собираем UI-палитру по шагам
- Выберите основной цвет из бренда. Убедитесь, что белый текст на нём читается.
- Постройте шкалу из 9–10 оттенков от очень светлого до очень тёмного, меняя светлоту и подстраивая насыщенность.
- Соберите нейтральные. Чистый серый часто выглядит безжизненно; лёгкий оттенок основного тона в серых делает палитру цельной.
- Добавьте семантические цвета: зелёный для успеха, янтарный для предупреждения, красный для ошибки, синий для информации. Каждому нужен светлый оттенок для фона и насыщенный для текста.
- Проверьте контраст. WCAG на уровне AA требует минимум 4.5:1 для обычного текста и 3:1 для крупного.
- Опишите тёмную тему отдельно. Простая инверсия редко работает: насыщенные цвета на тёмном фоне нужно смягчать.
Правило 60-30-10 для интерфейсов
Правило пришло из дизайна интерьеров: 60% доминирующего цвета, 30% вторичного, 10% акцента. На экране оно выглядит так:
- 60% — нейтральные: фоны и крупные поверхности, обычно белый, светло-серый или тёмно-серый в тёмной теме.
- 30% — вторичные: текст, карточки, боковые панели, границы, вспомогательные поверхности.
- 10% — акцент: главные кнопки, активные состояния, ключевые ссылки и выделения.
Воспринимайте цифры как ориентир баланса, а не точное измерение. Смысл в том, что акцента мало, поэтому он сохраняет способность притягивать взгляд.
Частые ошибки
- Брендовый цвет повсюду, и главные действия перестают выделяться.
- Смысл передаётся только цветом; добавляйте иконки, текст или форму, чтобы статусы понимали люди с нарушениями цветовосприятия.
- Слишком много оттенков без системы, каждый подобран «на глаз» для одного экрана.
- Светло-серый текст на белом: выглядит изящно, но не проходит по контрасту.
- Семантические цвета конфликтуют с брендом: например, красный фирменный цвет используется и для ошибок без различий.