Посібник з вилучення палітри

Вилучайте домінантні колірні палітри із зображень JPG, PNG, WebP, AVIF, GIF, BMP або TIFF. Отримуйте HEX та RGB коди для кожного кольору. Кожна операція виконується локально у вашому браузері — без завантаження на будь-який сервер.

Що вам потрібно

Браузер — Chrome, Firefox, Safari або Edge з підтримкою OffscreenCanvas Формати — JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP або TIFF Ліміт — 20 МБ на файл (будь-який файл, що перевищує 20 МБ, буде відхилено) Обліковий запис — не потрібен Інтернет — не потрібен після завантаження сторінки

Вилучення вашої палітри

Відкрийте Palette Generator у своєму браузері. Перетягніть файл зображення з провідника файлів у зону завантаження. Або натисніть на область завантаження, щоб вибрати файл із вашого пристрою.

Переконайтеся, що файл не перевищує ліміт у 20 МБ перед завантаженням — файли, що перевищують цей поріг, будуть відхилені. Виберіть кількість кольорів для вилучення: 5, 8, 10 або 12. Менша кількість кольорів створює чистіші та зручніші палітри.

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

Він групує пікселі за схожістю кольорів за допомогою кластеризації k-means і обчислює середній колір для кожного кластера. Жодні дані не передаються через мережу. Перегляньте вилучену палітру.

Кожен колір відображається як візуальний зразок з його HEX-кодом та значеннями RGB. Натисніть на будь-який код кольору, щоб скопіювати його в буфер обміну. Використовуйте ці коди у своїх дизайнерських, CSS або друкованих проектах.

Як це працює

Palette Generator використовує елемент OffscreenCanvas та алгоритм квантування кольорів для вилучення домінантних кольорів. Коли ви завантажуєте зображення, браузер зчитує його безпосередньо в пам'ять через File API — завантаження на сервер не відбувається.

libvips створює позаекранне полотно за допомогою OffscreenCanvas і малює ваше зображення у його рідній роздільній здатності за допомогою drawImage. Потім він зчитує піксельні дані як масив RGBA за допомогою getImageData, який повертає Uint8ClampedArray, що містить значення червоного, зеленого, синього та альфа-каналу для кожного пікселя зображення. Для зображення 1920x1080 це створює приблизно 8 мільйонів окремих значень кольорів.

Алгоритм квантування групує пікселі за схожістю кольорів за допомогою кластеризації k-means. Він ініціалізує k центрів кластерів (де k дорівнює вибраному розміру палітри), а потім ітеративно призначає кожен піксель до найближчого центру кластера на основі евклідової відстані в просторі RGB. Після кожного проходу призначення він перераховує кожен центр кластера як математичне середнє всіх пікселів у цьому кластері.

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

Кожен колір відображається як візуальний зразок з його HEX-кодом та значеннями RGB. libvips вибирає точний колір центроїда з кожного кластера, гарантуючи, що відображений зразок точно представляє математичне середнє всіх пікселів у цій групі.

Файли обробляються повністю всередині вашого браузера за допомогою OffscreenCanvas. Вони ніколи не завантажуються на сервери ConvertCraft.

Коли щось йде не так

Зображення не завантажується: Ваше зображення перевищує ліміт у 20 МБ. OffscreenCanvas працює в межах суворих обмежень пам'яті. Обробка зображень розміром понад 20 МБ вимагає величезних нестиснутих піксельних буферів у оперативній пам'яті, що може призвести до збою вкладки браузера.

Палітра містить схожі кольори: Зображення має тонкі колірні варіації, які алгоритм сприймає як окремі кластери. Зменште розмір палітри, щоб отримати менше, але більш виразних кольорів.

Кольори не збігаються з тим, що я бачу: Алгоритм вилучає математичні середні значення. Перцептивні відмінності між кольорами можуть не збігатися з візуальним сприйняттям. Спробуйте інший розмір палітри або скористайтеся інструментом «піпетка» для вибору конкретних пікселів.

Палітра складається переважно з одного кольору: У вашому зображенні домінує один колір. Алгоритм точно відображає розподіл кольорів зображення. Спробуйте інше зображення з більшою різноманітністю кольорів.

### Скільки кольорів я можу вилучити?

Інструмент підтримує вилучення 5, 8, 10 або 12 кольорів. Менша кількість кольорів створює чистіші палітри. Більша кількість кольорів фіксує тонкі варіації, але може включати незначні відмінності, які візуально не є виразними.

### Чи можу я вилучити кольори з певної області?

Поточна версія аналізує все зображення. Щоб вилучити кольори з певної області, спочатку обріжте зображення за допомогою Image Converter або спеціального інструменту для обрізки, а потім завантажте обрізану версію.

### Чи безпечно вилучати кольори з приватних зображень?

Так. Файли обробляються повністю всередині вашого браузера за допомогою OffscreenCanvas. Вони ніколи не завантажуються на сервери ConvertCraft.

Дані вашого зображення ніколи не залишають ваш комп'ютер, що робить їх повністю захищеними від перехоплення мережею або реєстрації на стороні сервера.