Цветовой круг онлайн
Нажмите на цвет на круге или введите свой, выберите схему, и круг покажет, какие цвета с ним сочетаются. Коды копируются одним нажатием.
:root {
--color-1: #6d3fd8;
--color-2: #abd841;
}Схемы сочетаний
- Комплементарная: два цвета напротив друг друга. Самый яркий контраст, второй цвет для кнопок и акцентов.
- Аналогичная: три соседних оттенка через 30°. Спокойно и цельно.
- Раздельно-комплементарная: цвет и два соседа его противоположности. Ярко, но мягче пары напротив.
- Триада: три цвета через 120°. Пёстро и весело.
- Квадрат: четыре цвета через 90°. Богато, но один цвет должен быть главным.
- Монохромная: один оттенок разной светлоты. Строго и аккуратно.
Подробнее со схемами и примерами в статье «Цветовой круг и сочетания цветов». Сколько каждого цвета брать, объясняет правило 60-30-10 из статьи «Как подобрать цвета для сайта».
Сочетания для основных цветов
Готовые пары и тройки для двенадцати основных оттенков (насыщенность 70%, светлота 50%).
| Цвет | Комплементарный | Аналогичные | Триада |
|---|---|---|---|
| #D92626 Красный | #26D9D9 | #D92680 #D98026 | #26D926 #2626D9 |
| #D98026 Оранжевый | #2680D9 | #D92626 #D9D926 | #26D980 #8026D9 |
| #D9CA26 Жёлтый | #2635D9 | #D97126 #8ED926 | #26D9CA #CA26D9 |
| #80D926 Салатовый | #8026D9 | #D9D926 #26D926 | #2680D9 #D92680 |
| #26D944 Зелёный | #D926BB | #62D926 #26D99D | #4426D9 #D94426 |
| #26D9BB Бирюзовый | #D92644 | #26D962 #269DD9 | #BB26D9 #D9BB26 |
| #26ACD9 Голубой | #D95326 | #26D9AC #2653D9 | #D926AC #ACD926 |
| #2653D9 Синий | #D9AC26 | #26ACD9 #5326D9 | #D92653 #53D926 |
| #7126D9 Фиолетовый | #8ED926 | #2635D9 #CA26D9 | #D97126 #26D971 |
| #BB26D9 Пурпурный | #44D926 | #6226D9 #D9269D | #D9BB26 #26D9BB |
| #D9268E Малиновый | #26D971 | #CA26D9 #D92635 | #8ED926 #268ED9 |
| #D92653 Розовый | #26D9AC | #D926AC #D95326 | #53D926 #2653D9 |
Нужна готовая палитра из пяти цветов? Откройте генератор палитр или выберите из готовых палитр. Проверить, читается ли текст на выбранном фоне, можно в проверке контраста. Подробные пары для 16 популярных цветов в разделе сочетание цветов.
Частые вопросы
Как пользоваться цветовым кругом?
Выберите основной цвет на круге или введите его HEX-код, затем схему: комплементарную, аналогичную, триаду или другую. Подходящие цвета появятся ниже, их коды можно скопировать.
Какие цвета сочетаются на цветовом круге?
Противоположные (комплементарные), соседние (аналогичные), три цвета через 120 градусов (триада) и четыре через 90 градусов (квадрат). Монохромная схема берёт один оттенок разной светлоты.
Что такое комплементарные цвета?
Цвета напротив друг друга на круге, через 180 градусов: например, синий и оранжевый. Это самый сильный контраст оттенков, поэтому второй цвет лучше оставить для акцентов.