Advertisement
ColorSnap
Достаньте из любого изображения настоящую палитру, а затем поправьте её вручную. Кластеризация идёт в перцептивном цветовом пространстве, пипетка работает по пикселям, и ничто никогда не покидает ваш браузер.
Перетащите изображение сюда или нажмите, чтобы загрузить
PNG, JPG, WebP, AVIF, GIF, BMP, HEIC, TIFF и SVG — до 80 МБ, читаются в вашем браузере
Палитра
Загрузите изображение, чтобы построить по нему палитру.
Как это работает
Принесите изображение
Перетащите, выберите, вставьте или пришлите его из другого инструмента oLoveTools. Пока ничего не запускается.
Сначала настройте
Выберите, сколько цветов вам нужно, насколько глубоко брать выборку и какие тона игнорировать.
Извлекайте по вашей команде
Медианное сечение сужает поле, а затем k-means уточняет его в OKLab, где расстояние совпадает с тем, что вы видите.
Поправьте вручную
Закрепите то, что работает, уберите лишнее и подберите пипеткой всё, что математика упустила.
Видит цвет так же, как вы
Кластеризация идёт в OKLab, поэтому два визуально одинаковых синих никогда не пройдут оба, пока единственный оранжевый на снимке остаётся за бортом.
Пипетка с лупой
Приблизьтесь до пикселя, наведите курсор, чтобы увидеть значение, и щёлкните, чтобы оставить его. Alt+щелчок убирает образец, ближайший к тому, на что вы указываете.
Закрепите то, что уже подходит
Заблокируйте образец, и остальная палитра перестроится вокруг него, вместо того чтобы начинать с нуля и терять понравившийся цвет.
Читаемость проверена
Настоящие коэффициенты контраста WCAG 2.1 относительно белого, чёрного и каждого образца, плюс симуляция протанопии, дейтеранопии и тританопии.
100% в вашем браузере
Никакой загрузки на сервер, никакой модели с CDN, вообще никаких сетевых запросов. Изображение остаётся во вкладке и исчезает при её закрытии.
Экспорт, которым правда пользуются
Пользовательские свойства CSS, SCSS, блок @theme для Tailwind v4, JSON, палитра .gpl для GIMP, образцы SVG и PNG-лист.
Палитра, совпадающая с изображением, а не размытое среднее по нему
Большинство экстракторов уменьшают вашу фотографию до миниатюры и считают пиксели по жёсткой сетке, из-за чего соседние цвета смешиваются и появляются оттенки, которых там никогда не было. ColorSnap делает выборку в полном разрешении, хранит точное среднее каждой заполненной цветовой ячейки и кластеризует эти ячейки в OKLab — пространстве, где числовое расстояние совпадает с воспринимаемой разницей. Это разница между палитрой из четырёх почти одинаковых синих и палитрой, в которой действительно есть оранжевый из угла кадра.
Тяжёлый проход идёт вне основного потока
Сканирование пикселей происходит в Web Worker на OffscreenCanvas, поэтому интерфейс остаётся отзывчивым даже на снимке в 50 Мп. Обратно приходит компактная гистограмма, и каждое последующее изменение — размер палитры, порог насыщенности, закреплённые образцы — пересчитывается по ней за миллисекунды, не трогая изображение снова.
Сначала автоматически, вручную — когда захотите
Перетаскивание файла ничего не запускает: изображение ждёт, пока вы выбираете настройки. Можно и вовсе пропустить автоматический проход и собрать палитру вручную с первого щелчка — с масштабированием, лупой, закреплением и отменой. Любой цвет потом остаётся редактируемым, а повторное извлечение сохраняет всё, что вы закрепили.
100% приватно, и это буквально
Нет ни загрузки, ни API, ни модели с CDN, ни аналитики по вашему изображению. Всё — декодирование, выборка, кластеризация, экспорт — происходит через браузерные API внутри вашей вкладки. Изображение живёт только в памяти и исчезает, как только вы закроете страницу.
Частые вопросы
QОтправляется ли моё изображение на сервер?+
Нет. Декодирование, выборка и кластеризация выполняются через API canvas и Web Worker внутри вашего браузера. Ни загрузки, ни сетевых запросов с вашим изображением нет ни на одном этапе.
QКакие форматы можно открыть?+
PNG, JPG, WebP, AVIF, GIF, BMP и SVG открываются нативно. HEIC и HEIF с iPhone преобразуются в браузере, TIFF тоже декодируется локально. Ограничение — 80 МБ на файл. Можно перетащить, выбрать, вставить из буфера обмена или получить изображение из другого инструмента oLoveTools.
QПочему палитра не извлекается сразу после того, как я бросил файл?+
Потому что настройки меняют результат. Количество цветов, глубина выборки и порог насыщенности определяют, что вы получите, а запуск до их выбора просто тратит проход впустую. Изображение ждёт, кнопку нажимаете вы. А если автоматический проход вам вообще не нужен, есть кнопка, которая сразу открывает пипетку.
QЧто означает число отклонения?+
Это среднее перцептивное расстояние в OKLab между цветами вашего изображения и тем цветом палитры, к которому каждый из них отнесён. Ниже примерно 3 палитра точно описывает изображение; выше 6 вы видите лишь приблизительное впечатление о нём. Добавление цветов снижает его — это честный способ понять, хватило ли пяти образцов.
QЧто даёт закрепление цвета?+
Закреплённый образец считается неподвижным. Когда вы меняете размер палитры или запускаете извлечение заново, закреплённые цвета остаются ровно такими, какие они есть, а остальные места пересчитываются вокруг них — так вы никогда не потеряете тот образец, который вам уже понравился.
QМожно ли экспортировать прямо в мой проект?+
Да. Пользовательские свойства CSS, переменные SCSS вместе с картой, блок @theme для Tailwind v4, JSON с HEX/RGB/HSL/OKLCH и долей покрытия, палитра .gpl для GIMP, Inkscape и Krita, образцы SVG, обычный текст и PNG-лист. Имена переменных берутся из самих цветов, так что вы получаете --deep-teal, а не --color-4.