Color Palette Extractor
Извлеките цветовую палитру с любого сайта. Скопируйте HEX/RGB/HSL коды и используйте в своём дизайне.
Анализируем первый экран сайта (1280×800). Занимает ~10–15 секунд.
Как использовать палитру
Дизайн и брендинг
Извлеките цвета конкурентов или понравившихся сайтов для вдохновения в дизайне.
Разработка
Скопируйте готовые CSS переменные и используйте в своём проекте.
Ребрендинг
Проанализируйте цветовую гамму сайта перед редизайном или миграцией стилей.
О сервисе Генератор цветовых палитр
Color Palette Generator создаёт согласованные цветовые палитры на основе правил цветового круга. Получите основной цвет, акценты и нейтральные оттенки — экспортируйте в CSS-переменные или Tailwind.
Часто задаваемые вопросы
Монохромная — оттенки одного цвета. Аналогичная — соседние цвета на круге (например, синий и зелёный). Комплементарная — противоположные (синий и оранжевый). Триада — три цвета через 120°. Раздельно-комплементарная — основной + два соседних к противоположному.
Используйте оттенки серого с лёгким подтоном основного цвета — палитра будет выглядеть целостнее. Или берите чистый серый (#808080 и производные) для нейтрального фона. Инструменты вроде Coolors и наш генератор предлагают автоматические нейтрали.
Для веб-проекта обычно достаточно 5–7: основной, 1–2 акцента, светлый и тёмный фон, цвет текста. Минималистичные сайты обходятся 3–4. Избыток цветов усложняет поддержку и нарушает визуальную иерархию.
Добавьте цвета в tailwind.config.js в theme.extend.colors. Или используйте CSS-переменные и укажите их в конфиге. Генератор может выдать готовый фрагмент конфига — скопируйте и вставьте в проект.
Многие генераторы показывают контраст между цветами палитры. Для текста и фона проверяйте комбинации через Color Contrast Checker. Выбирайте пары с коэффициентом минимум 4.5:1 для обычного текста по WCAG AA.
Связанные инструменты
Другие полезные сервисы reChecker