Что такое Анализатор цветовой гармонии?

Анализатор цветовой гармонии проверяет, насколько ваши цвета сочетаются друг с другом по теории цвета. Он определяет тип гармонии (дополнительная, аналогичная, триадная и др.), оценивает совместимость и предлагает способы улучшить палитру.

Анализатор переводит каждый hex в HSL, измеряет расстояния по цветовому кругу и определяет, какая это связь: комплементарная, аналоговая, триадная, расщепительно-комплементарная, тетрадная или монохромная. Заодно смотрит разброс насыщенности и светлоты, ставит оценку 0–100 и подсказывает: затемнить ради контраста, выровнять насыщенность и т. п.

Как использовать

1. Добавьте два и более цвета, введя шестнадцатеричные коды или воспользовавшись палитрой выбора цвета.
2. Просмотрите анализ гармонии, чтобы увидеть определённый тип связи и оценку совместимости.
3. Изучите предложения и экспортируйте вашу палитру.

Когда использовать

• Проверить трёхцветную брендовую палитру до фиксации стилевых токенов.
• Выбрать одну из двух палитр, снятых с мудборда.
• Аудитить палитру графика, где каждой серии нужен свой оттенок.

Результат

Брендовый дизайнер ввёл три фирменных цвета (#2D5F8B, #F4A623, #E8E1D5) и выяснил, что они образуют разделённо-дополнительную гармонию с оценкой совместимости 87%, а также получил рекомендацию слегка потеплить синий цвет.

Частые вопросы

Что именно измеряет оценка гармонии?

Учитывает, насколько углы цветов попадают в известное отношение (комплементарность ~180°, аналог в пределах 60° и т. д.), сбалансированы ли насыщенность и светлота, достаточно ли контраста. 70 и выше — крепко, ниже 50 чаще всего просит правок.

Почему мои три цвета помечены «пользовательская», а не «триада»?

В классической триаде цвета стоят строго через 120°. Если у вас, например, 80° и 200°, углы не совпадают с шаблоном, поэтому анализатор ставит «пользовательская», но всё равно оценивает по насыщенности, светлоте и контрасту.

Нужно ли всегда стремиться к 100 баллам?

Не всегда. Максимум — это «учебная чистота», хорошо для графиков и дашбордов. Брендовые палитры часто лежат на 70–85: лёгкое напряжение делает их запоминающимися. Используйте оценку как ориентир, а не цель.

Сколько цветов выдержит анализатор?

Практически — два-семь. Два — минимум, чтобы вообще искать отношение; после семи типы гармонии теряют смысл и почти всё попадает в «пользовательскую». Для визуализаций с большим числом цветов сосредоточьтесь на балансе светлоты и насыщенности.

Можно экспортировать палитру в код или дизайн-инструменты?

Да. Кнопка скачивания сохранит hex-коды, а ещё одним кликом можно скопировать всё в буфер. Вставляйте прямо в цветовые стили Figma, в CSS-переменные или в JSON-файл токенов дизайн-системы.

Похожие инструменты