Poimi väri kuvasta

Tarvitsetko tietää, mikä väri logossa, valokuvassa tai kuvakaappauksessa oikeasti on? Lataa kuva, vie hiiri kohtaan, joka kiinnostaa, ja klikkaa. Värikoodi kopioituu suoraan leikepöydälle valitsemassasi muodossa: HEX, RGB, HSL, HSV tai LCH. Mitään ei asenneta, eikä kuva poistu koneeltasi.

Miten poimit värin kuvasta

1. Lataa kuva. Vedä se ikkunaan tai klikkaa “Selaa tiedostoja”. Pipetti tunnistaa JPG-, PNG-, WebP- ja GIF-tiedostot.
2. Valitse muoto. Kuvan yläpuolella valitset, missä muodossa väri kopioidaan. Verkkoon sopii yleensä HEX, graafisiin ohjelmiin RGB. Työkalu muistaa valintasi.
3. Vie hiiri värin päälle. Kursorin viereen ilmestyy suurennuslasi, joka näyttää ympäröivät pikselit suurennettuna, ja sen alle värikoodi.
4. Klikkaa. Koodi on leikepöydällä, ja väri tallentuu Valitut värit -välilehdelle. Liitä se sinne, missä sitä tarvitset.

Haluatko kokeilla toista kuvaa? Vedä se suoraan nykyisen kuvan päälle tai poista se roskakori-kuvakkeesta.

Mitä kuvan pipetti osaa

Suurennuslasi, joka näyttää jokaisen pikselin

Tavallinen pipetti näyttää vain kursorin alla olevan värin, ja kirjaimen ohuen reunan osuminen on silloin arvailua. Suurennuslasimme suurentaa kursorin ympäristön 11 × 11 pikselin alueelta ja kehystää keskimmäisen pikselin. Näet tarkalleen, mihin olet klikkaamassa, ennen kuin klikkaat.

Zoomaa aina yksittäisiin pikseleihin asti

Plus- ja miinuspainikkeilla tai hiiren rullalla Ctrl pohjassa lähennät kuvaa jopa 64-kertaiseksi. Kun Ruudukko on päällä, näet pikselien rajat, joten osut tarkalleen oikeaan kohtaan kuvakkeissa, pikselitaiteessa tai pienessä tekstissä.

Väri alkuperäisestä kuvasta, ei pienennöksestä

Moni verkkotyökalu pienentää kuvan ensin ja lukee värin esikatselusta, jossa vierekkäiset pikselit sulautuvat toisiinsa. Meidän pipettimme käsittelee kuvaa täydessä resoluutiossa (pisimmältä sivulta jopa 4096 px), joten saat pikselin todellisen värin.

Kopiointi yhdellä klikkauksella

Ei tekstin maalaamista eikä numeroiden uudelleenkirjoittamista. Jokainen klikkaus kuvassa kopioi koodin valitussa muodossa (Kopioi klikkaamalla:). Jos tarvitset saman värin toisessakin muodossa, värin tiedot näyttävät kaikki viisi formaattia, kukin omalla kopiointipainikkeellaan.

Hallitsevien värien paletti

Heti kun kuva on ladattu, työkalu löytää siitä jopa kahdeksan yleisintä väriä ja näyttää ne Hallitsevat värit -välilehdellä. Lähes samanlaiset sävyt yhdistetään, joten paletissa ei ole viittä eri harmaan sävyä, ja PNG-kuvan läpinäkyvät alueet jätetään huomiotta. Paletti toimii hyvänä lähtökohtana verkkosivun, esityksen tai someviestien väriteemalle. Jos haluat tarkistaa, kestävätkö värit kontrastin ilman sävyä, kokeile kuvan muuntamista harmaasävyiksi.

Valitut värit aina näkyvissä

Jokainen klikkaamasi väri tallentuu Valitut värit -välilehdelle (viimeiset 24). Voit näin vertailla useita kohtia kuvassa ja palata niihin milloin vain. Isolla näytöllä värit näkyvä paneeli on heti kuvan vieressä.

Mihin väri kuvasta -koodia tarvitaan

