Генератор цветовых палитр
Извлекайте цвета из изображения или стройте гармонии.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Нажмите на цвет, чтобы скопировать его код
Профессиональная палитра за секунды
Любая визуальная айдентика начинается с палитры. К ней ведут два пути: оттолкнуться от изображения, уже несущего нужное настроение (фото, мудборд, скриншот), и извлечь его доминирующие цвета — или оттолкнуться от фирменного цвета и построить его гармонии по теории цвета.
-
Изображение → палитра
Перетащите изображение: алгоритм k-средних сгруппирует пиксели и покажет 6 доминирующих цветов с их весом.
-
Цвет → гармонии
Выберите базовый цвет: комплементарный, аналоговые, триада и оттенки генерируются мгновенно.
-
Экспортируйте
Кликните по цвету, чтобы скопировать код, или скопируйте весь блок CSS-переменных / Tailwind.
Гармонии вкратце
| Гармония | Построение | Эффект |
|---|---|---|
| Комплементарная | 2 цвета через 180° | Максимальный контраст, энергия |
| Аналоговая | 3 цвета при ±30° | Мягкость, естественная цельность |
| Триада | 3 цвета через 120° | Живой, красочный баланс |
| Оттенки | Один тон, 5 уровней светлоты | Монохромная глубина, иерархия |
Правило 60-30-10: примерно 60 % доминирующего цвета, 30 % вторичного, 10 % акцента. Проверьте также контраст текста и фона нашим WCAG-инструментом.
Частые вопросы
Как извлекаются цвета из изображения?
Алгоритмом кластеризации k-средних, работающим в браузере: пиксели группируются в 6 семейств близких цветов, и центр каждого семейства становится цветом палитры, отсортированным по важности (доле изображения).
Что такое комплементарный цвет?
Цвет, противоположный на цветовом круге (через 180°). Пара даёт сильнейший контраст: идеально, чтобы выделить кнопку призыва к действию на фоне.
Аналоговые, триада: когда применять?
Аналоговые (±30°) создают мягкие, целостные настроения — отлично для фонов. Триада (3 цвета через 120°) даёт живой баланс: один доминирующий, два акцента.
Как использовать экспорт CSS?
Сгенерированный блок содержит CSS-переменные (--color-1, --color-2…) для вставки в :root и эквивалент для конфига Tailwind. Переименуйте переменные по ролям (--primary, --accent…) для более читаемого кода.
Отправляется ли моё изображение куда-либо?
Нет: анализ k-средних выполняется полностью в браузере на миниатюре изображения. Ничего не передаётся даже для больших фото.