Ekstraktor palete boja iz slike — besplatno
Izvucite dominantne boje iz bilo koje slike koristeći k-means kvantizaciju boja. Dobijte hex kodove za 2-16 najzastupljenijih boja u vašoj fotografiji ili logu.
Ispustite datoteku ovdje ili kliknite za odabir
JPG, PNG, WebP, GIF, HEIC, HEIF · obrađuje se na vašem uređaju
ili pritisnite Ctrl+V za lijepljenje iz međuspremnika
Savjet: snimku zaslona možete zalijepiti s Ctrl+V
Vaše datoteke nikada ne napuštaju vaš uređaj. Sva obrada odvija se lokalno u vašem pregledniku.
Uobičajene namjene
- Ekstrahirajte boje brendova iz logotipaDobijte točne heksadecimalne kodove za dominantne boje u bilo kojem logotipu ili slici brendu.
- Kreirajte web palete boja iz fotografijaGenerirajte usklađene palete boja web-mjesta iz herojskih fotografija ili slika pozadine.
- Ekstrahirajte boje iz inspirativnih fotografijaIzvucite palete boja iz fotografija unutarnjeg uređenja ili mode za upotrebu u svojim projektima.
- Analizirajte palete slika i umetnostiProučavajte palete boja čuvenih slika ili vlastite umetnosti ekstrahiranjem dominantnih boja.
- CSS tema iz slikaGenerirajte CSS varijabilne teme iz slika - korisno za dinamičku tematizaciju ili automatski generirane sheme boja.
Kako funkcionira
Izdvajanje boja radi u potpunosti u vašem pregledniku koristeći ručno napisani algoritam k-means++ grupiranja primijenjen na sirove podatke piksela očitane iz Canvas API-ja — bez poslužitelja, bez biblioteke treće strane. Ista slika i postavke broja boja uvijek proizvode istu paletu jer algoritam koristi deterministički pseudo-slučajni generator brojeva (mulberry32) umjesto Math.random.
- 1Canvas čita podatke pikselaSlika se crta na izvan-zaslonski HTML Canvas element i smanjuje na najviše 200px na svojoj najduljoj strani. getImageData() Canvas API-ja vraća svaki piksel kao sirove RGBA bajtove, a potpuno prozirni pikseli (alfa < 128) odbacuju se prije početka grupiranja.
- 2k-means++ grupira pikseleInicijalizator k-means++ deterministički postavlja centroide, zatim algoritam iterira do 20 puta: svaki piksel dodjeljuje se najbližem centroidu u RGB prostoru, zatim se centroidi ponovno izračunavaju kao prosjek svih dodijeljenih piksela. Klasteri koji se sruše na istu heks vrijednost se spajaju, tako da je svaki uzorak u rezultatu jedinstven.
- 3Izračunavaju se metapodaci po bojiSvaki centroid pretvara se u HEX, HSL i njegov udio u ukupnim pikselima (postotak). WCAG relativna svjetlina izračunava se prema standardnoj formuli, a omjeri kontrasta prema crnoj i bijeloj prikazuju se uz svaki uzorak.
- 4Izvoz i izlaz kapaljke za bojePaleta se može kopirati kao prilagođena CSS svojstva, SCSS varijable, isječak Tailwind konfiguracije ili JSON. Kapaljka za uzorkovanje klikom mapira vaš klik na pregledu natrag na točne koordinate izvornog piksela na platnu pune rezolucije, dodajući boju tog piksela u zaseban popis odabranih boja. PNG traka palete može se preuzeti putem Canvas toBlob().
Vaša slika se nikad ne šalje — dekodira se i obrađuje u potpunosti u memoriji vašeg preglednika, a analitici se prijavljuje samo veličina datoteke (u KB).
Srodni alati
Generator nasumičnih boja
Generirajte nasumične boje jednu po jednu ili kao paletu od pet, zaključajte one koje vam se sviđaju, kopirajte HEX, RGB ili HSL vrijednosti i izvezite paletu kao PNG ili CSS.
Generator palete boja
Generirajte komplementarne, analogne, trijadne i monohromatske palete boja iz bilo koje osnovne boje. Kopirajte hex kodove jednim klikom.
Odabir boja i generator palete
Odaberite boje, konvertirajte između HEX/RGB/HSL i generirajte harmonične palete.