Генератор цветовых гармоний

Как работает генератор цветовых гармоний

Что делает инструмент

Генератор цветовых гармоний вычисляет математически связанные наборы цветов из одного базового оттенка: комплементарную, аналоговую, триадную, тетрадную, квадратную, раздельно-комплементарную, монохроматическую и оттенки. Каждая палитра отображается со значениями HEX, RGB и HSL, которые можно скопировать одним кликом и использовать напрямую в CSS или дизайн-токенах.

Распространенные сценарии использования для разработчиков

Дизайнеры прототипируют брендовые палитры, исследуя, как фирменный оттенок меняется при разных правилах гармонии. Frontend-разработчики подбирают акцентные цвета для кнопок, уведомлений и бейджей на основе основного брендового цвета. Инженеры визуализации данных выбирают категориальные наборы цветов, которые выглядят намеренно, но остаются различимыми. Продакт-менеджеры сравнивают варианты палитр при просмотре дизайн-предложений без необходимости в специализированных инструментах для дизайна.

Форматы данных, типы или варианты

Доступно восемь схем: Комплементарная (база + 180°), Аналоговая (база ± 30°), Триадная (3 цвета с шагом 120°), Тетрадная (прямоугольная 4-цветная), Квадратная (4 цвета с шагом 90°), Раздельно-комплементарная (база + ±150°), Монохроматическая (тот же оттенок при разной светлоте 10–90%) и Оттенки (тот же оттенок, от тёмного к светлому). Каждый цвет включает представления HEX, RGB и HSL, а также метку роли.

Распространенные ошибки и крайние случаи

Гармонии, полученные из крайне ненасыщенных или почти серых базовых цветов, выглядят неразличимо в разных схемах — начинайте с насыщенной базы. Сильно насыщенные базы в сочетании с триадной или тетрадной схемой могут давать слишком «громкие», трудно сбалансированные палитры; для UI стоит снизить насыщенность. Некоторые сочетания, полученные из гармоний, не проходят контраст WCAG — всегда проверяйте пары текст/фон в инструменте Color Contrast перед релизом.

Когда использовать этот инструмент, а когда — код

Используйте инструмент в браузере для генерации идей, быстрого исследования и дизайн-ревью. В коде библиотеки вроде chroma.js, colord или culori позволяют вычислять гармонии программно, встраивать их в конвейеры сборки дизайн-токенов и сочетать математику гармоний с перцептивно равномерными цветовыми пространствами, такими как Oklch, чтобы палитры выглядели более ровно.