Вилучення кольорів зображення

Free

Вилучіть домінуючу колірну палітру із зображення за допомогою квантизації медіанного розрізу, з копіюванням як hex чи CSS-змінних.

Клацніть, щоб вибрати зображення, чи перетягніть одне сюди

Недавня Активність

Видно всім. Останні 20 використань серед усіх відвідувачів, найновіші спочатку.

6 colors · #BB5446, #E5B1AE, #1B0813, #3E1E21, #422037, #4D3864

3 години тому

Коментарі (0)

Знайшли цей інструмент корисним? Залиште коментар, поділіться порадою, чи скажіть нам, як ми можемо покращити його.

Ще немає коментарів. Будьте першим, хто поділиться думками!

Що робить цей інструмент

Вилучає домінуючу колірну палітру з будь-якого зображення за допомогою квантування кольору median-cut, тієї самої техніки, що використовується популярними бібліотеками вилучення палітр, з регульованою кількістю кольорів і копіюванням в один клік як коди hex чи змінні CSS.

Як Це Працює

Всі пікселі зображення починаються в одній групі. Інструмент знаходить, який колірний канал (червоний, зелений, чи синій) має найширший діапазон значень у найбільш густонаселеній групі, сортує пікселі цієї групи вздовж цього каналу, і ділить її навпіл за медіаною, щоб обидві половини містили приблизно однакову кількість пікселів. Цей поділ повторюється, завжди націлюючись на групу з найбільшою кількістю пікселів, доки не стане стільки груп, скільки кольорів ви запросили. Кожна остаточна група потім зводиться до одного кольору шляхом усереднення її пікселів, і результуючі кольори сортуються з найпоширенішим (найбільшою групою) першим.

Проблеми, які це вирішує

Побудова колірної палітри чи теми на основі фото, логотипу, чи витвору мистецтва.
Швидке визначення домінуючих кольорів у зображенні для рішень дизайну чи брендингу.
Генерування готових до використання власних властивостей CSS з колірної схеми зображення.

Часті запитання

›Як цей інструмент обирає, які кольори найважливіші в моєму зображенні?

Це використовує техніку, що зветься квантуванням median-cut: воно трактує колір кожного пікселя як точку в 3D просторі червоний/зелений/синій, повторно ділить найбільш густонаселену групу кольорів навпіл вздовж того колірного каналу, який варіюється в ній найбільше, і коли має стільки груп, скільки кольорів ви запросили, усереднює кожну групу в один репрезентативний колір. Групи з більшою кількістю пікселів йдуть першими в результатах, тому палітра відображає, скільки зображення фактично покриває кожен колір.

›Чому це розумніше, ніж просто усереднення всього зображення в один колір?

Усереднення всього одразу змішало б фото з чіткими червоними і синіми ділянками в каламутний фіолетовий, який ніде не з'являється в оригіналі. Розбивши колірний простір на окремі групи перед усередненням, кожна група містить лише схожі кольори, тому червоні ділянки і сині ділянки залишаються представленими як власні окремі, впізнавані записи палітри замість взаємного скасування.

›Чому вилучена палітра може пропустити колір, який я чітко бачу на фото?

Якщо цей колір покриває лише малу ділянку зображення, він може в підсумку опинитися згорнутим у більшу, домінуючу групу замість отримання власного слота, особливо при нижчій кількості кольорів. Збільшення запитуваної кількості кольорів дає малим чи тонким кольоровим ділянкам кращий шанс бути виділеними у власний запис палітри.

›Чи це аналізує зображення в повній роздільній здатності?

Зображення спочатку зменшується до меншої робочої копії перед аналізом, оскільки для вилучення палітри потрібна лише репрезентативна вибірка кольорів, а не кожен піксель, і це зберігає швидкість інструмента навіть для великих фото. Це не впливає на саме зображення, лише на аналіз, нічого не завантажується на сервер, а оригінальний файл ніколи не змінюється.

›Чи можу я використати палітру у своєму CSS?

Так, натисніть «Копіювати як CSS-змінні», щоб скопіювати палітру як готові до вставлення власні властивості --color-1 до --color-N, чи «Копіювати як список HEX» для простого списку hex-кодів.

Додайте один чи кілька власних текстових підписів на зображення прямо у вашому браузері.