Правило 60-30-10
Это самое полезное правило распределения цветов. Оно пришло из дизайна интерьера, но работает для любого проекта.
- 60 %: доминирующий цвет. Обычно нейтральный или мягкий оттенок. Он занимает фон и большие площади.
- 30 %: второстепенный цвет. Добавляет характер. Используй его для блоков, меню или мебели.
- 10 %: акцентный цвет. Самый яркий. Используй его для кнопок, иконок или деталей.
Например: молочно-белый на 60 %, тёмно-синий на 30 % и оранжевый на 10 %.
Мерить точно не нужно. Суть в том, что один цвет ведёт, один поддерживает и один выделяется.
Роль нейтральных цветов
Нейтральные цвета — это белый, чёрный, серый, бежевый, кремовый и светлые коричневые. Они подходят почти ко всему.
Они дают глазам отдохнуть и помогают ярким цветам лучше выделиться. Палитра без нейтральных цветов обычно выглядит утомительно.
- Белый и молочно-белый: чистота и пространство.
- Серый: современный и сдержанный. Выбирай тёплые или холодные серые, которые сочетаются с остальной палитрой.
- Бежевый и песочный: тепло и естественность.
- Чёрный или почти чёрный: элегантность и контраст. Для текста очень тёмный серый обычно приятнее, чем чистый чёрный.
Сочетание по температуре
Цвета бывают тёплыми (красный, оранжевый, жёлтый) или холодными (синий, зелёный, фиолетовый). Сочетать их можно тремя простыми способами:
- Только тёплые цвета: уютно и энергично. Идеально для ресторанов или дружелюбных брендов.
- Только холодные цвета: спокойно и профессионально. Идеально для медицины, технологий или финансов.
- Холодная основа с тёплым акцентом: самый универсальный вариант. Тёплый акцент притягивает взгляд на спокойном фоне.
Что обычно не работает: много ярких тёплых и холодных цветов одновременно, без доминирующего цвета.
Контраст для текста
Красивый цвет бесполезен, если текст невозможно прочитать. Контраст между текстом и фоном важен для читаемости и доступности.
- Используй тёмный текст на светлом фоне или светлый текст на тёмном фоне.
- Избегай жёлтого, светло-зелёного или светло-серого текста на белом.
- Не накладывай насыщенные дополнительные цвета друг на друга, например красный на зелёный. Это рябит и утомляет глаза.
- Правила WCAG требуют коэффициент контрастности не ниже 4,5:1 для обычного текста и 3:1 для крупного текста.
Любую пару цветов можно проверить в нашей проверке контраста.
15 сочетаний цветов, которые всегда работают
Эти пары — надёжная отправная точка. Используй их как основу и при необходимости добавь нейтральный цвет или акцент.
- Тёмно-синий и кремовый: классика, серьёзно и хорошо читается.
- Чёрный и золотой: роскошь и элегантность.
- Синий и оранжевый: комплементарное и полное энергии.
- Пихтово-зелёный и бежевый: естественное и спокойное.
- Розовый и антрацитовый: современное и сбалансированное.
- Жёлтый и чёрный: максимальный контраст, идеально для предупреждений.
- Бордовый и песочный: тёплое и изысканное.
- Бирюзовый и коралловый: свежее и летнее.
- Фиолетовый и светло-сиреневый: монохромное и креативное.
- Коричневый и шалфейно-зелёный: землистое, идеально для натуральных брендов.
- Серый и персиковый: мягкое и приветливое.
- Петроль и светло-жёлтый: спокойное, с ноткой света.
- Терракотовый и молочно-белый: тёплое и средиземноморское.
- Тёмный петроль и горчичный: ретро и с характером.
- Белый и красный: прямое, энергичное и хорошо заметное.
Гораздо больше идей с HEX-кодами ты найдёшь на нашей странице сочетания цветов.
Какие цвета подходят к какому цвету
Если у тебя уже есть главный цвет, этот список даст быструю отправную точку:
- Красный: белый, чёрный, серый, тёмно-синий и бежевый. Для чего-то смелого — розовый или оранжевый.
- Оранжевый: тёмно-синий, бирюзовый, белый, кремовый и коричневый.
- Жёлтый: серый, чёрный, тёмно-синий и белый. Горчичный хорошо сочетается с тёмно-зелёным.
- Зелёный: бежевый, белый, коричневый, золотой и нежно-розовый.
- Синий: белый, оранжевый, серый, жёлтый и коралловый. Тёмно-синий работает почти как нейтральный цвет.
- Фиолетовый: серый, сиреневый, золотой, шалфейно-зелёный и белый.
- Розовый: серый, тёмно-синий, оливково-зелёный, белый и золотой.
- Коричневый: кремовый, зелёный, петроль, оранжевый и молочно-белый.
Ты наверняка заметил, что нейтральные цвета есть почти в каждом списке. Это самый надёжный партнёр для яркого цвета.
Как собрать своё сочетание
- Выбери главный цвет в зависимости от того, что хочешь выразить.
- Найди в цветовом круге второстепенный цвет: соседний — для чего-то спокойного, противоположный — для чего-то яркого.
- Добавь один-два нейтральных цвета.
- Выбери один акцентный цвет для самого важного.
- Протестируй палитру на реальном примере: веб-странице, слайде презентации или фото комнаты.
Если сомневаешься, используй меньше цветов. Трёх-пяти цветов хватает почти для любого проекта.
Частые ошибки с цветами
- Слишком много цветов. Результат выглядит перегруженным, и ничего не выделяется.
- Всем цветам одинаковый вес. Без доминирующего цвета глаз не знает, куда смотреть.
- Забытый контраст. Текст, который невозможно прочитать, или кнопки, которых никто не видит.
- Всё перенасыщено. Очень яркие цвета утомляют. Сочетай их с более мягкими оттенками.
- Игнорирование контекста. Цвет выглядит по-разному при дневном свете, на экране и на бумаге.
- Копирование без доработки. Палитра, которая работает для одного бренда, может не подойти твоей аудитории.
- Смешивание нейтральных цветов разной температуры. Холодный серый рядом с тёплым бежевым может выглядеть грязно. Выбирай нейтральные цвета из одного семейства.
- Отсутствие проверки на разных экранах. Цвет может быть красивым на компьютере и тусклым на телефоне. Всегда проверяй его больше чем на одном устройстве.