Сочетание цветов
Готовые сочетания для 16 популярных цветов с HEX-кодами. Выберите цвет, чтобы увидеть лучшие пары к нему, оттенки, палитры и какой текст на нём читается.
С чем сочетается красный
белый, графитовый, бежевый и ещё 3
С чем сочетается бордовый
кремовый, золотой, пудрово-розовый и ещё 3
С чем сочетается оранжевый
тёмно-синий, белый, графитовый и ещё 3
С чем сочетается жёлтый
чёрный, тёмно-синий, фиолетовый и ещё 3
С чем сочетается зелёный
кремовый, золотой, терракотовый и ещё 3
С чем сочетается мятный
коралловый, графитовый, персиковый и ещё 3
С чем сочетается бирюзовый
коралловый, песочный, белый и ещё 3
С чем сочетается голубой
тёмно-синий, жёлтый, персиковый и ещё 3
С чем сочетается синий
белый, оранжевый, жёлтый и ещё 3
С чем сочетается фиолетовый
жёлтый, лавандовый, мятный и ещё 3
С чем сочетается розовый
серый, мятный, тёмно-синий и ещё 3
С чем сочетается коричневый
кремовый, голубой, бирюзовый и ещё 3
С чем сочетается бежевый
тёмно-синий, бордовый, тёмно-зелёный и ещё 3
С чем сочетается серый
жёлтый, розовый, белый и ещё 3
С чем сочетается чёрный
белый, золотой, красный и ещё 3
С чем сочетается белый
тёмно-синий, красный, чёрный и ещё 3
Таблица сочетания цветов
В каждой строке основной цвет и шесть цветов, которые с ним сочетаются. Коды можно скопировать прямо из таблицы.
| Цвет | С чем сочетается |
|---|---|
| Красный | Белый Графитовый Бежевый Тёмно-синий Золотисто-жёлтый Мятный |
| Бордовый | Кремовый Золотой Пудрово-розовый Тёмно-синий Оливковый Серый |
| Оранжевый | Тёмно-синий Белый Графитовый Бирюзовый Кремовый Коричневый |
| Жёлтый | Чёрный Тёмно-синий Фиолетовый Серый Белый Голубой |
| Зелёный | Кремовый Золотой Терракотовый Белый Розовый Тёмно-синий |
| Мятный | Коралловый Графитовый Персиковый Белый Пудрово-розовый Тёмно-синий |
| Бирюзовый | Коралловый Песочный Белый Тёмно-синий Золотисто-жёлтый Шоколадный |
| Голубой | Тёмно-синий Жёлтый Персиковый Белый Коралловый Серый |
| Синий | Белый Оранжевый Жёлтый Бежевый Серый Голубой |
| Фиолетовый | Жёлтый Лавандовый Мятный Серый Розовый Золотой |
| Розовый | Серый Мятный Тёмно-синий Белый Бордовый Оливковый |
| Коричневый | Кремовый Голубой Бирюзовый Оранжевый Оливковый Белый |
| Бежевый | Тёмно-синий Бордовый Тёмно-зелёный Шоколадный Терракотовый Белый |
| Серый | Жёлтый Розовый Белый Тёмно-синий Бирюзовый Оранжевый |
| Чёрный | Белый Золотой Красный Жёлтый Неоновый бирюзовый Розовый |
| Белый | Тёмно-синий Красный Чёрный Изумрудный Золотой Фиолетовый |
Как сочетать цвета: пять правил
- Один главный цвет. Остальные ему помогают. Два одинаково ярких цвета в равных долях спорят друг с другом.
- Нейтральные цвета сочетаются со всеми. Белый, чёрный, серый, бежевый и тёмно-синий можно ставить рядом с любым акцентом.
- Цветовой круг подсказывает пары. Противоположные цвета дают яркий контраст, соседние дают спокойную гамму. Попробуйте на цветовом круге онлайн.
- Пропорция 60-30-10. 60% фон, 30% второй цвет, 10% акцент для кнопок и ссылок.
- Текст должен читаться. Проверьте пару «текст и фон» в проверке контраста: для обычного текста нужно не меньше 4.5:1.
Больше примеров в статьях «Цветовой круг и сочетания цветов» и «Как подобрать цвета для сайта». Готовые наборы из пяти цветов есть в разделе палитры.
Частые вопросы
Как подобрать сочетание цветов?
Выберите один главный цвет, к нему один акцентный (по цветовому кругу: противоположный или соседний) и один-два нейтральных для фона и текста. Пропорция 60-30-10 удержит баланс.
Какие цвета сочетаются со всеми?
Нейтральные: белый, чёрный, серый, бежевый, а также тёмно-синий. Их можно ставить рядом с любым ярким цветом.
Сколько цветов использовать в одном дизайне?
Обычно хватает трёх-пяти: один-два основных, один акцентный и нейтральные для фона и текста.