Как это работает
Выберите базовый цвет и правило гармонии, и подходящая палитра построится поворотом оттенка вокруг цветового колеса или изменением светлоты. Нажмите на любой образец, чтобы скопировать его код, или скопируйте весь набор как CSS-переменные для вашей таблицы стилей.
Complementary = hue + 180° · Triadic = hue + 120° and + 240°
Правила гармонии
- Комплементарная: противоположные цвета для сильного контраста и кнопок призыва к действию.
- Аналоговая: соседи на круге для спокойного, естественного дизайна.
- Триада и тетрада: три или четыре равномерно разнесённых оттенка для живых, сбалансированных палитр.
- Сплит-комплементарная: два соседа противоположного цвета — контраст с меньшим напряжением.
- Монохроматическая, оттенки и тени: один оттенок в нескольких ступенях светлоты, идеально для состояний интерфейса.
Советы
- Используйте один цвет как основной тон, один как акцент, а остальные — умеренно.
- Проверяйте пары текста и фона с помощью проверки контраста перед публикацией.
- Всё выполняется в вашем браузере; ничего не сохраняется.
Стандарты и источники
- Гармонии рассчитываются на цветовом круге HSL, определённом в CSS Color Module Level 4
Last reviewed 7 октября 2026 г.
Часто задаваемые вопросы
Как сделать палитру из одного цвета?
Введите базовый цвет и выберите правило гармонии. Инструмент поворачивает тон на цветовом круге или меняет светлоту, чтобы построить сочетающиеся цвета.
Какая гармония лучше для сайта?
Аналогичные или монохроматические палитры выглядят спокойно и цельно; добавьте один комплементарный цвет как акцент для кнопок и ссылок.
Что такое тинты и шейды?
Тинты — более светлые версии цвета, а шейды — более тёмные. Они удобны для состояний при наведении, рамок и фонов.
Можно ли экспортировать палитру?
Да. Скопируйте блок CSS-переменных или нажмите на любой образец, чтобы скопировать один HEX-код.
Может ли он предложить случайную палитру?
Нажмите «Случайный базовый цвет», чтобы начать со свежего цвета, затем переключайте правила гармонии для исследования.