HEX ja RGB: kaksi tapaa kirjoittaa sama väri
Jokainen näytöllä näkemäsi väri sekoitetaan kolmesta valosta: punaisesta, vihreästä ja sinisestä. Nosta kaikki kolme täyteen ja saat valkoisen; sammuta ne kaikki ja saat mustan. HEX ja RGB ovat yksinkertaisesti kaksi merkintätapaa sille, kuinka kirkkaana kunkin näistä kolmesta kanavasta tulisi olla. Ne osoittavat täsmälleen samaan väriin, joten hyvä muunnin vain kääntää näiden kahden kirjoitusjärjestelmän välillä muuttamatta koskaan itse sävyä. Juuri sitä tämä työkalu tekee, kokonaan selaimessasi, samalla kun se näyttää elävän värinäytteen, jotta voit vahvistaa tuloksen omin silmin.
Miten hex-koodi luetaan
Hex-väri näyttää tältä: #1E90FF. Risuaita merkitsee vain alkua; kuusi sen jälkeistä merkkiä ovat kolme paria, kirjoitettuna kaavan #RRGGBB mukaan. Ensimmäinen pari on punainen, toinen vihreä, kolmas sininen. Kukin pari on luku kirjoitettuna heksadesimaalimuodossa, eli 16-kantaisena, jossa numerot kulkevat 0-9 ja sitten A, B, C, D, E, F edustavat lukuja 10-15. Yksi pari voi pitää sisällään arvoja välillä 00 (kanava kokonaan pois päältä) aina arvoon FF (täysin päällä). Tavallisessa desimaalimuodossa tuo alue on tarkalleen 0-255, sama asteikko jota RGB käyttää. 256 mahdollisella tasolla kanavaa kohden kuusimerkkinen muoto voi kuvata 16 777 216 erilaista väriä.
Muunnos molempiin suuntiin, työstetyn esimerkin kanssa
Muuntaaksesi HEX:stä RGB:ksi, jaa koodi sen kolmeen pariin ja muunna kukin 16-kantaisesta tavalliseksi desimaaliksi. Otetaan #1E90FF. Punainen pari on 1E: se on 1 kerrottuna 16:lla, plus 14 (E), mikä on 30. Vihreä pari 90 on 9 kerrottuna 16:lla, plus 0, mikä on 144. Sininen pari FF on 15 kerrottuna 16:lla, plus 15, mikä on 255. Näin #1E90FF muuttuu muotoon rgb(30, 144, 255) — tuttu dodger-sininen.
Toiseen suuntaan meneminen on sama prosessi käänteisesti. Ota kukin RGB-luku ja kirjoita se kahtena hex-numerona. Puhdas punainen, rgb(255, 0, 0), antaa FF, 00 ja 00, jotka yhdistyvät muotoon #FF0000. Yksi asia kannattaa muistaa: jos arvo on alle 16, tarvitset silti molemmat numerot, joten 5 kirjoitetaan 05 eikä vain 5. Muunnin hoitaa tämän täytön puolestasi, mutta se kompastuttaa ihmisiä, kun he tekevät sen käsin.
Missä kutakin formaattia käytetään
HEX on verkon arkikieli. CSS, HTML ja suurin osa kirjoittamastasi koodista turvautuu hex-koodeihin, koska ne ovat kompakteja ja helppoja kopioida. RGB taas nousee esiin design- ja kuvankäsittelytyökaluissa — Figma, Photoshop, Sketch ja Illustrator näyttävät yleensä liukusäätimiä tai kenttiä 0-255-alueella, ja näytön tallennus- tai videosovellukset odottavat usein myös RGB:tä. Niinpä otat säännöllisesti hex-koodin tyylitiedostosta ja tarvitset sen RGB-muodon syöttääksesi design-paneeliin, tai päinvastoin. Tuo edestakainen matka on koko syy siihen, miksi muunnin on kätevä. Jos tarvitset rakentaa kokonaisen joukon toisiinsa sopivia sävyjä yhden kääntämisen sijaan, väripaletin generaattorimme on parempi lähtökohta, ja löydät lisää tällaisia apuvälineitä kohdasta kehittäjätyökalut.
Alfa, läpinäkyvyys ja HSL
Molemmilla merkintätavoilla on laajennettu muoto, joka lisää läpinäkyvyyden. RGB:stä tulee rgba(30, 144, 255, 0.5), jossa neljäs arvo on alfa — 0 on täysin läpinäkyvä ja 1 täysin peittävä. HEX lisää neljännen parin samaan tarkoitukseen, antaen kahdeksanmerkkisen #RRGGBBAA-koodin; 80 on esimerkiksi noin 50 prosentin peittävyys. Jotkin muuntimet tarjoavat myös HSL:n (hue, saturation, lightness eli sävy, kylläisyys, vaaleus), joka kuvaa väriä tavalla, jolla ihminen saattaisi ajatella — valitse sävy väriympyrältä, säädä sitten sen elävyyttä ja kirkkautta. HSL on eri ajattelumalli, ei eri paletti, joten se voi olla intuitiivisempi, kun haluat säätää väriä vaaleammaksi tai vaimeammaksi ilman kolmen erillisen luvun pyörittelyä.
Usein kysytyt kysymykset
Kuuluuko risuaita hex-koodiin?
Risuaita on merkki, joka kertoo CSS:lle ja design-työkaluille, että annat hex-värin. Väri itsessään on sen jälkeiset kuusi merkkiä. Useimmat työkalut hyväksyvät koodin risuaidan kanssa tai ilman ja lisäävät sen takaisin puolestasi.
Mitä eroa on 3-numeroisella ja 6-numeroisella hex-koodilla?
3-numeroinen koodi on lyhennysmuoto, jossa kukin numero kahdennetaan, joten #1AF tarkoittaa #11AAFF. Se yltää vain 4096 väriin, kun taas täysi 6-numeroinen muoto yltää yli 16 miljoonaan.
Miksi hex-koodissani on kahdeksan merkkiä?
8-numeroinen hex-koodi lisää neljännen parin alfaa eli läpinäkyvyyttä varten. Ensimmäiset kuusi merkkiä ovat edelleen punainen, vihreä ja sininen, ja kaksi viimeistä asettavat peittävyyden 00:sta (näkymätön) FF:ään (kiinteä).
Ovatko hex-koodit kirjainkokoriippuvaisia?
Ei. #1e90ff ja #1E90FF kuvaavat täsmälleen samaa väriä. Heksadesimaalikirjaimet toimivat samalla tavalla isoilla tai pienillä kirjaimilla, joten käytä kumpaa tiimisi suosii.
Näyttävätkö HEX ja RGB koskaan erilaisilta näytöllä?
Ei. Kun ne kuvaavat samoja kanava-arvoja, ne ovat identtinen väri. Näkyvä ero johtuu kirjoitusvirheestä tai siitä, että toinen koodi sisältää läpinäkyvyyden, jonka toinen jättää pois.
Kuinka monta väriä standardi hex-koodi voi näyttää?
6-numeroinen hex-koodi tarjoaa 256 tasoa kullekin kolmesta kanavasta, mikä kertautuu 16 777 216 mahdolliseksi väriksi.