Извличане на цветна палитра от изображение — безплатно
Извлечете доминиращите цветове от всяко изображение с помощта на 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 байтове, а напълно прозрачните пиксели (алфа < 128) се отхвърлят преди да започне клъстеризацията.
- 2k-means++ клъстеризира пикселитеИнициализатор k-means++ засява центроидите детерминистично, след което алгоритъмът итерира до 20 пъти: всеки пиксел се присвоява на най-близкия си центроид в RGB пространство, след което центроидите се преизчисляват като средната стойност на всички присвоени пиксели. Клъстери, които се свиват до една и съща шестнадесетична стойност, се обединяват, така че всяка плочка в резултата е уникална.
- 3Изчисляват се метаданни за всеки цвятВсеки центроид се преобразува в HEX, HSL и своя дял от общите пиксели (процент). Относителната яркост по WCAG се изчислява по стандартната формула, а коефициентите на контраст спрямо черно и бяло се показват до всяка плочка.
- 4Изход и капкомер за проба на цвятПалитрата може да бъде копирана като персонализирани CSS свойства, SCSS променливи, откъс от конфигурация на Tailwind или JSON. Капкомер с кликване за проба картографира кликването ви върху прегледа обратно към точните координати на изходния пиксел върху платно с пълна резолюция, добавяйки цвета на този пиксел към отделен списък с избрани цветове. Лента с PNG палитра може да бъде изтеглена чрез Canvas toBlob().
Вашето изображение никога не се качва — то се декодира и обработва изцяло в паметта на браузъра ви, а само размерът на файла (в KB) се докладва за анализ.
Свързани инструменти
Генератор на случайни цветове
Генерирайте случайни цветове по един или като палитра от пет, заключвайте харесаните, копирайте стойности HEX, RGB или HSL и експортирайте палитрата като PNG или CSS.
Генератор на цветни палитри
Генерирайте допълващи, аналогични, триадни и монохроматични цветни палитри от всеки основен цвят. Копирайте hex кодовете с едно кликване.
Избор на цвят и генератор на палитра
Избирайте цветове, конвертирайте между HEX/RGB/HSL и генерирайте хармонични палитри.