Grab the exact color from any image

Lähetä mikä tahansa JPG-, PNG-, WebP- tai GIF-kuva ja napsauta mitä tahansa kohtaa näytetyssä kuvassa – kohdistimen alla oleva tarkka pikseli näytteistetään ja näytetään HEX-, RGB- ja HSL-arvoina, joista jokaisen voi kopioida yhdellä napsautuksella. Täydellinen brändivärin sovittamiseen, värimallin näytteistämiseen valokuvasta tai korostussävyjen poimimiseen suunnittelumallista.

Napsauta mitä tahansa pikseliä, niin tämä värivalitsin näyttää sen HEX-värikoodin (esimerkiksi #FF6B35) RGB- ja HSL-arvojen rinnalla — samat HTML/CSS-värikoodit, jotka liität suoraan tyylitiedostoon, suunnittelutokeniin tai HTML-attribuuttiin. Napsauta Kopioi saadaksesi heksakoodin yhdellä napsautuksella.

Kuva pienennetään 320 pikseliin pidemmältä sivultaan, minkä jälkeen jokainen pikseli lajitellaan koreihin kanavakohtaisten neljän ylimmän bitin perusteella. Eniten täytetyt korit keskiarvoistetaan takaisin täydeksi 8-bittiseksi väriksi, lajitellaan yleisyyden mukaan ja palautetaan paletiksesi. Tulos on tyypillisesti 5–24 hallitsevaa väriä, jotka tiivistävät kuvan visuaalisesti.

Kyllä. Latauspainikkeet tuottavat kaksi muotoa: CSS-muuttujalohkon, joka on valmis liitettäväksi :root-valitsimeen (--color-1, --color-2…), ja JSON-tiedoston, jossa on heksa-, RGB-komponentit ja painoprosentti jokaiselle värille. Molemmat muodot integroituvat siististi design-tokeneihin, Tailwind-asetuksiin ja palettikirjastoihin.

Ei — värien poiminta ja palettien luonti tapahtuvat kokonaan selaimessasi HTML canvas API:n avulla. Kuva pysyy laitteellasi, mikä tekee työkalusta turvallisen julkaisemattomille tuotekuville, luonnosmalleille ja salassapitosopimuksen alaisille brändiaineistoille.

Brändi- identiteettityössä 5–8 väriä on ihanteellinen määrä – se vangitsee hallitsevan teeman laimentamatta korostusvalintoja. Datavisualisointiin suosittelemme 10–16 väriä, jotta saat riittävästi luokittelevia sävyjä. Liukusäätimellä voit valita 5:n ja 24:n väliltä.

Pikselit, joiden alfa on alle 128, jätetään huomiotta, joten läpinäkyvät taustat eivät saastuta palettia "tausta"-väreillä. Tämä tekee kuvan värivalitsimesta erityisen hyvän tuoteleikkauksiin, tarrataideteoksiin ja eristettyihin kohteisiin.

HEX (#RRGGBB) on tiivein ja se, mitä CSS, Figma ja Sketch käyttävät oletuksena. RGB näyttää kolme komponenttiarvoa väliltä 0–255 – hyödyllistä, kun käsittelet kuvadataa ohjelmallisesti. HSL (sävy, kylläisyys, vaaleus) on intuitiivinen värien säätämiseen: muuta sävyä vaihtaaksesi väriperhettä ja säädä vaaleutta vaaleampia ja tummempia sävyjä varten.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

Erillisessä värivalitsimessa ja väripyörässä säädä värisi, niin paneeli näyttää sen kontrastisuhteen puhtaaseen valkoiseen ja puhtaaseen mustaan verrattuna sekä WCAG-luokituksen — AAA, AA, AA Large tai Fail. Käytä tätä ennen tekstin tai painikkeen värin viimeistelyä, jotta se pysyy luettavana ja täyttää WCAG 2.1 -saavutettavuusohjeet.

Kyllä. Erillinen Color Picker & Wheel näyttää lähimmän nimetyn CSS-värin sen HEX-, RGB- tai HSL-arvon vieressä, jonka olet asettanut, mikä on kätevää sävyn nopeaan kuvaamiseen muistiossa, tiketissä tai suunnittelumäärityksessä arvailematta.

Napsauta Random Color Picker & Wheel -kohdassa hypätäksesi uuteen väriin ja käytä sitten sen alla olevaa Color harmonies -paneelia nähdäksesi täydentävät, analogiset, triadiset ja muut yhtenäiset paletit, jotka on rakennettu kyseisestä väristä — nopea tapa löytää lähtökohta, kun suunnittelet tyhjästä sen sijaan, että poimisit värejä olemassa olevasta kuvasta.

Käytä paletin yläpuolella olevaa Koko-pudotusvalikkoa valitaksesi 5, 8, 10, 16 tai 24 hallitsevaa väriä — paletti laskeutuu uudelleen välittömästi, kun muutat sitä. Yhdistä pieni koko kuten 5 puhdasta brändipalettia varten poimintavärin pipetin kanssa napataksesi yhden tai kaksi tarkkaa korostussävyä, jotka automaattinen poiminta saattaisi keskiarvoistaa pois.

Kyllä — itsenäinen Värinvalitsin ja pyörä näyttää nykyisen värisi kontrastisuhteen puhdasta valkoista ja puhdasta mustaa vasten aivan näytteen alla, merkittynä AAA, AA, AA Large tai Fail WCAG-kynnysarvojen mukaan (7:1, 4.5:1, 3:1). Käytä sitä tarkistaaksesi, että teksti/tausta-pari täyttää esteettömyysstandardit, ennen kuin lukitset suunnitteluvärin.

Värinpoimin ja väriympyrä sovittavat automaattisesti minkä tahansa värin, jonka olet valinnut — poimimen, HEX-laatikon tai RGB/HSL-kenttien kautta — sen lähimpään vakiomuotoiseen CSS-värinimeen, joka näytetään 'Lähin nimi' -tekstinä värinäytteen vieressä. Se on nopea tapa kuvailla väri sanallisesti tai löytää sen lähin web-turvallinen vastine.

Kyllä — jokainen napsautus tai napautus ladatussa kuvassa lisää uuden värinäytteen Poimitut värit -luetteloosi sen sijaan, että se korvaisi edellisen, joten voit koota mukautetun joukon tarkkoja pikselivärejä valokuvan eri osista. Poista mikä tahansa yksittäinen näyte sen × -painikkeella tai tyhjennä koko luettelo Tyhjennä poimitut -toiminnolla.

Kyllä — Värinvalitsin ja pyörä -osion Satunnainen-painike (sekoituskuvake) hyppää uuteen sävyn, kylläisyyden ja kirkkauden yhdistelmään yhdellä napsautuksella, mikä on hyödyllistä luovan lukon murtamiseen tai sellaisen paletin tutkimiseen, jota et olisi kirjoittanut käsin. HEX, RGB, HSL ja alla olevat harmonianäytteet päivittyvät kaikki yhdessä.

Kosketusnäytöllä vedä sormeasi kuvan yli esikatsellaksesi sen alla olevaa väriä reaaliaikaisessa kelluvassa värinäytteessä ja nosta sitten sormesi lisätäksesi juuri kyseisen pikselin Valitut värit -luetteloosi — erillistä vahvistusnapautusta ei tarvita. Sama palettikoon pudotusvalikko ja vientipainikkeet toimivat samalla tavalla mobiilissa.

Kyllä. Sivun yläreunassa olevassa väriympyrässä on Satunnainen-painike, joka hyppää satunnaiseen väriin ja näyttää heti sen HEX-, RGB- ja HSL-koodit, lähimmän nimetyn värin, kontrastisuhteet valkoisella ja mustalla sekä täydet harmoniasarjat — komplementaarisen, analogisen, triadisen, jaetun komplementaarisen, tetradisen ja monokromaattisen. Se on nopea tapa löytää lähtökohtia paletille.

Tämä työkalu poimii värejä ladatusta kuvasta tai sisäänrakennetusta väriympyrästä sen sijaan, että se lukisi näyttöäsi reaaliajassa. Nopein kiertotie näytön väripipetille: ota kuvakaappaus, pudota se sivulle ja klikkaa haluamaasi pikseliä — saat samat HEX-, RGB- ja HSL-koodit ilman laajennuksen asentamista, eikä kuvakaappaus koskaan poistu selaimestasi.