Kuvan väripaletin poimija ilmaiseksi
Poimi hallitsevat värit mistä tahansa kuvasta k-means-värikvantisoinnilla. Saat heksadesimaaliarvot 2–16 pääväristä valokuvassasi tai logossasi.
Pudota tiedosto tähän tai valitse napsauttamalla
JPG, PNG, WebP, GIF, HEIC, HEIF · käsitellään laitteellasi
tai liitä leikepöydältä painamalla Ctrl+V
Vinkki: voit liittää kuvakaappauksen näppäimillä Ctrl+V
Tiedostosi eivät koskaan poistu laitteeltasi. Kaikki käsittely tapahtuu paikallisesti selaimessasi.
Yleiset käyttötavat
- Pura brändin värit logostaHanki tarkat heksikoodit kaikissa logoissa tai brändikuvissa hallitsevista väreistä.
- Rakenna web-väripaletteja valokuvistaLuo vastaavia verkkosivustojen väripaletteja päävalokuvista tai taustakuvista.
- Pura värit inspiraaotoko kuistaVedä väripaletteja sisustussuunnittelu- tai muotikuvista käytettäviksi omissa projekteissasi.
- Analysoi maalaus- ja taideteosten palettejaTutkikaa kuuluisien maalausten tai oman taiteennne väripaletteja poimalla hallitsevat värit.
- CSS-teema kuvistaLuo CSS-muuttujateemoja kuvista - hyödyllistä dynaamiselle teemoille tai automaattisesti muodostetuille värikaavioille.
Miten se toimii
Värien poiminta tapahtuu kokonaan selaimessasi käsin kirjoitetulla k-means++-klusterointialgoritmilla, jota sovelletaan Canvas-rajapinnasta luettuun raakaan pikselidataan — ei palvelinta, ei kolmannen osapuolen kirjastoa. Sama kuva ja värimäärä-asetukset tuottavat aina saman paletin, koska algoritmi käyttää deterministista pseudosatunnaislukugeneraattoria (mulberry32) Math.randomin sijaan.
- 1Canvas lukee pikselidatanKuva piirretään näytön ulkopuoliseen HTML Canvas -elementtiin ja alinäytteistetään enintään 200 pikseliin pisimmällä sivullaan. Canvas-rajapinnan getImageData()-funktio palauttaa jokaisen pikselin raakoina RGBA-tavuina, ja täysin läpinäkyvät pikselit (alfa < 128) hylätään ennen klusteroinnin alkua.
- 2k-means++ klusteroi pikselitk-means++-alustin siementää keskipisteet deterministisesti, ja algoritmi iteroi sitten enintään 20 kertaa: jokainen pikseli osoitetaan lähimmälle keskipisteelleen RGB-avaruudessa, ja keskipisteet lasketaan sitten uudelleen kaikkien osoitettujen pikselien keskiarvona. Klusterit, jotka romahtavat samaan heksa-arvoon, yhdistetään, joten jokainen tuloksen näyte on uniikki.
- 3Värikohtainen metadata lasketaanJokainen keskipiste muunnetaan HEX:ksi, HSL:ksi, ja sen osuudeksi kokonaispikseleistä (prosentteina). WCAG-suhteellinen luminanssi lasketaan standardikaavan mukaan, ja kontrastisuhteet sekä mustaa että valkoista vasten näytetään jokaisen näytteen rinnalla.
- 4Vienti ja pipettitoimintoPaletti voidaan kopioida CSS-mukautettuina ominaisuuksina, SCSS-muuttujina, Tailwind-asetuskatkelmana tai JSON:na. Napsauta-näytteistääksesi-pipetti kuvaa esikatselunapsautuksesi takaisin tarkoiksi lähdepikselikoordinaateiksi täysresoluutioisessa kanvaassa, lisäten kyseisen pikselin värin erilliseen poimittujen värien listaan. PNG-palettiliuska voidaan ladata Canvas toBlob()-funktiolla.
Kuvaasi ei koskaan ladata palvelimelle — se puretaan ja käsitellään kokonaan selaimesi muistissa, ja vain tiedostokoko (kilotavuina) ilmoitetaan analytiikkaan.
Liittyvät työkalut
Satunnainen värigeneraattori
Luo satunnaisia värejä yksi kerrallaan tai viiden värin paletiksi, lukitse mieleisesi, kopioi HEX-, RGB- tai HSL-arvoja ja vie paletti PNG- tai CSS-tiedostona.
Väripalettigeneraattori
Luo täydentäviä, analogisia, triadisia ja monokromaattisia väripaletteja mistä tahansa perusväristä. Kopioi heksadesimaaliarvot yhdellä napsautuksella.
Värinvalitsin ja palettigeneraattori
Valitse värejä, muunna HEX/RGB/HSL-välillä ja luo harmonisia paletteja.