Besplatan Ekstraktor palete boja slike

Kako radi

Izdvajanje boja se u potpunosti odvija u vašem pregledniku koristeći ručno napisan algoritam k-means++ grupisanja primijenjen na sirove podatke piksela pročitane sa Canvas API-ja — bez servera, bez biblioteke treće strane. Ista slika i postavke broja boja uvijek proizvode istu paletu jer algoritam koristi deterministički pseudoslučajni generator brojeva (mulberry32) umjesto Math.random.

1. 1
   Canvas čita podatke piksela

   Slika se crta na skriveni HTML Canvas element i smanjuje na najviše 200px na svojoj najdužoj strani. getImageData() Canvas API-ja vraća svaki piksel kao sirove RGBA bajtove, i potpuno providni pikseli (alfa < 128) se odbacuju prije nego što grupisanje počne.
2. 2
   k-means++ grupiše piksele

   Inicijalizator k-means++ deterministički postavlja centroide, zatim algoritam iterira do 20 puta: svaki piksel se dodjeljuje najbližem centroidu u RGB prostoru, zatim se centroidi ponovo izračunavaju kao srednja vrijednost svih dodijeljenih piksela. Grupe koje se svedu na istu heksadecimalnu vrijednost se spajaju, tako da je svaki uzorak u rezultatu jedinstven.
3. 3
   Metapodaci po boji se izračunavaju

   Svaki centroid se pretvara u HEX, HSL, i svoj udio u ukupnim pikselima (procenat). WCAG relativna svjetlina se izračunava prema standardnoj formuli, a omjeri kontrasta u odnosu na crnu i bijelu se prikazuju uz svaki uzorak.
4. 4
   Izvoz i izlaz kapaljke za boju

   Paleta se može kopirati kao prilagođena CSS svojstva, SCSS varijable, Tailwind konfiguracijski isječak, ili JSON. Kapaljka klikni-za-uzorkovanje mapira vaš klik na pregledu nazad na tačne koordinate izvornog piksela na canvas-u pune rezolucije, dodajući boju tog piksela u odvojenu listu odabranih boja. PNG traka palete se može preuzeti putem Canvas toBlob().

Povezani alati