Что такое Генератор палитры цветов?

Генератор палитры цветов создаёт гармоничные цветовые комбинации на основе теории цвета. Выберите базовый цвет и правило гармонии для мгновенного создания палитры.

Три способа начать: выберите базовый цвет пипеткой или вставьте hex-код, перетащите фото, чтобы извлечь его основные цвета, или введите настроение вроде ocean или sunset. Затем выберите правило гармонии — и инструмент построит остальную палитру по пропорциям теории цвета на круге. Закрепите нужные оттенки, перемешайте остальные, кликните по понравившемуся цвету, чтобы развернуть всю палитру вокруг него, и посмотрите результат через фильтры дальтонизма. Экспортируйте пять цветов как блок CSS-свойств, конфиг Tailwind или JSON-файл для вашей дизайн-системы либо сохраните полосу как изображение PNG или SVG, чтобы поделиться в брифе или соцсетях.

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

1. Начните с базового цвета, перетащите фото для извлечения цветов или введите настроение вроде ocean или sunset
2. Выберите правило гармонии: комплементарная, аналогичная, триадная, расщеплённая комплементарная, тетрадическая или монохромная
3. Скопируйте любую плашку как HEX, RGB или HSL, по сетке контраста найдите доступные пары и выгрузите палитру в CSS, конфиг Tailwind, JSON или изображение образцов в PNG или SVG

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

• Собрать брендовую палитру вокруг одного утверждённого клиентом цвета.
• Подобрать читаемые акценты для графика или дашборда.
• Быстро прикинуть несколько вариантов для презентации или поста в соцсетях.

Результат

Базовый цвет #3498DB с триадной гармонией генерирует: #3498DB, #976CD6, #DB3498.

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

Чем отличаются комплементарная, аналоговая и триадная гармонии?

Комплементарная ставит базу против её противоположности на 180° — максимальный контраст. Аналоговая удерживает все цвета в пределах 30° — палитра спокойная. Триадная распределяет три цвета по 120° друг от друга, давая яркий, но сбалансированный контраст.

Можно ли сохранить любимый оттенок и перегенерировать только остальные?

Да. Нажмите замок на нужных образцах, потом меняйте гармонию, базовый цвет или жмите «Перемешать». Заблокированные образцы остаются на месте, остальные пересчитываются вокруг них.

Какой формат экспорта выбрать?

CSS отдаёт переменные вида --color-1, вариант Tailwind кладёт готовый блок theme.extend.colors в ваш конфиг, а JSON — структурированный объект для инструментов дизайн-токенов или скриптов. Чтобы поделиться палитрой картинкой — в брифе, презентации или посте — выберите PNG для растрового изображения или SVG для чёткой векторной полосы образцов.

Удовлетворяют ли эти палитры контрасту WCAG?

Встроенная сетка контраста оценивает каждую пару по порогам WCAG 2.x — AAA при 7:1, AA при 4,5:1, AA Large при 3:1 — и помечает провалы розовым. Выберите пару прямо из сетки перед тем, как использовать её в основном тексте или кнопках, ведь правила гармонии работают на визуальный баланс, а не на контраст.

Куда уходят мои цветовые данные?

Никуда. Все расчёты цвета выполняются прямо на странице, а любое перетащенное фото читается на вашем устройстве только для извлечения цветов — оно никуда не отправляется. Базовый цвет, палитра и экспортированные файлы остаются локально, так что невыпущенная палитра бренда остаётся такой же приватной, как ваш буфер обмена.

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