Палитра от изображение

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

1. Пуснете изображение в зоната за качване или щракнете върху нея, за да изберете файл. Работят JPG, PNG, WebP, GIF и всеки друг формат, който браузърът ви може да показва.
2. Инструментът анализира картината веднага и показва Доминиращи цветове, подредени от най-присъстващия към най-малко присъстващия.
3. Настройте Брой цветове (от 3 до 12), за да получите по-широка или по-стегната палитра. Махнете отметката от Пренебрегни бели и почти бели пиксели, ако бялото е важен цвят на изображението ви, например бял продукт или сняг.
4. Копирайте един цвят с бутона Копирай под пробата му или изберете формат в Експортирай като (Списък с HEX, CSS променливи, SCSS променливи, JSON масив или Цветове за Tailwind) и щракнете върху Копирай или Изтегли за цялата палитра. Извлечи цветовете пуска анализа отново.

Изображението ви се чете локално от браузъра. Никога не се качва на сървър.

Как се намират доминиращите цветове

Изображението първо се рисува върху невидим canvas, намалено така, че най-дългата му страна да е най-много 512 пиксела. Това държи анализа бърз, без да променя общите цветове. После пикселите се групират с алгоритъм за квантуване (модифициран median cut от библиотеката с отворен код Color Thief), работещ в цветовото пространство OKLCH, така че цветове, които изглеждат еднакви за окото, да попаднат в една група.

Всяка група става един цвят от палитрата, а процентът под всяка проба е делът ѝ от пробваните пиксели. Лентата над пробите показва тези пропорции с един поглед. Прозрачните пиксели се пропускат, както и белите и почти белите, докато опцията е отметната, защото иначе обикновените бели фонове биха доминирали в повечето снимки на продукти и екранни снимки.

Всяка проба показва своя HEX код в черно или бяло, което се чете по-добре, така че надписът да остава четлив и върху светли, и върху тъмни цветове.

Идеи за използване на палитра от изображение

• Брандиране и уеб дизайн: изградете тема на уебсайт от главна снимка или лого, така че интерфейсът да съвпада с картината.
• Презентации и социални мрежи: изберете цветове на текст и фон, които подхождат на корична снимка.
• Интериорен дизайн, мода и изкуство: уловете настроението на снимка, картина или мостра от плат.
• Визуализация на данни: вземете цветове за диаграми от илюстрация, използвана в същия доклад.

Извлечените цветове са средни стойности на много пиксели, така че може да изглеждат малко по-малко живи от най-наситеното място на снимката. Ако ви трябва точният цвят на един определен пиксел, използвайте вместо това избор на цвят от изображение.