🎨 Генератор гармонических цветовых палитр и CSS переменных
Создание математически сбалансированных цветовых схем (комплементарные, триадические, аналоговые, тетрадические) в цветовом пространстве HSL с экспортом в готовые CSS :root переменные.
Generated CSS Variables
:root {
--color-1: #38bdf8;
--color-2: #818cf8;
--color-3: #c084fc;
--color-4: #34d399;
--color-5: #388bf8;
}
Сравнение A/B:
📐 Теория гармонических цветовых кругов Манселла и цветовое пространство HSL
Триада: H1 = (H_base + 120°) mod 360°, H2 = (H_base + 240°) mod 360°
Аналоговая: H ± 30°
Комплементарная: H + 180°
Перевод в HEX через кусочно-линейную интерполяцию HSL
Цветовые гармонии вычисляются поворотом вектора цветового тона (Hue) на фиксированные углы: 180° для комплементарных пар, 120° для триад и 30° для аналогичных сочетаний.
📊 Генерация доступной палитры интерфейса с коэффициентом контрастности WCAG
Проверенный эталон: Базовый синий #38bdf8 (H=199°, S=95%, L=60%): триада генерирует акцентный розовый #f838bd (H=319°) и золотисто-лаймовый #bdf838 (H=79°) с идеальной визуальной гармонией.
⚠️ Неоднородность воспринимаемой человеческим глазом яркости вдоль спектра HSL
Важное замечание: Равномерное смещение угла в HSL не гарантирует одинаковую воспринимаемую яркость для человеческого глаза (зеленый спектр кажется ярче синего). Для перцептивной точности используйте OKLCH.
🌈 Проверка палитры на доступность
После генерации палитры обязательно проверьте читаемость текста на сгенерированных фонах в калькуляторе контраста WCAG.
🔗 Связанные инструменты
Рекомендуемые калькуляторы и утилиты для непрерывного студийного процесса: