За този инструмент
Извличането на цветова палитра анализира изображение и идентифицира доминиращите или представителни цветове. Резултатът е малък набор от цветове — обикновено 5-8 — които улавят визуалния характер на изображението. Дизайнерите използват извлечени палитри, за да координират други елементи на дизайна (цветове на потребителския интерфейс, които допълват изображение на герой, палитри на марката, получени от фотография, цветови схеми, които съответстват на изображението с настроение).
Извличането използва алгоритми за клъстериране (k-средни или подобни), за да групира всички пиксели на изображението в заявения брой цветни клъстери. Центърът на всеки клъстер се превръща в цвят на палитрата. Най-големите клъстери представляват доминиращи цветове; алгоритъмът може също така да претегля по визуална важност (насищане, контраст), а не по необработен брой пиксели, за да повърхностни поразителни акцентни цветове.
Този инструмент работи във вашия браузър с помощта на JavaScript. Изображението се декодира в пикселни данни, взема се извадка, за да се намалят изчисленията, и се клъстерира. Резултатът е палитрата с шестнадесетични кодове, RGB стойности и пропорционални ленти, показващи разпространението на всеки цвят в изображението.
Защо да извличате цветни палитри
Проектирането на части, които се координират със съществуващите изображения, е много по-бързо с извлечени палитри, отколкото избирането на цветове на око. Уеб дизайнерите, изграждащи целеви страници около геройски изображения, търговците, създаващи активи, които съответстват на ключова снимка на продукта, и дизайнерите на марки, анализиращи изображения на конкуренти, всички се възползват от алгоритмичното извличане на палитри.
Палетите също поддържат управление на съдържанието. Категоризирането на изображения по доминиращ цвят ви позволява да създавате интерфейси, където потребителите преглеждат снимки, продукти или дизайни по цвят. Изграждането на такава система изисква систематично извличане на палети, което програмното извличане позволява.
Технически подробности
K-означава клъстериране итерации: присвояване на всеки пиксел към най-близкия център на клъстера, преизчисляване на центровете като средна стойност на присвоените пиксели, повторение до конвергенция. Работата с изображения с пълна разделителна способност е бавна; вземането на проби (вземане на всеки N-ти пиксел) се ускорява с минимална загуба на качество.
Цветовото пространство има значение. Групирането в RGB създава палети, претеглени по RGB разстояние, което не съответства на перцептивното разстояние. Групирането в LAB или HSV създава по-перцептивно подравнени палитри - цветове, които изглеждат подобни, се групират заедно по-надеждно.
Изход: шестнадесетични кодове за всеки център на клъстер, плюс процентът на пикселите на изображението във всеки клъстер. Процентът представлява зрително разпространение; най-големият клъстер е най-доминиращият цвят.
Често задавани въпроси
- Колко цвята се извличат?
- Инструментът обикновено извлича 5-8 доминиращи цвята, в зависимост от сложността на изображението. Обикновените изображения с малко цветове създават по-малко, по-отчетливи мостри. Сложните снимки създават по-широк диапазон.
- Как работи алгоритъмът за извличане?
- Инструментът използва квантуване на цветовете (средно изрязване или k-средно групиране), за да групира подобни пиксели и да идентифицира най-представителните цветове. Това създава визуално значими цветове, а не най-често срещаните стойности на единичен пиксел.
- Мога ли да използвам извлечени цветове за моята марка?
- да Това е популярна техника за извличане на палитри от марки от дъски за настроение, снимки или изображения на продукти. Извлечените шестнадесетични кодове могат да се използват директно в CSS, инструменти за проектиране или указания за марка.
- Защо извлечените цветове не съвпадат точно с това, което виждам?
- Извличането на цветове групира подобни пиксели заедно. Градиент, който изглежда като един цвят за окото, може да бъде усреднен в малко по-различен нюанс. Освен това калибрирането на монитора влияе върху това как цветовете се показват на екрана.
- Какъв формат е изходът?
- Шестнадесетични кодове по подразбиране. Повечето инструменти също експортират RGB, HSL и други стойности на цветовото пространство. CSS персонализирани свойства или JSON изход са полезни за програмна употреба.
- Изображението ми качено ли е на сървър?
- Не. Извличането се извършва във вашия браузър.
- Ще отговаря ли палитрата на идентичността на марката?
- Алгоритмичното извличане е описателно, а не предписващо. Резултатът описва изображението; марката може да има сродна, но различна палитра. Използвайте извличането като отправна точка, след това прецизирайте за подравняване на марката.
- Мога ли да извлека от видеоклип?
- Извличане на единичен кадър само с този инструмент. За извличане на видео палитра, извадка от кадри и извличане от всеки, след което обобщете.