Извличане на цветова палитра

Качете изображение, за да извлечете доминиращите му цветове. Получете HEX кодове за всеки образец, копирайте с едно кликване. Всичко работи в браузъра ви.

Как работи Извличане на цветова палитра

Извличачът на цветова палитра анализира изображението и идентифицира най-визуално доминиращите цветове, използвайки алгоритъм за клъстеризация k-means, изпълняван спрямо пикселните данни в Canvas. Резултатът е набор от цветни мостри с техните HEX стойности, които можете да копирате поотделно. Никакви байтове на изображения не напускат браузъра; пикселното вземане на проби се извършва локално в Web Worker, така че основната нишка остава отзивчива.

Извличането групира стотиците хиляди индивидуални пикселни цветове в по-малък брой представителни клъстери. Броят на изходните цветове е конфигурируем, така че можете да извлечете стегната палитра от пет цвята или по-широк набор от дванадесет. Това е полезно за бързо извличане на фирмени цветове от лого, идентифициране на доминиращите тонове на снимка за табло за настроения или проверка на цветовете, появяващи се в качено от потребителя изображение.

Написано от Bastien Sulyan

Как да използвате Извличане на цветова палитра, стъпка по стъпка

Пуснете изображението върху зоната за качване или щракнете, за да го намерите.
Задайте броя цветове, които искате да извлечете (обикновено 5 до 12).
Щракнете върху бутона за извличане. Пикселната клъстеризация се изпълнява локално в Web Worker.
Вижте получените цветни мостри и техните HEX стойности.
Щракнете върху произволна мостра, за да копирате HEX кода в клипборда.

Често срещани приложения

Дизайнер извлича доминиращата палитра от маркова снимка, за да гарантира, че новите маркетингови материали съответстват на съществуващата цветова история.
Разработчик идентифицира основните цветове в качен от потребителя аватар, за да генерира динамично съответстващ акцентен цвят на потребителски интерфейс.
Художник изгражда референтно табло за настроения, извличайки палитри от няколко референтни изображения и сравнявайки извлечените HEX кодове.
Блогър извлича петте доминиращи тона от хедър снимка, за да избере допълващи цветове за текст и бутони за оформление на публикацията.

Често задавани въпроси

Как работи алгоритъмът за извличане на цветове?

Инструментът чете всички пикселни стойности от изображението чрез Canvas.getImageData(), намалява ги за бързина, след което изпълнява клъстеризация k-means. Всеки центроид на клъстер се превръща в един от изходните цветове. K-means групира пикселите по цветова близост, така че доминиращите визуални тонове се проявяват като центроидни цветове.

Изисква ли извличането на цветове качване на изображението?

Не. Пикселното вземане на проби се извършва в Web Worker в браузъра. Изображението се чете от локалния диск, изчертава се върху OffscreenCanvas и масивът от пиксели се обработва в паметта. Данните не напускат устройството.

Защо извлечените цветове изглеждат малко по-различно от това, което виждам в изображението?

Центроидите k-means представляват математическото средно на клъстер от пикселни цветове. Цвят, който е много разпространен, но леко варира (синьо небе с леки вариации на градиента), ще произведе центроид, който е средният нюанс, а не каквато и да е точна пикселна стойност, към която можете да посочите. Резултатът е представително средно, а не проба от конкретен пиксел.

Мога ли да извличам палитри от снимки с прозрачност?

Напълно прозрачните пиксели (алфа = 0) са изключени от клъстеризацията, за да се избегне пристрастяване на извлечените цветове към черно или бяло в зависимост от запълването на фона на Canvas. Полупрозрачните пиксели са включени в пробата, претеглени по алфа стойността им.

В какъв формат са цветовите кодове?

Инструментът извежда HEX кодове (например #3A7BD5). Ако ви трябват RGB, HSL или други формати, копирайте HEX стойността в инструмента Color Converter, който приема HEX и конвертира в всички общи цветови модели.

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

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за изображения