Контрастные цветовые схемы в брендинге
Правило 60-30-10 — не про красоту, а про распределение нагрузки
Формула 60-30-10 — это не дизайнерский трюк, а способ не перегрузить глаз. 60% занимает основной нейтральный цвет — фон логотипа, база сайта, упаковка. 30% отдаётся дополнительному цвету — второй по значимости элемент: заголовки, крупные блоки интерфейса, вторичная упаковка. И только 10% — акцентный цвет, который берёт на себя всю эмоциональную нагрузку: кнопка «Купить», распродажная плашка, деталь логотипа.
В логотипе это правило часто искажается — там пропорции 60-30-10 просто невозможно физически применить на площади в пару сантиметров. Поэтому пропорцию переносят на уровень системы: логотип может быть двухцветным сразу, а третий акцентный цвет живёт только в интерфейсе и рекламе. У IKEA именно так: синий и жёлтый — константа бренда, а красный для распродаж появляется только в коммуникации, никогда — в самом логотипе.
Четыре типа контраста, которые нужно считать отдельно
Дизайнеры часто путают контраст цвета с контрастом яркости — а это разные вещи. Насыщенный красный и насыщенный зелёный могут быть визуально одинаково «тяжёлыми», если их яркость совпадает — тогда глаз не увидит границы между ними, хотя оттенки прямо противоположны. WCAG 2.1 меряет именно яркость, а не цветовой тон, и минимум для текста мельче 18pt — 4,5:1, для крупного текста — 3:1. Для элементов интерфейса на уровне AA нужен коэффициент 3:1, а уровень AAA поднимает требования до 7:1 и 4,5:1 соответственно.
У каждого цвета есть визуальный вес — насколько «тяжёлым» он воспринимается на площади. Это влияет на то, сколько места ему можно отдать без потери баланса.
| Цвет | Визуальный вес (1–10) | Рекомендуемая доля в композиции |
|---|---|---|
| Жёлтый | 9 | Минимальная — акцент или узкая полоса |
| Оранжевый | 8 | Акцент, не более 10–15% |
| Красный | 6 | Средняя, до 20-30% |
| Зелёный | 6 | Средняя, до 30% |
| Синий | 4 | Может занимать основную площадь |
| Фиолетовый | 3 | Хорошо работает как база фона |
Температурный контраст (тёплый против холодного) и тональный контраст (светлый против тёмного) работают в паре с яркостным, но их нельзя складывать механически. Часто именно температурный перепад — синий и оранжевый, фиолетовый и оранжевый — даёт максимальное ощущение «включённости», даже если яркость цветов близка. Это и есть та зона, где комплементарные пары показывают себя лучше всего.
Кейс IKEA: как флаг страны стал системой навигации
IKEA взяла синий #0058A3 и жёлтый #FFDA1A — прямую комплементарную пару, доставшуюся от шведского флага. На первый взгляд решение выглядит случайным патриотическим жестом. На деле это рабочая навигационная система: синий формирует фон и структуру — стены магазина, вывески отделов, упаковку каталога, а жёлтый маркирует конкретные точки внимания — цену, скидку, логотип на входе. Контраст здесь работает не эстетически, а функционально: покупатель за секунду понимает, где искать цену, а где — название отдела.
Отдельно в этой системе живёт красный #CC0008 — цвет, которого нет в основной паре, но который включается только для одной задачи: распродажи. Это классический приём — держать базовую пару стабильной, а третий акцентный цвет резервировать под одно конкретное действие, чтобы он не размывал узнаваемость. FedEx делает то же самое с фиолетовым #351C15 и оранжевым #FF6600: фиолетовый — константа компании, оранжевый — динамичный элемент, который меняется в зависимости от сервиса. McDonald's, в свою очередь, строит контраст на тёплой паре красный #DA291C и жёлтый #FFC72C — сочетание, которое физиологически стимулирует аппетит, а не просто «бросается в глаза».
Как построить контрастную палитру с нуля — пошаговый процесс
Большинство материалов на эту тему объясняют, где контраст уместен, но не дают алгоритма, как его собрать самостоятельно. Вот рабочая последовательность, которую использует практика:
- Выберите основной цвет бренда — тот, что займёт 60% площади. Проверьте его яркость по шкале относительной светлоты (relative luminance), а не «на глаз».
- Найдите комплементарную пару на цветовом круге и сразу проверьте разницу в яркости — если она меньше 3:1, пара не даст читаемого контраста даже при разных оттенках.
- Определите визуальный вес обоих цветов по таблице выше и скорректируйте пропорции: тяжёлый цвет (жёлтый, оранжевый) не может занимать 60%, даже если он «основной» по смыслу бренда.
- Заложите третий акцентный цвет отдельно от базовой пары — под конкретную функцию (действие, распродажа, ошибка), а не как «ещё один красивый оттенок».
- Соберите монохромные варианты каждого цвета — светлее и темнее на 10-15% — для инверсии логотипа на тёмном и светлом фоне. Это не автоматическая операция: контраст может визуально «проваливаться» при инверсии из-за особенностей оптического восприятия, поэтому каждый вариант нужно смотреть отдельно, а не рассчитывать формулой.
- Если бренду не нужен яркий эмоциональный контраст, рассмотрите монохромную схему с одним акцентом — чёрный, белый и один цвет. Так строят палитры Stripe, Linear и Vercel: контраст есть, но без визуального шока, за счёт разницы в насыщенности и светлоте, а не в оттенке.
Проверка палитры на экране, в печати и при плохом освещении
Палитра, которая выглядит контрастной на калиброванном мониторе дизайнера, часто теряет эффект в реальных условиях. Чек-лист для проверки перед финальным утверждением:
- Проверить коэффициент контраста инструментом на соответствие 4,5:1 (обычный текст) и 3:1 (крупный текст и элементы интерфейса) — не полагаться на визуальную оценку.
- Отдельно проверить AAA-уровень (7:1 и 4,5:1), если бренд работает с аудиторией со слабым зрением — например, в медицине или госсекторе.
- Вывести палитру в CMYK и посмотреть цветопробу — RGB-оранжевый и синий часто теряют яркостный разрыв при переводе в печатные чернила, особенно на офсете без Pantone.
- Проверить логотип и на белом, и на тёмном фоне отдельно — инверсия не гарантирует автоматического сохранения контраста.
- Протестировать интерфейс на экране смартфона при ярком солнечном свете — многие современные приложения используют адаптивный контраст, повышая яркостный разрыв автоматически именно для таких условий, и если бренд работает без этой опции, палитру нужно закладывать с запасом контрастности изначально.
- Распечатать образец на обычном офисном принтере — грубая проверка, но она быстро вскрывает пары, которые «сливаются» на бумаге низкого качества.
Ошибки, которые чаще всего убивают контрастную палитру
- Считать контраст по цветовому тону, а не по яркости — насыщенный красный и насыщенный зелёный с одинаковой светлотой визуально не разделяются, хотя формально это противоположные цвета.
- Отдавать 60% площади «тяжёлому» цвету — жёлтому или оранжевому — просто потому, что он основной по смыслу бренда. Вес нужно балансировать пропорцией, а не логикой значимости.
- Не проверять инверсию логотипа отдельно, предполагая, что она «просто заработает» после инверсии слоя в файле.
- Игнорировать CMYK-проверку и утверждать палитру только по экрану — офсетная печать почти всегда снижает яркостный разрыв между цветами.
- Использовать акцентный цвет слишком часто — если 10% превращаются в 30%, он теряет функцию сигнала и превращается в фон.
- Копировать чужую комплементарную пару без проверки контекста — синий-оранжевый работает у одного бренда как навигация, а у другого будет читаться просто как заимствование без функции.
Правило 60-30-10 — не про красоту, а про распределение нагрузки
Формула 60-30-10 — это не дизайнерский трюк, а способ не перегрузить глаз. 60% занимает основной нейтральный цвет — фон логотипа, база сайта, упаковка. 30% отдаётся дополнительному цвету — второй по значимости элемент: заголовки, крупные блоки интерфейса, вторичная упаковка. И только 10% — акцентный цвет, который берёт на себя всю эмоциональную нагрузку: кнопка «Купить», распродажная плашка, деталь логотипа.
В логотипе это правило часто искажается — там пропорции 60-30-10 просто невозможно физически применить на площади в пару сантиметров. Поэтому пропорцию переносят на уровень системы: логотип может быть двухцветным сразу, а третий акцентный цвет живёт только в интерфейсе и рекламе. У IKEA именно так: синий и жёлтый — константа бренда, а красный для распродаж появляется только в коммуникации, никогда — в самом логотипе.
Четыре типа контраста, которые нужно считать отдельно
Дизайнеры часто путают контраст цвета с контрастом яркости — а это разные вещи. Насыщенный красный и насыщенный зелёный могут быть визуально одинаково «тяжёлыми», если их яркость совпадает — тогда глаз не увидит границы между ними, хотя оттенки прямо противоположны. WCAG 2.1 меряет именно яркость, а не цветовой тон, и минимум для текста мельче 18pt — 4,5:1, для крупного текста — 3:1. Для элементов интерфейса на уровне AA нужен коэффициент 3:1, а уровень AAA поднимает требования до 7:1 и 4,5:1 соответственно.
У каждого цвета есть визуальный вес — насколько «тяжёлым» он воспринимается на площади. Это влияет на то, сколько места ему можно отдать без потери баланса.
| Цвет | Визуальный вес (1–10) | Рекомендуемая доля в композиции |
|---|---|---|
| Жёлтый | 9 | Минимальная — акцент или узкая полоса |
| Оранжевый | 8 | Акцент, не более 10–15% |
| Красный | 6 | Средняя, до 20-30% |
| Зелёный | 6 | Средняя, до 30% |
| Синий | 4 | Может занимать основную площадь |
| Фиолетовый | 3 | Хорошо работает как база фона |
Температурный контраст (тёплый против холодного) и тональный контраст (светлый против тёмного) работают в паре с яркостным, но их нельзя складывать механически. Часто именно температурный перепад — синий и оранжевый, фиолетовый и оранжевый — даёт максимальное ощущение «включённости», даже если яркость цветов близка. Это и есть та зона, где комплементарные пары показывают себя лучше всего.
Кейс IKEA: как флаг страны стал системой навигации
IKEA взяла синий #0058A3 и жёлтый #FFDA1A — прямую комплементарную пару, доставшуюся от шведского флага. На первый взгляд решение выглядит случайным патриотическим жестом. На деле это рабочая навигационная система: синий формирует фон и структуру — стены магазина, вывески отделов, упаковку каталога, а жёлтый маркирует конкретные точки внимания — цену, скидку, логотип на входе. Контраст здесь работает не эстетически, а функционально: покупатель за секунду понимает, где искать цену, а где — название отдела.
Отдельно в этой системе живёт красный #CC0008 — цвет, которого нет в основной паре, но который включается только для одной задачи: распродажи. Это классический приём — держать базовую пару стабильной, а третий акцентный цвет резервировать под одно конкретное действие, чтобы он не размывал узнаваемость. FedEx делает то же самое с фиолетовым #351C15 и оранжевым #FF6600: фиолетовый — константа компании, оранжевый — динамичный элемент, который меняется в зависимости от сервиса. McDonald's, в свою очередь, строит контраст на тёплой паре красный #DA291C и жёлтый #FFC72C — сочетание, которое физиологически стимулирует аппетит, а не просто «бросается в глаза».
Как построить контрастную палитру с нуля — пошаговый процесс
Большинство материалов на эту тему объясняют, где контраст уместен, но не дают алгоритма, как его собрать самостоятельно. Вот рабочая последовательность, которую использует практика:
- Выберите основной цвет бренда — тот, что займёт 60% площади. Проверьте его яркость по шкале относительной светлоты (relative luminance), а не «на глаз».
- Найдите комплементарную пару на цветовом круге и сразу проверьте разницу в яркости — если она меньше 3:1, пара не даст читаемого контраста даже при разных оттенках.
- Определите визуальный вес обоих цветов по таблице выше и скорректируйте пропорции: тяжёлый цвет (жёлтый, оранжевый) не может занимать 60%, даже если он «основной» по смыслу бренда.
- Заложите третий акцентный цвет отдельно от базовой пары — под конкретную функцию (действие, распродажа, ошибка), а не как «ещё один красивый оттенок».
- Соберите монохромные варианты каждого цвета — светлее и темнее на 10-15% — для инверсии логотипа на тёмном и светлом фоне. Это не автоматическая операция: контраст может визуально «проваливаться» при инверсии из-за особенностей оптического восприятия, поэтому каждый вариант нужно смотреть отдельно, а не рассчитывать формулой.
- Если бренду не нужен яркий эмоциональный контраст, рассмотрите монохромную схему с одним акцентом — чёрный, белый и один цвет. Так строят палитры Stripe, Linear и Vercel: контраст есть, но без визуального шока, за счёт разницы в насыщенности и светлоте, а не в оттенке.
Проверка палитры на экране, в печати и при плохом освещении
Палитра, которая выглядит контрастной на калиброванном мониторе дизайнера, часто теряет эффект в реальных условиях. Чек-лист для проверки перед финальным утверждением:
- Проверить коэффициент контраста инструментом на соответствие 4,5:1 (обычный текст) и 3:1 (крупный текст и элементы интерфейса) — не полагаться на визуальную оценку.
- Отдельно проверить AAA-уровень (7:1 и 4,5:1), если бренд работает с аудиторией со слабым зрением — например, в медицине или госсекторе.
- Вывести палитру в CMYK и посмотреть цветопробу — RGB-оранжевый и синий часто теряют яркостный разрыв при переводе в печатные чернила, особенно на офсете без Pantone.
- Проверить логотип и на белом, и на тёмном фоне отдельно — инверсия не гарантирует автоматического сохранения контраста.
- Протестировать интерфейс на экране смартфона при ярком солнечном свете — многие современные приложения используют адаптивный контраст, повышая яркостный разрыв автоматически именно для таких условий, и если бренд работает без этой опции, палитру нужно закладывать с запасом контрастности изначально.
- Распечатать образец на обычном офисном принтере — грубая проверка, но она быстро вскрывает пары, которые «сливаются» на бумаге низкого качества.
Ошибки, которые чаще всего убивают контрастную палитру
- Считать контраст по цветовому тону, а не по яркости — насыщенный красный и насыщенный зелёный с одинаковой светлотой визуально не разделяются, хотя формально это противоположные цвета.
- Отдавать 60% площади «тяжёлому» цвету — жёлтому или оранжевому — просто потому, что он основной по смыслу бренда. Вес нужно балансировать пропорцией, а не логикой значимости.
- Не проверять инверсию логотипа отдельно, предполагая, что она «просто заработает» после инверсии слоя в файле.
- Игнорировать CMYK-проверку и утверждать палитру только по экрану — офсетная печать почти всегда снижает яркостный разрыв между цветами.
- Использовать акцентный цвет слишком часто — если 10% превращаются в 30%, он теряет функцию сигнала и превращается в фон.
- Копировать чужую комплементарную пару без проверки контекста — синий-оранжевый работает у одного бренда как навигация, а у другого будет читаться просто как заимствование без функции.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
