Liigu põhisisu juurde
LibraTool logoLibraTool

Pildi värvipalleti väljaottevahend tasuta

Eralda domineerivad värvid mis tahes pildist, kasutades k-keskmise värvikvantimist. Saa hex-koodid 2–16 peamise värvi jaoks sinu fotol või logol.

Töötab võrguühenduseta pärast laadimist

Lohistage fail siia või klõpsake sirvimiseks

JPG, PNG, WebP, GIF, HEIC, HEIF · töödeldakse sinu seadmes

või vajutage lõikelaualt kleepimiseks Ctrl+V

Sirvi faile

Vihje: ekraanipildi saad kleepida klahvidega Ctrl+V

Sinu failid ei lahku kunagi sinu seadmest. Kogu töötlus toimub kohalikult sinu brauseris.

Levinud kasutusviisid

  • Ekstrakteerige kaubamärgi värvid logostSaage täpsed kuusnurkse värvikoodid mis tahes logo või kaubamärgi pildi domineerivate värvide jaoks.
  • Looge veebisaidi värvpaletteid fotodestLooge sobitud saidi värvpaletteid kangelase fotodest või taustapiltidest.
  • Ekstrakteerige värvid inspireerivat fotodestTõmmake värvpaletteid siseareeni disaini või moefotodest, et kasutada oma projektides.
  • Analüüsige maalide ja kunsti paleteidUurige kuulsate maalide või oma kunsti värvpaleteid, ekstrakteerides domineerivad värvid.
  • CSS-teema piltidestLooge CSS-muutuja teemasid piltidest - kasulik dünaamiliseks teemaks või automaatselt genereeritud värviskkeemideks.

Kuidas see töötab

Värvi ekstraheerimine töötab täielikult sinu brauseris, kasutades käsitsi kirjutatud k-means++ klasterdusalgoritmi, mida rakendatakse Canvas API-st loetud toorele pikselandmestikule — servet, kolmanda osapoole teeki pole. Sama pilt ja värvi-arvu seaded toodavad alati sama paleti, sest algoritm kasutab deterministlikku pseudojuhuslikku generaatorit (mulberry32) Math.random'i asemel.

  1. 1
    Canvas loeb pikselandmed
    Pilt joonistatakse ekraanivälisele HTML Canvas elemendile ja allaskaleeritakse maksimaalselt 200px-ni oma pikimal küljel. Canvas API getImageData() tagastab iga pikseli tooreste RGBA baitidena ja täielikult läbipaistvad pikslid (alfa < 128) visatakse ära enne klasterdamise algust.
  2. 2
    k-means++ klasterdab pikslid
    k-means++ initsialiseerija külvab tsentroidid deterministlikult, seejärel itereerib algoritm kuni 20 korda: iga piksel omistatakse oma lähimale tsentroidile RGB ruumis, seejärel arvutatakse tsentroidid uuesti kui kõigi omistatud pikslite keskmine. Klastrid, mis kollapsuvad samale kuueteistkümnendväärtusele, liidetakse, nii et iga näidis tulemuses on unikaalne.
  3. 3
    Iga värvi metaandmed arvutatakse
    Iga tsentroid teisendatakse HEX-iks, HSL-iks ja selle osaks kogupikslitest (protsent). WCAG suhteline heledus arvutatakse standardvalemi järgi ja kontrastisuhted nii musta kui valge suhtes näidatakse iga näidise kõrval.
  4. 4
    Eksport ja pipetiväljund
    Palett saab kopeerida CSS kohandatud omadustena, SCSS muutujatena, Tailwindi konfiguratsioonifragmendina või JSON-ina. Klõps-valimiseks pipett kaardistab sinu klõpsu eelvaatel tagasi täpsetele lähtepikselkoordinaatidele täisresolutsiooniga lõuendil, lisades selle pikseli värvi eraldi valitud-värvide loendisse. PNG paletiriba saab alla laadida Canvas toBlob() abil.

Sinu pilti ei laadita kunagi üles — see dekodeeritakse ja töödeldakse täielikult sinu brauseri mälus ja analüütikale teatatakse ainult failisuurus (KB-des).

Seotud tööriistad

🎨

Juhuslike värvide generaator

Loo juhuslikke värve ükshaaval või viiest koosneva paletina, lukusta need, mis meeldivad, kopeeri HEX-, RGB- või HSL-väärtused ja ekspordi palett PNG- või CSS-failina.

Proovi järele
🎨

Värvipalleti generaator

Loo komplementaarseid, analoogseid, triaadilisi ja monohroomseid värvipallette mis tahes põhivärvist. Kopeeri hex-koodid ühe klõpsuga.

Proovi järele
🎨

Värvivalija ja paleti generaator

Vali värve, teisenda HEX/RGB/HSL vahel ja genereeri harmoonilisi palette.

Proovi järele

Korduma kippuvad küsimused