Палитра и пипетка
Палитра и пипетка
Кликните для выбора цветов с изображения, автоматически извлеките доминирующие цвета и палитру, копируйте HEX/RGB и экспортируйте CSS-переменные. Поддерживает PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Перетащите изображение сюда или нажмите для выбора
Поддерживает PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Быстрый старт
- Импорт изображения: Перетащите или кликните для выбора
- Переключение панели: Десктоп показывает боковую панель; Мобильный нажмите кнопку внизу
- Клик для выбора: Кликните в любом месте изображения для получения цвета пикселя
- Копировать цвет: После выбора скопируйте формат HEX/RGB/CSS
- Установить количество цветов: Перетащите слайдер или кликните пресет (4/6/8/12/16/24/32)
- Извлечь палитру: Кликните кнопку извлечения для получения списка доминирующих цветов
- Экспорт CSS: После извлечения экспортируйте файл CSS-переменных
- Экспорт JSON: После извлечения экспортируйте файл данных JSON
- Сброс: Очистить текущее изображение и результаты
📌 Частые сценарии
- Выбор цветов дизайна/постера: Извлечение основных и акцентных цветов для цветовой схемы
- Тема/дизайн-система: Экспорт CSS-переменных или JSON для проекта
- Стилизация компонентов: Извлечение подходящих цветов для кнопок, тегов, графиков
- Согласованность бренда: Извлечение стандартной цветовой палитры из ресурсов бренда
🎛️ Опции пипетки и палитры
- Количество цветов: 2–32, обычно 8/12; фото/градиенты рекомендуют 16–32
- Кнопки пресетов: 4/6/8/12/16/24/32 переключение одним кликом
- Сортировка: По проценту от высокого к низкому, самые распространённые цвета первыми
- Число рядом с цветом: Показывает процент пикселей в изображении
🧭 Рекомендации по использованию
- Начните с 8/12 для общего эффекта, затем увеличьте до 16/24/32 по необходимости
- При использовании в проекте переименуйте --color-1 в семантические имена (напр., --color-primary)
- Держите страницу на переднем плане при извлечении больших изображений, чтобы избежать троттлинга браузера
⚠️ Ограничения и совместимость
- Лимит одного файла 128MB, очень большие изображения могут вызвать замедление
- Извлечение палитры автоматически уменьшает разрешение для производительности, результаты — репрезентативные цвета
- Декодирование HEIC/HEIF зависит от поддержки браузера, конвертируйте в JPG/PNG при ошибке
- Прозрачные пиксели игнорируются или обрабатываются как фактический RGBA
🔒 Конфиденциальность и безопасность
- Вся обработка выполняется в браузере; данные никогда не покидают ваше устройство
❓ Частые вопросы
Как использовать экспортированный CSS-файл?
Поместите экспортированный :root { --color-1: ... } в глобальный CSS, затем ссылайтесь через var(--color-1).
Для чего экспортированный JSON?
Для повторного использования в скриптах/дизайн-системе, напр., генерация Design Tokens или конфигурации темы. Каждый цвет включает hex/css/rgb и count.
Какое количество цветов рекомендуется?
Общий UI: 8 или 12; минималистичные иконки: 4–6; фото/градиенты: 16–32. Используйте пресеты для быстрого сравнения.
Почему цвета по клику и палитры отличаются?
Выбор кликом получает один пиксель; палитра квантует всё изображение для репрезентативных цветов с акцентом на общую тенденцию.
Почему кнопка экспорта серая?
Нужно сначала нажать 'Извлечь палитру', экспорт станет доступен после завершения извлечения.
Как генерируется имя экспортируемого файла?
По умолчанию используется имя оригинального файла (без расширения) + .palette-количество + .css/.json, недопустимые символы автоматически очищаются.