Комплементарная палитра строится на паре цветов, лежащих напротив друг друга на цветовом круге: красный и зелёный, синий и оранжевый, фиолетовый и жёлтый. Схема уже выбрана, вам остаётся указать количество цветов. HEX-код копируется нажатием на образец.
Это самое контрастное сочетание из возможных, и обращаться с ним нужно осторожно: оно даёт и лучший акцент, и худшую головную боль, в зависимости от того, как распределены площади.
Примеры комплементарных палитр
Каждая строка — отдельная палитра. Нажмите кнопку выше, чтобы получить свою.
Правило неравных площадей
Главная ошибка с комплементарными цветами — дать им поровну места. Половина экрана синего и половина оранжевого создают конкуренцию, в которой глазу негде отдохнуть, и смотреть на такое больно уже через минуту.
Работающая пропорция примерно семьдесят к тридцати, а лучше девяносто к десяти. Один цвет занимает основную площадь, второй появляется точечно: кнопка, ссылка, акцентная деталь. Именно в этой роли комплементарная пара незаменима — акцент невозможно не заметить, потому что он максимально удалён от фона по тону.
Второй приём — приглушить один из цветов. Оставьте основному полную насыщенность, а фоновому снизьте её и уведите в светлую или тёмную зону. Пара сохранит контрастность, но перестанет спорить сама с собой.
И отдельное предупреждение о красном и зелёном: это самая распространённая пара цветовой слепоты. Если сочетание несёт смысл — «получилось» и «ошибка», — дублируйте его значком или подписью, иначе часть аудитории разницы не увидит.
Где применить комплементарную палитру
- Кнопки и призывы к действию. Акцент, который невозможно пропустить взглядом.
- Плакаты и обложки. Задача — остановить взгляд, и резкий контраст с ней справляется.
- Иллюстрации. Тёплый персонаж на холодном фоне — классический приём выделения.
- Инфографика. Две противопоставленные величины, которые нельзя перепутать.
- Спортивная и игровая символика. Цвета соперничающих команд читаются издалека.
Сплит-комплементарная схема как компромисс
Если прямая пара кажется слишком резкой, есть смягчённый вариант — сплит-комплементарная схема. Вместо цвета напротив берутся два соседних с ним: не строго противоположный, а отстоящий на тридцать градусов в обе стороны.
Контраст остаётся заметным, но исчезает ощущение лобового столкновения, потому что ни один из цветов не находится в точной оппозиции к основному. Схема доступна в основном генераторе палитр отдельным пунктом.
Есть и обратный ход: если контраста наоборот не хватает, увеличьте разницу не по тону, а по светлоте. Тёмно-синий и светло-оранжевый различаются сильнее, чем два одинаково средних по светлоте цвета, даже если те стоят строго напротив.
Вопросы и ответы
Что такое комплементарные цвета?
Цвета, лежащие напротив друг друга на цветовом круге: красный и зелёный, синий и оранжевый, жёлтый и фиолетовый. Они дают максимально возможный цветовой контраст.
Почему палитра выглядит слишком резко?
Скорее всего, цвета занимают одинаковую площадь. Отдайте одному основное место, а второй используйте точечно — для акцентов.
Чем комплементарная схема отличается от сплит-комплементарной?
В сплит-варианте вместо противоположного цвета берутся два соседних с ним. Контраст сохраняется, но становится мягче. Эта схема есть в основном генераторе палитр.
Подойдёт ли такая палитра для текста?
Для основного текста лучше взять монохромную или аналоговую схему. Комплементарную оставьте для кнопок и акцентов, где текста мало и он крупный.
Как скопировать цвета?
Нажмите на образец, чтобы скопировать один HEX-код, или на кнопку ниже, чтобы получить всю палитру списком.