Перейти к содержанию
Логотип CrateX.app

CrateX.app

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

Выбирайте цвета из одного изображения в браузере, копируйте HEX/RGB/CSS, извлекайте репрезентативную палитру из 2–32 цветов и экспортируйте CSS-переменные или JSON с поддержкой HEIC/HEIF.

Перетащите изображение сюда или нажмите для выбора

Поддерживает PNG / JPEG / WebP / AVIF / HEIC / HEIF

Количество файлов

0 / 1

Общий размер

0 bytes / 25 MB

Лимит на файл

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

Быстрый старт

1
Импортируйте одно изображение
2
Нажмите предпросмотр и скопируйте HEX/RGB/CSS
3
Выберите размер палитры (4/6/8/12/16/24/32)
4
Извлеките репрезентативные цвета
5
Экспортируйте CSS-переменные или JSON

Частые сценарии

Выбор цветов дизайна/постера

Извлечение основных и акцентных цветов для цветовой схемы

Тема/дизайн-система

Экспорт CSS-переменных или JSON для проекта

Стилизация компонентов

Извлечение подходящих цветов для кнопок, тегов, графиков

Согласованность бренда

Извлечение стандартной цветовой палитры из ресурсов бренда

Опции пипетки и палитры

Количество цветов: 2–32, обычно 8/12; фотографии/градиенты предполагают 16-32
Кнопки пресетов: 4/6/8/12/16/24/32 переключение одним кликом
Сортировка: по количеству квантованных образцов от большего к меньшему, сначала наиболее распространенные цвета.
Число рядом с цветом: показывает количество квантованных сэмплов из изображения палитры с пониженной дискретизацией.
Контракт экспорта: переменные CSS используют имена:root --color-1; JSON перечисляет индекс/шестнадцатеричный/css/rgb/количество для каждого цвета палитры.

Рекомендации по использованию

Начните с 8/12 для общего эффекта, затем увеличьте до 16/24/32 по необходимости
При использовании в проекте переименуйте --color-1 в семантические имена (напр., --color-primary)
Держите страницу на переднем плане при извлечении больших изображений, чтобы избежать троттлинга браузера

Ограничения и совместимость

Извлечение палитры автоматически снижает производительность, результаты представляют собой репрезентативные цвета.
Точность: выборка кликов использует отображаемый холст размером до 2048 пикселей по самой длинной стороне; при извлечении палитры используется образец размером 256 пикселей.
HEIC/HEIF используется только для ввода; локальное декодирование может привести к сбою, поэтому при необходимости преобразуйте его в PNG/JPEG.
Обработка альфа-канала: CSS может выводить rgba(...);HEX/RGB не включают альфа-версию; JSON сохраняет альфу через значение CSS.
Граница ввода: нет импорта URL, импорта вставки, экранной пипетки или рабочего процесса расширения браузера.
Граница цвета: без преобразования HSL/CMYK/Pantone/LAB/OKLCH, проверки контрастности или матрицы WCAG.
Граница экспорта: нет экспорта образцов Tailwind/SCSS/ASE/Figma/Procreate.

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

Выбор цвета изображения и извлечение палитры выполняются в браузере. Исходное изображение остается в памяти страницы, пока этот инструмент открыт. Настройка размера палитры может оставаться в хранилище браузера; если включена синхронизация WebDAV, эта настройка может синхронизироваться согласно вашим параметрам. Выбранный цвет, палитра, сообщение об ошибке и данные масштаба / сдвига предпросмотра являются состоянием проверки во время работы и также могут синхронизироваться через WebDAV state schema, пока существуют. Файл изображения по умолчанию не синхронизируется; он попадает в синхронизацию вложений WebDAV только если вы явно включаете синхронизацию вложений. Экспорты палитры CSS/JSON создаются при скачивании и не сохраняются как отдельные результаты. На общем устройстве при необходимости очистите изображение, выбранные цвета, палитру, сохраненные настройки и данные сайта.

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

5

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

О нас

О нас
Тарифы

Правовая информация

Условия
Политика конфиденциальности
Политика файлов cookie

Настройки

Управление cookie

Вся обработка инструментов выполняется локально в вашем браузере.