Vaizdo spalvų paletės ištraukiklis nemokamai
Ištraukite dominuojančias spalvas iš bet kokio vaizdo naudodami k-vidurkių spalvų kvantizavimą. Gaukite šešioliktainius kodus 2–16 pagrindinių jūsų nuotraukos ar logotipo spalvų.
Nuvilkite failą čia arba spustelėkite, kad pasirinktumėte
JPG, PNG, WebP, GIF, HEIC, HEIF · apdorojama jūsų įrenginyje
arba paspauskite Ctrl+V, kad įklijuotumėte iš iškarpinės
Patarimas: ekrano nuotrauką galite įklijuoti su Ctrl+V
Jūsų failai niekada nepalieka jūsų įrenginio. Visas apdorojimas vyksta vietiškai jūsų naršyklėje.
Dažniausi naudojimo būdai
- Istraukite prekes zenklo spalvas is logotipoGaukite tkslas seslioliktaines spalviu kodus bet kurio logotipo ar prekes zenklo vaizdo dominuojancioms spalvoms.
- Sukurkite zitiatiinklio spalviu paletes is nuotraukuSukurkite sutampancias zitiatiinklio vietos spalviu paletes is heroju nuotrauku arba fono vaizdiu.
- Istraukite spalvas is ikvepiaiciu nuotraukuIstraukite spalviu paletes is vidaus dizaino ar mados nuotrauku, kad naudotumete savo projektuose.
- Analizuokite paveikslij ir meno paletesTirti garsiu paveikslij arba savo meno spalvij paletes istraukiant dominuojancias spalvas.
- CSS tema is vaizdijSukurkite CSS kintamijij temas is vaizdij - naudinga dinamisiaj temoti arba automatiskai sugeneruotus spalvij schemas.
Kaip tai veikia
Spalvų išgavimas vyksta visiškai jūsų naršyklėje, naudojant rankomis parašytą k-means++ klasterizavimo algoritmą, taikomą neapdorotiems pikselių duomenims, nuskaitomiems iš Canvas API — jokio serverio, jokios trečiosios šalies bibliotekos. Tas pats paveikslėlis ir spalvų skaičiaus nustatymai visada sukuria tą pačią paletę, nes algoritmas naudoja determinuotą pseudoatsitiktinių skaičių generatorių (mulberry32), o ne Math.random.
- 1Canvas nuskaito pikselių duomenisPaveikslėlis nupiešiamas ekrane nematomame HTML Canvas elemente ir sumažinamas iki daugiausiai 200px ilgiausioje pusėje. Canvas API getImageData() grąžina kiekvieną pikselį kaip neapdorotus RGBA baitus, o visiškai permatomi pikseliai (alfa < 128) atmetami prieš pradedant klasterizavimą.
- 2k-means++ klasterizuoja pikseliusk-means++ inicializatorius determinuotai pasėja centroidus, tada algoritmas kartoja iki 20 kartų: kiekvienas pikselis priskiriamas artimiausiam centroidui RGB erdvėje, tada centroidai perskaičiuojami kaip visų priskirtų pikselių vidurkis. Klasteriai, kurie sutampa iki tos pačios HEX reikšmės, sujungiami, todėl kiekvienas rezultato pavyzdys yra unikalus.
- 3Apskaičiuojami kiekvienos spalvos metaduomenysKiekvienas centroidas konvertuojamas į HEX, HSL ir jo dalį iš bendro pikselių skaičiaus (procentais). WCAG santykinis šviesumas apskaičiuojamas pagal standartinę formulę, o kontrasto santykiai su juoda ir balta spalva rodomi kartu su kiekvienu pavyzdžiu.
- 4Eksportas ir spalvų pipetės išvestisPaletę galima nukopijuoti kaip CSS pasirinktines savybes, SCSS kintamuosius, Tailwind konfigūracijos fragmentą arba JSON. Spustelėjimu imamos spalvos pipetė susieja jūsų paspaudimą peržiūroje su tiksliomis šaltinio pikselio koordinatėmis pilnos raiškos drobėje, pridedant to pikselio spalvą prie atskiro pasirinktų spalvų sąrašo. PNG paletės juostą galima atsisiųsti per Canvas toBlob().
Jūsų paveikslėlis niekada neįkeliamas — jis dekoduojamas ir apdorojamas visiškai jūsų naršyklės atmintyje, o analitikai pranešamas tik failo dydis (KB).
Susiję įrankiai
Atsitiktinių spalvų generatorius
Generuok atsitiktines spalvas po vieną arba kaip penkių spalvų paletę, užrakink patikusias, kopijuok HEX, RGB ar HSL reikšmes ir eksportuok paletę kaip PNG arba CSS.
Spalvų paletės generatorius
Generuokite papildančias, analogiškas, triadines ir monochromatines spalvų paletes iš bet kurios pagrindinės spalvos. Kopijuokite šešioliktainius kodus vienu paspaudimu.
Spalvų parinkiklis ir paletės generatorius
Rinkitės spalvas, konvertuokite tarp HEX/RGB/HSL ir generuokite harmoningas paletes.