UI и продуктовый дизайн
Собирайте primary, secondary и surface-цвета, согласованные между экранами.
Бесплатно · без регистрацииГармонии теории цветаCSS · Tailwind · JSONРаботает в вашем браузере
Почему генерировать палитры здесь
Шесть движков гармонии
Комплементарная, аналоговая, триадная, тетрадная, монохромная и разделённая комплементарная — на классической теории цвета.
Фиксация и доработка
Фиксируйте понравившиеся цвета, обновляйте остальные и итерируйте, пока схема не станет идеальной.
Экспорт для разработчиков
Копируйте CSS-переменные, токены Tailwind, SCSS maps или JSON — вставляйте сразу в design system.
Проверки контраста WCAG
Тестируйте пары «текст на фоне» из палитры, чтобы UI оставался читаемым и доступным.
Мгновенная обратная связь
Образцы, макеты UI и коды обновляются вживую. Без загрузки, ожидания и аккаунта.
Бесплатно и без лимитов
Неограниченные палитры для личных и коммерческих проектов. Без водяных знаков.
Как создать цветовую палитру
- 1
Выберите базовый цвет
Используйте пипетку или введите HEX. Он задаёт все расчёты гармонии.
- 2
Выберите правило гармонии
Переключайтесь между комплементарной, аналоговой, триадной и другими, чтобы найти настроение.
- 3
Фиксируйте, рандомизируйте, уточняйте
Закрепите нужные, обновите остальные или нажмите Пробел для новой базы и доведите схему до бренда.
- 4
Экспортируйте в свой стек
Копируйте HEX/RGB/HSL или экспортируйте CSS, Tailwind, SCSS или JSON для дизайнеров и разработчиков.
От одного HEX к заготовке design system
Правила гармонии, проверки контраста и форматы экспорта, которые реально уходят в продакшен.
01
Почему гармония цвета лучше случайных swatch’ей
Случайные цвета редко связаны. Правила гармонии размещают оттенки на цветовом круге осознанно — напротив для энергии, рядом для спокойствия, равномерно для динамики — чтобы интерфейсы выглядели целенаправленно, а не шумно.
02
Комплементарная vs аналоговая для продуктового UI
Комплементарные пары выделяют CTA на фоне. Аналоговые наборы подходят дашбордам и длинным текстам, где важна спокойная непрерывность. Меняйте правила на одной базе, чтобы сразу сравнить настроения.
03
Пути экспорта для современных стеков
CSS-переменные работают в любом фреймворке. Карты Tailwind вставляются в конфиги. SCSS maps питают Sass design systems. JSON уходит в design-инструменты и документацию. Одна палитра — каждый handoff.
04
Доступность как функция первого класса
Красоты мало, если основной текст не проходит AA. Проверка контраста, пока пипетка ещё открыта, избавляет от дорогих редизайнов после аудита доступности.
Кто использует генератор цветовых палитр
От бренд-китов до продуктового UI — сбалансированные схемы начинаются с теории цвета.
Фирменный стиль
Исследуйте комплементарные или монохромные системы до фиксации гайдлайнов.
Frontend-разработка
Экспортируйте CSS-переменные или токены Tailwind, чтобы код совпадал с макетом.
Маркетинг и соцсети
Генерируйте палитры кампаний в фирменном стиле для рекламы, презентаций и лендингов.
Визуализация данных
Выбирайте последовательные монохромные или категориальные триадные наборы для понятных графиков.
Изучение теории цвета
Смотрите, как правила гармонии превращают один базовый цвет в профессиональные схемы.
Советы по палитрам, которые реально помогают
Мелкие привычки, отделяющие «красивые swatch’и» от рабочей design system.
- 1
Начинайте с ограничений бренда или продукта
Если уже есть primary HEX бренда, зафиксируйте его и генерируйте вокруг — не выдумывайте пятый случайный акцент.
- 2
Проверяйте контраст заранее
Красивая пара, не проходящая WCAG AA, ломает кнопки, текст и формы. Тестируйте текст на поверхностях до релиза.
- 3
Меньше ролей — яснее система
Называйте цвета по роли (primary, accent, muted, danger), а не только по оттенку. Пять swatch’ей становятся системой при ясных ролях.
- 4
Экспортируйте один раз — используйте везде
Держите CSS-переменные или токены Tailwind в едином источнике правды, чтобы маркетинг и продукт не расходились.
FAQ
Часто задаваемые вопросы
Что такое генератор цветовых палитр?
Это инструмент, который строит набор согласованных цветов из начального цвета или правила. Этот генератор применяет гармонии теории цвета, чтобы swatch’и работали вместе в UI, брендинге и design systems.
Какие правила гармонии поддерживаются?
Комплементарная, аналоговая, триадная, тетрадная (прямоугольник), монохромная и разделённая комплементарная — шесть правил, которые дизайнеры чаще всего используют для сбалансированных схем.
Можно ли зафиксировать понравившиеся цвета?
Да. Зафиксируйте любой swatch, затем обновите незафиксированные или сделайте базу случайной. Зафиксированные цвета остаются на месте, чтобы вы могли уточнять схему без потери удачных оттенков.
Как экспортировать палитру в код?
Используйте «Экспорт», чтобы скопировать CSS custom properties, карту цветов Tailwind, SCSS map или JSON. Также можно кликнуть по swatch и скопировать HEX, RGB или HSL.
Что такое контраст WCAG и зачем его проверять?
WCAG задаёт минимальный контраст между текстом и фоном для доступности. Встроенный чекер измеряет пары из вашей палитры, чтобы текст UI оставался читаемым.
Бесплатно ли для коммерческих проектов?
Да. Неограниченные палитры, без аккаунта и водяных знаков. Сгенерированные цвета и экспортированный код — ваши для клиентской или коммерческой работы.
Уходят ли данные из браузера?
Нет. Расчёты цвета, проверки контраста и экспорт в буфер обмена выполняются на клиенте. Ничего не загружается на сервер.
Сколько цветов в каждой палитре?
Каждая гармония даёт пять согласованных swatch’ей — достаточно для primary, акцентов и вспомогательных поверхностей без перегруза системы.
Профессиональные палитры на основе теории цвета
Генератор цветовых палитр BosConvertPro превращает один базовый цвет в сбалансированную многоцветную схему по проверенным правилам гармонии. Дизайнеры и разработчики могут фиксировать избранное, проверять контраст, превью UI и экспортировать production-токены — полностью в браузере, бесплатно, без регистрации.
- Шесть режимов гармонии по теории цвета
- Фиксация цветов при обновлении остальных
- Проверка коэффициента контраста WCAG
- Экспорт CSS, Tailwind, SCSS и JSON
- Копирование HEX, RGB, HSL
- Бесплатное безлимитное использование в браузере