Витягувач колірної палітри із зображення — безкоштовно
Витягуйте домінуючі кольори з будь-якого зображення за допомогою k-means квантизації кольорів. Отримайте hex-коди для 2–16 основних кольорів фото або логотипу.
Перетягніть файл сюди або натисніть, щоб вибрати
JPG, PNG, WebP, GIF, HEIC, HEIF · обробляється на вашому пристрої
або натисніть Ctrl+V, щоб вставити з буфера обміну
Порада: знімок екрана можна вставити через Ctrl+V
Ваші файли ніколи не залишають пристрій. Вся обробка відбувається локально у браузері.
Типові застосування
- Витягніть кольори бренду з логотипуОтримайте точні шістнадцяткові коди для домінуючих кольорів у будь-якому логотипі або зображенні бренду.
- Побудуйте веб-кольорові палітри з фотографійГенеруйте відповідні палітри кольорів сайту з головних фотографій або фонових зображень.
- Витягніть кольори з фотографій натхненняВитягніть палітри кольорів з фотографій дизайну інтер'єру або моди, щоб використовувати у своїх проектах.
- Аналізуйте палітри картин та творів мистецтваВивчайте палітри кольорів знаменитих картин або вашого мистецтва шляхом витягування домінуючих кольорів.
- Тема CSS зі зображеньГенеруйте теми змінних CSS зі зображень - корисно для динамічних тем або автоматично згенерованих схем кольорів.
Як це працює
Витягування кольорів працює повністю у вашому браузері на власноруч написаному алгоритмі кластеризації k-means++, застосованому до сирих піксельних даних із Canvas API, — без сервера й сторонніх бібліотек. Те саме зображення з тими самими налаштуваннями кількості кольорів завжди дає ту саму палітру, бо алгоритм використовує детермінований генератор псевдовипадкових чисел (mulberry32), а не Math.random.
- 1Canvas читає піксельні даніЗображення малюється на позаекранному елементі HTML Canvas і зменшується до щонайбільше 200px по довшій стороні. getImageData() з Canvas API повертає кожен піксель як сирі байти RGBA, а повністю прозорі пікселі (alpha < 128) відкидаються перед кластеризацією.
- 2k-means++ кластеризує пікселіІніціалізатор k-means++ детерміновано задає центроїди, після чого алгоритм виконує до 20 ітерацій: кожен піксель призначається найближчому центроїду в просторі RGB, а центроїди переобчислюються як середнє всіх призначених пікселів. Кластери, що зводяться до того самого значення hex, об’єднуються, тож кожен зразок у результаті унікальний.
- 3Обчислення метаданих кожного кольоруКожен центроїд перетворюється в HEX, HSL і його частку від усіх пікселів (у відсотках). Відносна яскравість WCAG обчислюється за стандартною формулою, а коефіцієнти контрасту з чорним і білим показуються біля кожного зразка.
- 4Експорт і піпеткаПалітру можна скопіювати як власні властивості CSS, змінні SCSS, фрагмент конфігурації Tailwind або JSON. Піпетка зіставляє ваш клік на перегляді з точними координатами пікселя на полотні повної роздільності й додає колір цього пікселя до окремого списку вибраних кольорів. Смугу палітри PNG можна завантажити через Canvas toBlob().
Ваше зображення ніколи не завантажується — воно декодується й обробляється повністю в пам’яті браузера, а в аналітику надходить лише розмір файлу (у KB).
Схожі інструменти
Генератор випадкових кольорів
Генеруйте випадкові кольори по одному або як палітру з п’яти, блокуйте ті, що сподобалися, копіюйте значення HEX, RGB чи HSL і експортуйте палітру як PNG або CSS.
Генератор колірної палітри
Генеруйте доповняльні, аналогічні, тріадичні та монохроматичні колірні палітри з будь-якого базового кольору. Копіюйте hex-коди одним кліком.
Вибір кольору та генератор палітр
Вибирайте кольори, конвертуйте HEX/RGB/HSL та створюйте гармонійні палітри.