Без завантаження, 100% локально, без облікового запису

Витягувач колірної палітри

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

Як працює Витягувач колірної палітри

Екстрактор колірної палітри аналізує ваше зображення та ідентифікує найбільш візуально домінуючі кольори за допомогою алгоритму k-means-кластеризації, запущеного на піксельних даних у Canvas. Результатом є набір кольорових зразків із їхніми HEX-значеннями, які можна копіювати окремо. Жодний байт зображення не покидає браузер; вибірка пікселів виконується локально у Web Worker, щоб основний потік залишався відповідним.

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

Автор: Bastien Sulyan

Витягувач колірної палітри: покрокова інструкція

  1. Перетягніть зображення на область завантаження або натисніть, щоб вибрати.
  2. Встановіть кількість кольорів для витягнення (зазвичай 5-12).
  3. Натисніть «Витягти». Кластеризація пікселів виконується локально у Web Worker.
  4. Перегляньте отримані кольорові зразки та їхні HEX-значення.
  5. Натисніть будь-який зразок, щоб скопіювати його HEX-код у буфер обміну.

Поширені сценарії використання

  • Дизайнер витягує домінуючу палітру з брендового фото, щоб нові маркетингові матеріали відповідали існуючій колірній концепції.
  • Розробник визначає основні кольори аватара, завантаженого користувачем, для динамічного генерування відповідного акцентного кольору UI.
  • Художник будує довідкову дошку настрою, витягуючи палітри з кількох довідкових зображень і порівнюючи витягнуті HEX-коди.
  • Блогер витягує п'ять домінуючих тонів із фото заголовка, щоб вибрати відповідні кольори тексту та кнопок для макету публікації.

Поширені запитання

Як працює алгоритм витягнення кольорів?

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

Чи потрібно завантажувати зображення для витягнення кольорів?

Ні. Вибірка пікселів відбувається у Web Worker браузера. Зображення зчитується з локального диска, малюється на OffscreenCanvas, і масив пікселів обробляється в пам'яті. Дані не покидають пристрій.

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

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

Чи можна витягувати палітри із зображень із прозорістю?

Повністю прозорі пікселі (альфа = 0) виключаються з кластеризації, щоб прозора ділянка не зміщувала витягнуті кольори до чорного або білого залежно від заливки фону Canvas. Напівпрозорі пікселі включаються у вибірку зважено за їхнім альфа-значенням.

У якому форматі представлені кольорові коди?

Інструмент виводить HEX-коди (наприклад, #3A7BD5). Якщо потрібні RGB, HSL або інші формати, скопіюйте HEX-значення в інструмент «Конвертер кольорів», який приймає HEX і конвертує в усі поширені колірні моделі.

Схожі інструменти

Тримайте все локально, досліджуйте додаткові інструменти.

Усі інструменти для зображень