• Verkkosivut ja sovellukset: Asiakas lähetti logon vain JPG-muodossa, ja tarvitset brändin tarkan värin CSS:ään. Jos tarvitset siitä myös läpinäkyvän version, käytä taustan poistoa kuvasta.
• Grafiikka ja some: Haluat julkaisun tekstin sopivan yhteen kuvan kanssa. Ota väri suoraan siitä.
• Esitykset ja dokumentit: Aseta yrityksen logon värit PowerPointissa, Google Slidesissa tai Canvassa HEX- tai RGB-koodilla.
• Suunnittelun tarkistus: Tarkista kuvakaappauksesta, onko sovelluksen painikkeessa todella se väri, jonka suunnittelu määrittää. Vientikuvien koon voit tarkistaa kuvien mittojen analyysillä.
• Sisustus ja muoti: Sinulla on kuva kankaasta tai seinästä ja etsit samankaltaista sävyä. Koodi toimii hyvänä lähtökohtana väriä valittaessa kaupassa.

Väriformaatit, jotka pipetti palauttaa

• HEX (#1373b6): merkintätapa, jota käytetään HTML:ssä, CSS:ssä ja useimmissa graafisissa ohjelmissa.
• RGB (rgb(19, 115, 182)): punaisen, vihreän ja sinisen osuus, kukin väliltä 0-255. Miten additiivinen värien sekoitus toimii, selittää Wikipedia.
• HSL (hsl(205, 81%, 39%)): sävy, kylläisyys ja kirkkaus. Näistä on helppo tehdä vaaleampi tai tummempi versio.
• HSV: sävy, kylläisyys ja arvo, tuttu Photoshopin tai GIMP:n värinvalinnasta. HSL:n ja HSV:n eron selittää tarkemmin Wikipedia (englanniksi).
• LCH: malli, joka vastaa sitä, miten ihmissilmä värit havaitsee. Se kopioituu muodossa, jota moderni CSS ymmärtää (katso MDN:n dokumentaatio, englanniksi).

Pipetti selvittää kuvan värin. Kun haluat muokata sitä lisää, muuntaa muihin muotoihin tai etsiä siihen sopivia sävyjä, jatka väripyörään.

Usein kysytyt kysymykset

Lähteekö kuvani palvelimelle?

Ei. Kuva ladataan ja käsitellään suoraan selaimessasi, sitä ei lähetetä minnekään, eikä sivun sulkemisen jälkeen siitä jää mitään jäljelle. Voit siis käyttää pipettiä huoletta myös sisäisiin tiedostoihin tai julkaisemattomiin luonnoksiin.

Miten selvitän valokuvan värin HEX-koodin?

Lataa valokuva, pidä yläpuolella valittuna muoto HEX ja klikkaa kohtaa, josta väri kiinnostaa. Koodi, esimerkiksi #75dab2, on heti leikepöydällä.

Miksi kuvasta poimittu väri eroaa todellisesta?

Kamera vaikuttaa väreihin valaistuksen, valkotasapainon ja pakkauksen kautta. Pipetti palauttaa tarkalleen sen värin, joka on tallennettu tiedostoon. Valokuvissa kannattaa siis klikata useaa kohtaa ja verrata niitä Valitut värit -välilehdellä. Jos sekoitat maalia koodin perusteella, pidä sitä vain suuntaa antavana.

Toimiiko pipetti puhelimessa?

Kyllä. Kosketusnäytöllä napautat kohtaa kuvassa, ja koodi kopioituu samalla tavalla kuin tietokoneella. Kursorin vieressä näkyvä suurennuslasi ei näy puhelimella, joten zoomaa kuvaa ensin, jos tarvitset pientä yksityiskohtaa.

Mitä eroa on HEX:llä ja RGB:llä?

Molemmat kuvaavat samaa väriä. RGB ilmaisee sen kolmella luvulla väliltä 0-255, HEX kirjoittaa samat luvut kuusitoistajärjestelmässä #-merkin jälkeen. Esimerkiksi rgb(255, 87, 51) on sama kuin #ff5733.

Miten saan kuvasta koko väripaletin?

Avaa Hallitsevat värit -välilehti. Siellä on jopa kahdeksan kuvan pääväriä, ja klikkaamalla mitä tahansa niistä kopioit sen koodin.