Attēla krāsu paletes ekstraktor bez maksas

Kā tas darbojas

Krāsu izgūšana notiek pilnībā jūsu pārlūkprogrammā, izmantojot pašrakstītu k-means++ klasterizācijas algoritmu, kas pielietots neapstrādātiem pikseļu datiem, nolasītiem no Canvas API — bez servera, bez trešās puses bibliotēkas. Tā pati attēla un krāsu-skaita iestatījumu kombinācija vienmēr rada to pašu paleti, jo algoritms izmanto determinētu pseido-nejaušo skaitļu ģeneratoru (mulberry32), nevis Math.random.

1. 1
   Canvas nolasa pikseļu datus

   Attēls tiek uzzīmēts uz ekrāna neredzama HTML Canvas elementa un samazināta izšķirtspēja līdz maksimums 200px tā garākajā malā. Canvas API getImageData() atgriež katru pikseli kā neapstrādātus RGBA baitus, un pilnīgi caurspīdīgi pikseļi (alfa < 128) tiek atmesti pirms klasterizācijas sākuma.
2. 2
   k-means++ klasterizē pikseļus

   k-means++ inicializators sējas centroīdus determinēti, tad algoritms iterē līdz 20 reizēm: katrs pikselis tiek piešķirts tuvākajam centroīdam RGB telpā, tad centroīdi tiek pārrēķināti kā visu piešķirto pikseļu vidējais. Klasteri, kas sakrīt vienā heksadecimālajā vērtībā, tiek apvienoti, tāpēc katrs paraugs rezultātā ir unikāls.
3. 3
   Katras krāsas metadati tiek aprēķināti

   Katrs centroīds tiek konvertēts uz HEX, HSL un tā daļu no kopējiem pikseļiem (procenti). WCAG relatīvais gaišums tiek aprēķināts pēc standarta formulas, un kontrasta attiecības pret melnu un baltu tiek parādītas kopā ar katru paraugu.
4. 4
   Eksports un pipetes izvade

   Paleti var kopēt kā CSS pielāgotās īpašības, SCSS mainīgos, Tailwind konfigurācijas fragmentu vai JSON. Klikšķa-paraugošanas pipete kartē jūsu klikšķi priekšskatījumā atpakaļ uz precīzām avota pikseļa koordinātēm pilnas izšķirtspējas audeklā, pievienojot šī pikseļa krāsu atsevišķam izvēlēto-krāsu sarakstam. PNG paletes joslu var lejupielādēt caur Canvas toBlob().

Saistītie rīki