Генератор цветовой палитры (5 схем из одного базового цвета)

Пять схем теории цвета

Комплементарная: два цвета на противоположных концах цветового колеса (180° друг от друга). Высокий контраст, яркость. Используется для акцентов, кнопок призыва к действию и создания фокусных точек.

Аналоговая: три соседних цвета на колесе (30° друг от друга). Гармоничная и приятная, низкий контраст. Распространена в природе; отлично подходит для фонов и поверхностей UI.

Триадная: три равноудалённых цвета (120° друг от друга). Яркая и сбалансированная. Используется в игривых или энергичных дизайнах.

Тетрадная (прямоугольник): четыре цвета, образующие прямоугольник (90° друг от друга). Богатая палитра, но сложнее сбалансировать — как правило, один используется как доминирующий, остальные как акценты.

Монохроматическая: тона, тинты и тени одного оттенка. Утончённая и единая. Распространена в минималистичном дизайне и корпоративном брендинге.

Выбор начального цвета

Цвета бренда: большинство проектов начинается с существующего логотипа или фирменного цвета. Проверьте его как базовый во всех 5 схемах, чтобы найти лучший вариант для своего дизайна.

Вдохновение: возьмите цвет из фотографии, искусства или природы. Яркие цвета (высокая насыщенность, средняя светлость) лучше всего работают как базовые; очень бледные или очень тёмные цвета дают «выцветшие» палитры.

Доступность: убедитесь, что в финальной палитре достаточно контраста для текста. Используйте наш инструмент проверки контраста, чтобы убедиться, что пары цветов переднего/фонового плана соответствуют WCAG AA (4,5:1 для обычного текста).

Использование палитры

CSS-переменные: определите цвета палитры как переменные :root (--color-primary, --color-accent и т.д.), чтобы менять темы, изменив одно место.

Дизайн-инструменты: вставьте hex-значения в библиотеки цветов Figma, Sketch или Adobe XD. Большинство инструментов принимают hex напрямую; некоторые также принимают HSL или именованные CSS-цвета.

Ограничьте использование: даже с 5 цветами реальные дизайны обычно используют 2–3 цвета явно, а остальные — экономно. Правило 60-30-10 (60% доминирующий, 30% вторичный, 10% акцент) — полезный начальный баланс.