Izvleček barvne palete iz slike — brezplačno
Izvlecite prevladujoče barve iz katere koli slike z barvno kvantizacijo k-means. Dobite šestnajstiške kode za 2–16 najvidnejših barv v vaši fotografiji ali logotipu.
Spustite datoteko sem ali kliknite za izbiro
JPG, PNG, WebP, GIF, HEIC, HEIF · obdelano na vaši napravi
ali pritisnite Ctrl+V za lepljenje iz odložišča
Namig: posnetek zaslona lahko prilepite s Ctrl+V
Vaše datoteke nikoli ne zapustijo vaše naprave. Vsa obdelava poteka lokalno v vašem brskalniku.
Pogosta področja uporabe
- Izvlecite barve blagovne znamke iz logotipaPridobite natančne heksadecimalne kode za prevladujoče barve v katerem koli logotipu ali sliki blagovne znamke.
- Ustvarite spletne palete barv iz fotografijGenerirajte usklajene palete barv spletnega mesta iz fotografij junakov ali ozadnih slik.
- Izvlecite barve iz inspirativnih fotografijPotegnite palete barv iz fotografij notranjega oblikovanja ali mode za uporabo v svojih projektih.
- Analizirajte palete slik in umetnostiPreučujte palete barv slavnih slik ali lastne umetnosti z izluščenjem prevladujočih barv.
- CSS tema iz slikGenerirajte teme spremenljivk CSS iz slik - koristno za dinamično tematizacijo ali samodejno generirane sheme barv.
Kako deluje
Ekstrakcija barv teče v celoti v vašem brskalniku z uporabo ročno napisanega algoritma grozdenja k-means++, uporabljenega na surovih pikselskih podatkih, prebranih iz Canvas API — brez strežnika, brez knjižnice tretje osebe. Ista slika in nastavitve števila barv vedno ustvarijo isto paleto, ker algoritem uporablja deterministični psevdonaključni generator števil (mulberry32) namesto Math.random.
- 1Canvas bere pikselske podatkeSlika se nariše na element HTML Canvas zunaj zaslona in zmanjša na največ 200px na daljši strani. getImageData() Canvas API vrne vsak piksel kot surove bajte RGBA, popolnoma prosojni pikseli (alfa < 128) pa se pred grozdenjem zavržejo.
- 2k-means++ grozdi piksleInicializator k-means++ deterministično zasadi središča, nato se algoritem ponovi do 20-krat: vsak piksel je dodeljen svojemu najbližjemu središču v prostoru RGB, nato se središča preračunajo kot povprečje vseh dodeljenih pikslov. Grozdi, ki se zrušijo na isto šestnajstiško vrednost, se združijo, tako da je vsak vzorec v rezultatu edinstven.
- 3Izračunani so metapodatki za vsako barvoVsako središče se pretvori v HEX, HSL in svoj delež skupnih pikslov (odstotek). Relativna svetlost WCAG se izračuna po standardni formuli, razmerja kontrasta proti črni in beli pa se prikažejo poleg vsakega vzorca.
- 4Izvoz in izpis kapalkePaleto lahko kopirate kot CSS lastne lastnosti, spremenljivke SCSS, odlomek konfiguracije Tailwind ali JSON. Kapalka za vzorčenje s klikom preslika vaš klik na predogledu nazaj na natančne koordinate izvornega piksla na platnu s polno ločljivostjo in doda barvo tega piksla na ločen seznam izbranih barv. Barvni trak PNG lahko prenesete prek Canvas toBlob().
Vaša slika se nikoli ne naloži — dekodira se in obdela v celoti v pomnilniku vašega brskalnika, v analitiko pa se sporoči le velikost datoteke (v KB).
Sorodna orodja
Generator naključnih barv
Ustvarjajte naključne barve posamično ali kot paleto petih, zaklenite tiste, ki so vam všeč, kopirajte vrednosti HEX, RGB ali HSL in izvozite paleto kot PNG ali CSS.
Generator barvne palete
Ustvarite komplementarne, analogne, triadne in monohromatske barvne palete iz katere koli osnovne barve. Kopirajte šestnajstiške kode z enim klikom.
Izbirnik barv in generator palet
Izberite barve, pretvorite med HEX/RGB/HSL in ustvarite harmonične palete.