Kuvan värin valitseminen tarkasti: HEX, RGB ja HSL

Kuvan tarkan värin saat lukemalla yhden pikselin arvon sen sijaan, että arvioisit väriä silmämääräisesti. Avaa kuva värinpoimijassa, vie osoitin kohtaan, klikkaa ja kopioi HEX-koodi. Lukema on kyseisen pikselin tallennettu arvo, joten se pysyy samana aina, kun valitset saman kohdan samasta tiedostosta.

Kuvan väripoimijaTarvitsen tarkan värikoodinTee se ilmaiseksi

Mitä pikseli tallentaa

Jokainen pikseli on pieni värillinen neliö. Näytöllä tai kuvatiedostossa se tallennetaan kolmena lukuna: punainen, vihreä ja sininen, kukin välillä 0–255. Puhdas punainen on 255, 0, 0. Nämä kolme lukua kertovat saman asian jokaisessa muodossa, joten sama väri voidaan kirjoittaa usealla tavalla.

HEX, RGB ja HSL

• HEX kirjoittaa kunkin luvun heksadesimaalina, kaksi merkkiä per kanava. #FF0000 on puhdas punainen. Verkkosivut, CSS ja useimmat suunnitteluohjelmat käyttävät tätä.
• RGB kirjoittaa samat luvut desimaalilukuina muodossa rgb(255, 0, 0). Se on sama väri kuin HEX-koodi.
• HSL kuvaa värin samalla tavalla kuin puhumme väreistä arjessa. Sävy on kulma väripyörällä, kylläisyys kertoo värin voimakkuuden ja vaaleus, kuinka vaalea tai tumma väri on. hsl(0, 100%, 50%) on puhdas punainen.

Käytä HEX-muotoa, kun liität värin koodiin, RGB-muotoa, kun työkalu sitä pyytää, ja HSL-muotoa, kun haluat saman sävyn vaaleamman tai tummemman version. HSL:ssä pelkkä vaaleuden muuttaminen säilyttää sävyn, mikä on käsin tehtynä vaikeampaa HEX-koodilla. Kahden värin kontrastin tarkistukseen katso HEX, RGB, HSL, CMYK ja kontrasti.

Tässä on tyylitiedostossa käytetty väri:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Miksi koodi ei vastaa näyttöä

• Kuva on pakattu. JPEG säästää tilaa tasoittamalla hienoa yksityiskohtaa, joten reunojen lähellä olevat pikselit voivat erota hieman alueen keskustan väristä.
• Reunat sekoittuvat. Kahden värin rajalla olevat pikselit ovat sekoituksia, eivät omia värejään.
• Väriprofiilit eroavat. Poimija lukee selaimen dekoodaamat arvot, jotka ovat sRGB-muodossa. Laajan väriavaruuden profiililla tallennettu valokuva voi näyttää muissa ohjelmissa erilaiselta.
• Skaalaus sekoittaa pikseleitä. Skaalatulla näyttökoolla otettu kuvakaappaus voi sisältää sekoittuneita pikseleitä. Ota kuvakaappaus mahdollisuuksien mukaan täydessä koossa.
• Erittäin suuret kuvat luetaan kopiosta. Kuvat, joiden pidemmällä sivulla on yli 6000 pikseliä, luetaan 6000 pikselin kopiosta, joten yksittäinen pikseli voi erota hieman täyskokoisesta tiedostosta.

Poimi tasaisen alueen keskeltä

Etsi yhtenäinen värialue ja siirry sen keskustaan. Suurennuslasi näyttää osoittimen ympäriltä 11 × 11 pikseliä, joten näet, onko kohta sekoittunut vai tasainen. Näppäimistöllä siirrät ristikkoa yhden pikselin kerrallaan nuolinäppäimillä tai kymmenen pikseliä kerrallaan Shift-näppäimellä, ja poimit värin painamalla Enter-näppäintä. Tarkista lukema ennen kopiointia.

Käytä paletta väriskeemaan

Valokuvassa on harvoin vain yksi väri, josta olet kiinnostunut. Paletti listaa enintään kuusi pääväriä. Se pyöristää jokaisen pikselin 16 tasoon kanavaa kohti, laskee ryhmät ja säilyttää yleisimmät ryhmät, jotka eroavat toisistaan. Jokainen värinäyte näyttää ryhmänsä keskiarvon. Napauta värinäytettä kopioidaksesi sen HEX-koodin. Käytä palettia lähtökohtana, koska se on keskiarvo eikä mitattu brändiväri.

Muuntaminen muodosta toiseen

Jos suunnitteluohjelma pyytää toista muotoa, liitä HEX-koodi värimuuntimeen. Se muuntaa HEX-, RGB- ja HSL-muotojen välillä muuttamatta väriä, joten tulos vastaa valitsemaasi koodia.

Viimeisimmät poiminnat ja yksityisyys

Työkalu säilyttää viimeisimmät poimintasi sivulla, jotta voit verrata niitä. Ne ovat vain tämän välilehden muistissa, ja ne katoavat, kun suljet välilehden. Kuva luetaan selaimessasi, eikä sitä lähetetä palvelimelle.

Näin teet sen fixmintillä

1. Avaa kuvan värinpoimija ja pudota valokuva sivulle.
2. Vie osoitin kohtaan. Tai valitse kuva ja siirrä ristikkoa nuolinäppäimillä yhden pikselin kerrallaan. Pidä Shift-näppäintä pohjassa, jos haluat kymmenen pikseliä kerrallaan.
3. Klikkaa tai paina Enter-näppäintä poimiaksesi värin. Tarkista lukema ennen kopiointia.
4. Kopioi tarvitsemasi arvo HEX-, RGB- tai HSL-kentän vieressä olevalla Kopioi-painikkeella.
5. Jos suunnitteluohjelma pyytää toista muotoa, liitä arvo värimuuntimeen.

Pikavastaukset

Miksi väri näyttää näytölläni erilaiselta? Näyttösi näyttää tiedoston värienhallitun ja skaalatun version. Poimi tasaisen alueen keskeltä ja vertaa HEX-koodia tunnettuun värinäytteeseen.

Mitä muotoa minun kannattaa kopioida? HEX verkkosivuille ja useimpiin suunnitteluohjelmiin. Käytä RGB- tai HSL-muotoa, kun työkalu sitä pyytää.

Lataako työkalu kuvani palvelimelle? Ei. Kuva dekoodataan ja luetaan selaimesi sisällä.