Как собрать палитру 60-30-10

Хорошая палитра — это не набор любимых цветов, а система ролей: что главное, что фон, что акцент.

«Если всё кричит — не слышно ничего».

Сильная палитра строится не по принципу «нравится», а по ролям. Классический ориентир — правило 60-30-10: примерно 60% площади занимает доминирующий (обычно нейтральный) цвет, 30% — вторичный, 10% — акцент для действий. Этот баланс не даёт интерфейсу превратиться в радугу.

Роли цветов

В UI-палитре обычно выделяют: нейтральные (серая шкала для фонов, рамок, текста — их большинство), основной/бренд цвет (узнаваемость) и акцент (кнопки, ссылки, важное). Отдельно — семантические цвета статусов: зелёный = успех, красный = ошибка, жёлтый = предупреждение, синий = информация.

  ПРАВИЛО 60-30-10

  60%  ████████████████████████  нейтраль (фон, текст)
  30%  ████████████              вторичный
  10%  ████                      акцент (кнопки)

  Акцента мало -> поэтому он и заметен

  СЕМАНТИКА СТАТУСОВ

  [✓ зелёный] успех     [! жёлтый] внимание
  [✗ красный] ошибка    [i синий ] инфо

Почему акцента мало

Акцентный цвет работает именно потому, что его мало. Если все кнопки, ссылки и заголовки яркие, глаз не выделяет главное. Один экономный акцент превращается в «куда нажать», и человек сразу видит целевое действие.

В CSS базу палитры удобно хранить переменными:

:root {
  --bg: #f7f7f8;       /* нейтраль, 60% */
  --surface: #e9e9ee;  /* вторичный, 30% */
  --accent: #3b6ef5;   /* акцент, 10% */
  --success: #1f9d55;
  --danger: #e23b3b;
}

Как делают ПЛОХО

Пять ярких брендовых цветов в равных долях, кнопки разных оттенков на одном экране. Непонятно, какое действие главное, всё одинаково громкое.

Как делают ХОРОШО

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

Роль	Доля	Назначение
Нейтраль	~60%	Фон, текст, рамки
Вторичный	~30%	Блоки, карточки
Акцент	~10%	Кнопки, ссылки

Чек-лист

У каждого цвета есть роль, а не просто «нравится».
Соблюдён баланс примерно 60-30-10.
Акцент один и его мало.
Статусы (успех/ошибка/внимание) различимы по смыслу.

Бóльшую часть работы делают не яркие цвета, а нейтральные серые. Тексты, рамки, разделители, фоны карточек, тени — всё это оттенки серого, и от их аккуратности ощущение качества зависит сильнее, чем от выбора фирменного цвета. Поэтому в дизайн-системах каждый цвет раскладывают в шкалу-рампу от 50 до 900: 50 — почти белый намёк на оттенок, 500 — базовый, 900 — почти чёрный. Имея рампу, вы не подбираете цвета на глаз, а берёте «серый-100 для фона, серый-700 для текста» — и всё согласовано само собой.

Полезно различать роли. Brand-цвет — для логотипа и эмоции, может быть ярким и характерным. UI-цвет — рабочая лошадка для кнопок и ссылок, обязан быть читаемым и не резать глаз. И семантика статусов: зелёный «успех», красный «ошибка», жёлтый «внимание» — их учат как слова, не переопределяйте без нужды.

Отдельно держите в голове тёмную тему. Это не «инвертировать цвета»: чистый чёрный фон с чистым белым текстом бьёт по глазам, поэтому берут не предельный чёрный, а тёмно-серый, и понижают насыщенность акцентов — на тёмном фоне яркие цвета кажутся агрессивнее. Хорошая рампа 50-900 делает тёмную тему почти бесплатной: вы просто меняете местами концы шкалы. Так одна продуманная система цветов закрывает и светлый, и тёмный режим без боли.

Хороший способ проверить палитру — мысленно собрать из неё типовой экран и посмотреть, понятно ли с первого взгляда, куда нажать. Если глаз сразу находит главную кнопку, а ошибки и успехи различимы по смыслу, система работает. Если же всё пёстро и равнозначно, скорее всего, акцентов слишком много или нейтральной базы слишком мало. Палитра — это не коллекция любимых цветов, а инструмент управления вниманием, и оценивать её надо именно по тому, помогает ли она человеку ориентироваться, а не по тому, насколько ярко она смотрится в отрыве от интерфейса.

Итог

Палитра — это система ролей и пропорций. Меньше цветов, чёткие роли, экономный акцент — и интерфейс выглядит профессионально без усилий.

Сильная палитра — это система ролей и пропорций, а не коллекция любимых оттенков. Меньше цветов, чёткие роли и экономный единственный акцент дают профессиональный вид почти без усилий.