CrateX.app

Палитра и пипетка

Кликните для выбора цветов с изображения, автоматически извлеките доминирующие цвета и палитру, копируйте 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

Конфиденциальность и безопасность

Вся обработка выполняется в браузере; данные никогда не покидают ваше устройство

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

Перейдите к следующему шагу с этими связанными инструментами.

Связанные инструменты