Miten saan kuvassa olevan värin HEX-koodin?

Lataa kuva ja liikuta osoitinta sen päällä tai klikkaa pikseliä – suurennuslasi auttaa osumaan tarkasti oikeaan kohtaan. HEX-koodi (kuten #4f46e5) näkyy heti, ja voit kopioida sen yhdellä klikkauksella.

Mikä on HEX-värikoodi?

HEX-koodi ilmaisee värin #-merkillä ja sitä seuraavalla kuudella heksadesimaalimerkillä – kaksi merkkiä kullekin päävärille (punainen, vihreä ja sininen), kuten esimerkiksi #4f46e5. Se on muoto, jota CSS, HTML ja useimmat suunnittelutyökalut käyttävät.

Voinko saada myös RGB- ja HSL-arvot, enkä vain HEX-koodia?

Kyllä – jokainen poimimasi pikseli näyttää RGB- ja HSL-arvonsa HEX-koodin rinnalla, ja jokainen niistä on kopioitavissa yhdellä klikkauksella.

Hae HEX-väri kuvasta – Värikoodin poimintatyökalu

Väri kuvasta heksadesimaalikoodina – tarkka työkalu web- ja suunnittelutarpeisiin

Tällä sivulla voit ladata kuvan omalta laitteeltasi ja poimia siitä minkä tahansa pikselin värin. Työkalu näyttää heti kyseisen pikselin heksadesimaalivärikoodin (HEX), RGB-arvot sekä HSL-arvot. Pääasiallinen tulos on kuusinumeroinen heksadesimaalikoodi, jota käytetään CSS:ssä ja suunnitteluohjelmissa. Toisin kuin sisarsivuilla, jotka keskittyvät RGB- tai HSL-notaatioon, tämä sivu antaa värin kompaktissa, web-natiivissa muodossa ilman ylimääräisiä sulkeita tai syntaksia. Jos pikselissä on läpinäkyvyyttä, se ilmoitetaan erikseen prosenttilukuna (“Alpha ‹n›% – this pixel is partly transparent.”), koska kuusinumeroinen heksadesimaalikoodi ei sisällä alfakanavaa.

Miten työkalu toimii – syötteet, tulosteet ja reunaehdot

Syötteet

Työkalu hyväksyy yhden kuvatiedoston seuraavissa formaateissa: PNG, JPG, WebP, GIF, AVIF, HEIC. Hyväksytyt MIME-tyypit ovat image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic ja image/heif. Jos pudotat tiedoston, jota ei tueta, saat virheilmoituksen: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” Jos kuvaa ei voida avata, viesti kuuluu: “That image could not be opened. It may be corrupted or in an unsupported format.” Kuvat, joiden pisin sivu ylittää 4096 pikseliä, skaalataan automaattisesti pienemmiksi. Tämä rajoitus estää selaimen ylikuormittumisen ja pitää toiminnan sujuvana.

Tulosteet

Heti kuvan latauduttua työkalu näyttää keskimmäisen pikselin väriarvot ja koordinaatit. Kun liikutat hiirtä kuvan päällä, väriarvot päivittyvät reaaliajassa. Näytöllä on seuraavat tiedot:

“Image ready — move over it to sample, click to save a color.”
Kuvan mitat (leveys × korkeus).
Pikselin koordinaatit (x, y).
HEX: heksadesimaalinen värikoodi (kuusinumeroinen, esim. #1E90FF).
RGB: punaisen, vihreän ja sinisen arvot.
HSL: sävy, kylläisyys ja vaaleus.
Jos pikseli on osittain läpinäkyvä: “Alpha ‹n›% — this pixel is partly transparent.”
Kun napsautat kuvaa: “Saved ‹hex› to your picks.”
Historia tallennetuista väreistä (enintään 12 kohdetta) – napsauttamalla värimäytettä kyseinen väri ladataan uudelleen.
Napsauttamalla mitä tahansa väriarvoa (HEX, RGB, HSL) se kopioituu leikepöydälle.

Reunaehdot ja virhetilanteet

Jos selain estää leikepöydän käytön, näytetään viesti “Could not copy — your browser blocked clipboard access.”
Jos pikseli on osittain läpinäkyvä, sen alfaa ei yhdistetä taustaan vaan luetaan sellaisenaan.
JPEG-kuvien pakkaus ja kuvakaappausten anti-aliasing voivat muuttaa pikselien arvoja – työkalu näyttää aina kuvatiedostossa olevan tarkkaan arvon.
“Start over” -painike tyhjentää kuvan, värihistorian ja palauttaa työkalun alkutilaan.

Heksadesimaaliväri vs. RGB ja HSL – miksi juuri HEX?

Web-kehityksessä heksadesimaaliväri on yleisin tapa ilmaista värejä CSS:ssä. Esimerkiksi color: #1E90FF on lyhyempi ja usein helpompi lukea kuin color: rgb(30, 144, 255) tai color: hsl(210, 100%, 56%). Heksadesimaalijärjestelmä perustuu kantaluvun 16 numeroihin 0–9 ja kirjaimiin A–F. Kaksi ensimmäistä merkkiä edustavat punaista, kaksi keskimmäistä vihreää ja kaksi viimeistä sinistä. Tämä muoto on vakiintunut webin alkuajoista lähtien ja sitä tukevat kaikki selaimet ja suunnitteluohjelmat.

Tässä työkalussa heksadesimaalikoodi on aina kuusinumeroinen, vaikka väri voitaisiin esittää myös kolminumeroisena shorthandina (esim. #F00 = #FF0000). Työkalu ei kuitenkaan koskaan tuota shorthand-muotoa, vaan antaa aina täyden kuusinumeroisen koodin. Jos tarvitset lyhyempää versiota, voit itse muokata sitä – mutta useimmissa CSS-ympäristöissä kuusinumeroinen on suositeltavaa.

Kuvapakkauksen ja anti-aliasingin vaikutus pikselien väreihin

Kun käytät tätä työkalua, on tärkeää ymmärtää, että kuvatiedoston pikselit eivät aina vastaa alkuperäisen kohteen värejä tarkasti. JPEG-pakkaus hävittää tietoa, mikä aiheuttaa värien vaihtelua jopa tasaisilla alueilla. Samoin kuvakaappauksissa ja anti-aliasoiduissa reunoissa pikselit voivat olla sekoituksia viereisistä väreistä. Työkalu näyttää juuri sen arvon, joka kuvatiedostossa on – ei sitä, mitä silmä näkee tai mitä suunnittelija tarkoitti.

Tästä syystä tarkka pikselin valinta on kriittistä. Työkalun suurennuslasi auttaa kohdistamaan valinnan, mutta jos haluat varmimman tuloksen, lataa häviötön PNG-tiedosto alkuperäisestä suunnittelutiedostosta. Jos käytät JPEG-kuvaa, varaudu siihen, että samassa tasaisessa pinnassa voi olla useita eri heksadesimaalikoodeja.

Läpinäkyvyyden käsittely – miksi alfaa ei ole HEX-koodissa

Heksadesimaaliväri ei sisällä alfakanavaa. Tästä syystä työkalu raportoi läpinäkyvyyden erikseen prosenttilukuna. Jos esimerkiksi pikselin alpha on 0,5 (läpinäkyvyys 50 %), työkalu näyttää HEX-koodina pikselin väriarvon, mutta lisäksi kertoo “Alpha 50% – this pixel is partly transparent.”

Tämä on tärkeää, koska CSS:ssä on nykyään mahdollista käyttää kahdeksannumeroista heksadesimaalikoodia (esim. #1E90FF80), mutta se ei ole vielä yhtä laajalti tuettu kaikissa ympäristöissä. Työkalu päätyy selkeyden vuoksi käyttämään kuusinumeroista koodia ja erillistä alpha-ilmoitusta. Jos tarvitset läpinäkyvyyttä CSS:ssä, käytä rgba()-funktiota tai kahdeksannumeroista heksadesimaalikoodia, jonka voit muodostaa HEX- ja alpha-arvoista itse.

Tarkka pikselin valinta – näppäimistönavigointi ja hiiri

Työkalu tukee kahta tapaa valita pikseli: hiiri ja näppäimistö. Hiirellä liikutat osoitinta kuvan yllä ja napsautat tallentaaksesi värin. Näppäimistöllä voit käyttää nuolinäppäimiä liikuttamaan ristikkokohtaa pikselin tarkkuudella. Painamalla Shift-näppäintä samalla siirryt 10 pikseliä kerrallaan. Enter tai Space tallentaa nykyisen värin. Tämä tekee työkalusta käytettävän myös ilman hiirtä, mikä on tärkeää saavutettavuuden ja tarkkuuden kannalta.

Käytännössä näppäimistönavigointi on hyödyllinen silloin, kun tarvitset värin tarkasta koordinaatista eivätkä hiiren liikkeet ole riittävän tarkkoja. Voit esimerkiksi ladata kuvan ja siirtää ristikkoa 20 pikseliä oikealle ja 30 pikseliä alas saadaksesi täsmälleen saman värin kuin aiemmin.

Värien tallennus ja historia – enintään 12 väriä

Työkalu tallentaa napsauttaessa kyseisen värin historiaan. Historiassa voi olla enintään 12 kohdetta. Jos tallennat 13. värin, vanhin poistuu automaattisesti. Värit, joilla on samat RGB-arvot mutta eri alpha-arvot, tallennetaan erillisinä. Tämä on tärkeää, koska kaksi eri läpinäkyvyydellä varustettua pikseliä voivat näyttää täysin erilaisilta, vaikka niiden perusväri olisi sama.

Historian värimäytettä napsauttamalla kyseinen väri ladataan takaisin näkyviin. Voit kopioida minkä tahansa värin arvon (HEX, RGB, HSL) napsauttamalla sitä. Tämä on nopea tapa kerätä paletti kuvasta ilman, että tarvitsee kirjoittaa värikoodeja ylös.

UKK – usein kysytyt kysymykset

Miksi heksadesimaalikoodi on kuusinumeroinen eikä kolminumeroinen? Työkalu tuottaa aina täyden kuusinumeroisen koodin, koska se on standardi CSS:ssä ja takaa tarkkuuden. Kolminumeroinen shorthand (esim. #F00) on mahdollinen vain, kun jokainen värikomponentti toistuu: #FF0000 → #F00. Tämä työkalu ei kuitenkaan käytä shorthandia.

Voinko käyttää tätä työkalua heic-tiedostoille? Kyllä, HEIC- ja HEIF-formaatit ovat tuettuja. Ne ovat Applen käyttämiä kuvamuotoja, jotka toimivat useimmissa nykyaikaisissa selaimissa. Jos kuvasi ei aukea, tarkista, onko se vioittunut tai onko se jossakin muussa formaatissa.

Mitä tapahtuu, jos kuva on suurempi kuin 4096 pikseliä? Työkalu skaalaa kuvan automaattisesti niin, että pisin sivu on enintään 4096 pikseliä. Tämä ei vaikuta väripoiminnan tarkkuuteen, koska skaalaus säilyttää pikselien suhteelliset värit.

Miksi läpinäkyvä pikseli näyttää väriä, vaikka se on läpinäkyvä? Läpinäkyvä pikseli voi sisältää väriarvoja, vaikka se olisi täysin läpinäkyvä. Esimerkiksi PNG-kuvassa läpinäkyvä pikseli voi olla punainen, jolloin HEX-koodi on #FF0000, mutta alpha on 0%. Työkalu kertoo alpha-arvon erikseen.

Voinko tallentaa enemmän kuin 12 väriä? Ei. Historiaan mahtuu kerrallaan 12 väriä. Vanhin väri poistuu automaattisesti, kun tallennat uuden. Jos haluat säilyttää useamman värin, kopioi ne erilliseen tiedostoon tai käytä useampaa istuntoa.

Miten kopioin väriarvon leikepöydälle? Napsauta mitä tahansa näytössä olevaa väriarvoa (HEX, RGB tai HSL). Jos selain sallii leikepöydän käytön, arvo kopioituu. Jos ei, saat virheilmoituksen. Tämä on selainkohtainen rajoitus, jota työkalu ei voi ohittaa.

Yhteenveto

Tämä työkalu on suunniteltu erityisesti heksadesimaalivärien poimintaan kuvista. Se eroaa sisarsivuistaan siinä, että se korostaa HEX-muotoa, joka on web-kehityksen standardi. Työkalu käsittelee läpinäkyvyyden erillisenä tietona, koska kuusinumeroinen HEX ei sitä tue. Kuvapakkaus ja anti-aliasing voivat vaikuttaa tuloksiin, mutta työkalu antaa aina kuvatiedoston tarkan arvon. Näppäimistönavigointi ja suurennuslasi auttavat tarkassa pikselin valinnassa, ja historia mahdollistaa enintään 12 värin tallennuksen. Käyttämällä tätä työkalua saat nopeasti ja luotettavasti tarvitsemasi heksadesimaalivärit suunnittelu- ja kehitysprojekteihisi.

UKK