генератор цветовой гармонии
Увидеть геометрию
Каждый результат генератор цветовой гармонии отмечает на одном круге. Маркеры делают видимыми интервалы 180°, 120°, 90° и раздельную комплементарность, поэтому связь между цветами можно объяснить.
Интерактивный цветовой круг в браузере
Генератор цветовой гармонии и интерактивный круг
Используйте генератор цветовой гармонии, чтобы превратить один базовый цвет в комплементарную, аналоговую, триадную, раздельно-комплементарную или тетрадную палитру. Перетаскивайте маркер, настраивайте HSB, проверяйте роли, копируйте CSS и сохраняйте подписанный PNG без загрузки данных.
Обновлено 29 июля 2026 года
генератор цветовой гармонии
Что делает этот генератор цветовой гармонии?
Этот генератор цветовой гармонии помещает базовый тон на 360-градусный цветовой круг и вычисляет связанные тона по явным угловым смещениям. Комплементарная схема использует 180°, аналоговая −40° и +40°, триадная шаги по 120°, раздельно-комплементарная 150° и 210°, а тетрадная шаги по 90°. Генератор цветовой гармонии сохраняет насыщенность и яркость, чтобы первое сравнение изолировало структуру оттенков. Затем можно скопировать каждый HEX, экспортировать CSS-переменные, сохранить PNG или отправить первую пару переднего плана и фона в проверку контраста.
генератор цветовой гармонии
Палитра с объяснимыми связями
Генератор цветовой гармонии показывает правило, углы, значения и предполагаемые роли, а не возвращает безымянную полоску образцов.
генератор цветовой гармонии
Проверить полезные роли
Генератор цветовой гармонии применяет результат к toon-карточке с поверхностью, фокусным цветом, акцентом и действием. Это быстрая проверка иерархии, а не обещание, что каждый созданный цвет уже готов к использованию.
генератор цветовой гармонии
Передать значения в производство
Копируйте один цвет, всю палитру из генератор цветовой гармонии или пользовательские свойства CSS. Подписанный PNG сохраняет правило и значения для дизайн-ревью, мудборда или передачи в разработку.
Локальный цветовой круг и палитра
Использовать генератор цветовой гармонии
Перетаскивайте маркер или меняйте HEX и HSB. Генератор цветовой гармонии сразу пересчитывает точки, образцы, роли и экспорт.
346°
База с противоположными соседями 150° и 210°
Созданная гармоничная палитра
База#E8335D
- RGB
- 232, 51, 93
- HSB
- 346°, 78%, 91%
- ΔH
- +0°
Поддержка#33E863
- RGB
- 51, 232, 99
- HSB
- 136°, 78%, 91%
- ΔH
- +150°
Акцент#33B8E8
- RGB
- 51, 184, 232
- HSB
- 196°, 78%, 91%
- ΔH
- +210°
Полевая проверка toon-палитры
Проверьте иерархию до переноса цветов в настоящую иллюстрацию или компонент.
:root {
--harmony-1: #E8335D; /* База · 346° */
--harmony-2: #33E863; /* Поддержка · 136° */
--harmony-3: #33B8E8; /* Акцент · 196° */
}Проверить эту пару
Проверить эту паруПервый образец отправляется как передний план, последний — как фон.
генератор цветовой гармонии
Как построить рабочую гармонию
Генератор цветовой гармонии приносит пользу, когда каждое решение круга получает осознанную роль, измерение контраста и небольшую правку в реальном контексте.
генератор цветовой гармонии
1. Начните с настоящего базового цвета
Введите утверждённый HEX бренда, персонажа или интерфейса, а не угадывайте его по сжатому скриншоту. Генератор цветовой гармонии сохраняет этот тон первым маркером и выводит все остальные из того же источника.
генератор цветовой гармонии
2. Сначала выберите связь, потом настроение
Комплементарная схема даёт сильное разделение, аналоговая — близость, триадная — три сбалансированные семьи, раздельно-комплементарная — контролируемое напряжение, тетрадная — широкую систему. Генератор цветовой гармонии подписывает точное правило.
генератор цветовой гармонии
3. Назначьте роли и настройте значения
Оставьте один цвет ведущим, а остальные сделайте поддержкой, акцентом и контрапунктом. Выбрав структуру в генератор цветовой гармонии, меняйте насыщенность и яркость для иерархии вместо одинакового веса всех образцов.
генератор цветовой гармонии
4. Измерьте реализованную пару
Отправьте вероятную пару текста и фона из генератор цветовой гармонии в проверку контраста. Проверьте обычное состояние, наведение, фокус, выбор и отключение: расстояние на круге само по себе не доказывает читаемость или доступность смысла.
генератор цветовой гармонии
Сравнение пяти правил цветового круга
Генератор цветовой гармонии использует фиксированные воспроизводимые смещения. Таблица описывает геометрию, начальное число цветов, задачу и риск до художественной настройки.
| Правило | Смещения тона | Хороший старт | Учтите |
|---|---|---|---|
| Комплементарная | 0°, 180° | Фокусный объект против действия или предупреждения | Равная насыщенность бывает слишком громкой; выберите лидера |
| Аналоговая | −40°, 0°, +40° | Спокойные сцены, слои поверхности, связанные детали | Близким тонам может понадобиться больший разрыв яркости |
| Триадная | 0°, 120°, 240° | Три роли с широким охватом оттенков | Ослабьте один или два цвета, чтобы появился лидер |
| Раздельно-комплементарная | 0°, 150°, 210° | База с двумя менее прямыми противоположными акцентами | Два акцента конкурируют на больших площадях |
| Тетрадная | 0°, 90°, 180°, 270° | Большие системы, команды, графики и состояния UI | Четырём сильным цветам нужна группировка по яркости |
генератор цветовой гармонии
Почему математика круга предсказуема
Генератор цветовой гармонии рассматривает оттенок как угол от 0° до 359°. Перетаскивание маркера меняет базовый угол; выбранное правило добавляет свои смещения, а значение после 360° возвращается к началу круга. Насыщенность и яркость на первом шаге остаются постоянными. Поэтому легко проверить, что разница между режимами возникает из геометрии оттенков, а не из скрытой кривой света. Показанные HSB и HEX позволяют воспроизвести результат в другом инструменте.
Цифровой цветовой круг — полезная модель, но не закон восприятия. Равный угол в генератор цветовой гармонии не гарантирует равную воспринимаемую дистанцию, яркость или важность. Профиль дисплея, соседние цвета, площадь, типографика и движение меняют результат. Используйте генератор цветовой гармонии для отслеживаемой связи, а затем оценивайте палитру в настоящей композиции. Если небольшой акцент неожиданно доминирует, снизьте насыщенность или яркость, сохранив отношение оттенков.
генератор цветовой гармонии
Как дать каждому цвету работу
Начните с площади, а не с желания использовать все образцы поровну. Практический сценарий генератор цветовой гармонии может отвести большую часть холста спокойной поверхности, базовый цвет — персонажу или главному компоненту, связанный тон — деталям, а самый сильный контрапункт — действию. Живая карточка специально показывает неравное распределение. Так результат не превращается в четыре одинаковые полосы максимальной интенсивности.
До экспорта назовите роли: фон, поверхность, фокус, поддержка, действие, контур или серия данных. Роли позволяют менять результат генератор цветовой гармонии, не теряя намерение. Если действие не проходит контраст, затемните его, сохранив семейство оттенков. Если две серии сливаются в симуляции цветового зрения, добавьте прямые подписи или разные формы маркеров. Генератор даёт кандидатов, а документированная роль объясняет сохранение, правку или удаление.
генератор цветовой гармонии
Шесть проверок до экспорта
Этот список генератор цветовой гармонии превращает красивый результат круга в документированную и проверяемую палитру.
- Убедитесь, что базовый HEX взят из текущего источника, а не из старого скриншота.
- Выберите одно правило и запишите углы до изменения насыщенности или яркости.
- Назначьте ведущую, поддерживающую, акцентную и контрастную роли вместо равных площадей.
- Измерьте настоящую пару текста и фона и важные границы компонентов.
- Добавьте подпись, форму, узор или положение там, где цвет несёт важный смысл.
- Экспортируйте CSS или PNG из генератор цветовой гармонии и проверьте значения в реальном макете.
генератор цветовой гармонии
Метод, измерения и ограничения
Этот генератор цветовой гармонии отделяет воспроизводимую геометрию от заявлений о доступности. Углы явные, а источники W3C определяют цифровой оттенок и контраст.
- Комплементарный результат находится ровно в 180° от базы, триада шагает по 120°, а тетрада по 90°. Это прямые измерения алгоритма генератор цветовой гармонии, проверенного 29 июля 2026 года.
- W3C CSS Color Module Level 4 определяет оттенок HSL как угол и описывает нормализацию по кругу. Генератор цветовой гармонии использует ту же шкалу 0°–360° для расчётов HSB.
- WCAG 2.2 требует 4,5:1 для обычного и 3:1 для крупного текста в критерии 1.4.3. Генератор цветовой гармонии не выводит соответствие из угла и поэтому отправляет конкретную пару в проверку.
W3C прямо формулирует порог для обычного текста:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Первичные стандарты
генератор цветовой гармонии
Продолжить работу с палитрой
генератор цветовой гармонии
Вопросы про генератор цветовой гармонии
Какая гармония лучше для начинающего?
Начните с аналоговой для спокойной палитры или комплементарной для ясного акцента. Генератор цветовой гармонии сохраняет базу, поэтому переключение показывает разницу. В любом случае выберите ведущий цвет и измерьте итоговую пару.
Этот генератор цветовой гармонии использует HSL или HSB?
Генератор цветовой гармонии вычисляет и показывает HSB, поскольку Toon Tone работает с оттенком, насыщенностью и яркостью. Оттенок остаётся углом 360 градусов. Каждый HSB-результат преобразуется в HEX для браузера и дизайн-инструментов.
Гарантирует ли палитра доступный контраст?
Нет. Генератор цветовой гармонии описывает отношения оттенков, а контраст WCAG зависит от относительной яркости конкретного переднего плана и фона. Измеряйте настоящий шрифт и состояние и добавляйте нецветовые подсказки для важного смысла.
Почему нет монохромного режима?
Монохром меняет яркость и насыщенность вокруг одного тона, а не расставляет разные семьи по кругу. Этот генератор цветовой гармонии ведёт в отдельный инструмент со ступенями, toon-тенями, контрастом, CSS и PNG.
Мои цвета загружаются или сохраняются?
Нет. Генератор цветовой гармонии вычисляет углы и цвета в текущей вкладке; копирование и PNG остаются локальными. Общая URL содержит базовый HEX и название правила, поэтому делитесь только разрешёнными значениями.