HEX-värikoodit selitettynä: näin #RRGGBB toimii

Näin HEX-värikoodi toimii

Jokainen näytön väri sekoitetaan punaisesta, vihreästä ja sinisestä valosta. HEX-koodi kirjoittaa kunkin valon voimakkuuden kahdella merkillä #-merkin jälkeen: ensin punainen, sitten vihreä ja lopuksi sininen. Tämä on #RRGGBB-kaava.

Merkit ovat heksadesimaalisia, eli niillä lasketaan 16 numerolla: 0–9 ja sen jälkeen a (10), b (11), c (12), d (13), e (14) ja f (15). Yksi pari kattaa 256 arvoa, 00:sta (0) ff:ään (255), täsmälleen saman alueen kuin rgb().

Kun haluat muuttaa parin tavalliseksi luvuksi, kerro ensimmäinen numero 16:lla ja lisää toinen. Alla on #1e90ff eli CSS-väri dodgerblue neljässä muodossa ja sen jälkeen laskettuna pari kerrallaan.

#1e90ff on siis rgb(30, 144, 255): vähän punaista, melko paljon vihreää ja täysi sininen, mistä syntyy kirkas taivaansininen. Kolme 256 arvon paria antaa 16 777 216 mahdollista väriä.

Kolmi- ja nelinumeroinen HEX-lyhenne

Kun jokaisen parin molemmat numerot ovat samat, parin voi kirjoittaa kerran. #ffcc00 lyhenee muotoon #fc0, ja selain kahdentaa jokaisen numeron takaisin. #1e90ff:llä ei ole lyhyttä muotoa, koska 1e ja 90 eivät ole kahdennettuja pareja.

Lyhyt muoto kattaa vain 4 096 väriä 16,7 miljoonasta. Nelinumeroinen versio lisää peittävyyden samalla tavalla, joten #f008 tarkoittaa #ff000088.

HEX-peittävyys: kahdeksannumeroinen HEX ja alfa

Kahdeksannumeroinen koodi lisää neljännen parin alfalle eli peittävyydelle: #RRGGBBAA. 00 on täysin läpinäkyvä ja ff täysin peittävä. Kaikki nykyiset selaimet tukevat sitä CSS:ssä, samoin nelinumeroista #RGBA-lyhennettä.

Saat parin kertomalla peittävyyden 255:llä, pyöristämällä kokonaisluvuksi ja muuntamalla heksaksi. 50 % antaa 127,5, joka pyöristyy 128:aan ja kirjoitetaan 80. Tässä koko taulukko sovellettuna väriin #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Kaksi sudenkuoppaa. Ensinnäkin 80 on 128/255 eli 50,2 %, ei tasan 50 %: HEX-alfassa on vain 256 askelta, joten useimmat tasaprosentit ovat lähiarvoja. Toiseksi Android laittaa alfan ensimmäiseksi. Androidin väriresurssissa #801e90ff tarkoittaa samaa kuin #1e90ff80 CSS:ssä.

Näin luet HEX-koodia silmämääräisesti

Värin voi arvata muuntamatta mitään. Katso jokaisen parin ensimmäistä numeroa, sillä se kantaa lähes kaiken tiedon.

• Suurin ensimmäinen numero on hallitseva valo. Värissä #d2691e punaisella on d, vihreällä 6 ja sinisellä 1, joten se on oranssinruskea.
• Kaksi korkeaa kanavaa sekoittuu: punainen ja vihreä tekevät keltaista, vihreä ja sininen syaania, punainen ja sininen magentaa tai violettia.
• Kolme samaa paria tekee harmaata. #333333 on tummanharmaa, #999999 vaaleanharmaa. Lähes samat parit, kuten #708090, antavat hillityn, harmahtavan värin.
• Korkeat numerot kauttaaltaan tarkoittavat vaaleaa väriä, matalat tummaa. Kun kaikki kolme paria ovat c0 tai enemmän, väri on haalea. Kun kaikki ovat 30 tai vähemmän, väri on hyvin tumma.
• Vihreä näyttää paljon kirkkaammalta kuin sininen samalla luvulla. Värin #00ff00 OKLCH-vaaleus on 0,866, värin #0000ff vain 0,452.

Miksi #808080 ei ole keskiharmaa

#808080 on lukujen puolivälissä: 128/255 jokaisessa kanavassa. Silti se ei näytä olevan mustan ja valkoisen puolivälissä. Sen OKLCH-vaaleus on 0,600, joten se näyttää olevan 60 % matkasta kohti valkoista.

HEX-arvot on jo koodattu sRGB-käyrällä, joka seuraa silmää suunnilleen mutta ei tarkasti. #808080 säteilee noin 21,6 % valkoisen valosta, ja havaintomallit sijoittavat visuaalisen keskikohdan alemmas: OKLCH kohtaan #636363, CIELAB kohtaan #777777.

Tällä on merkitystä tekstille. Harmaa #808080 valkoisella antaa 3,95:1 eikä läpäise WCAG AA:ta leipätekstille. #767676 on vaalein harmaa, joka saavuttaa 4,5:1, ja askeleen vaaleampi #777777 jää jo vajaaksi arvolla 4,48:1.

Isot vai pienet kirjaimet, # vai ei

HEX-koodeissa kirjainkoolla ei ole väliä. #1E90FF, #1e90ff ja #1E90ff ovat sama väri CSS:ssä, SVG:ssä ja suunnittelutyökaluissa. Valitse yksi tyyli ja pidä siitä kiinni kaikkialla, jotta koodihaku löytää jokaisen käyttökohdan. CSS:ssä pienet kirjaimet ovat yleisin valinta.

#-merkki kuuluu CSS:n syntaksiin, ei väriin. Figma ja monet suunnittelutyökalut näyttävät koodin ilman sitä, ja ohjelmointikielet kirjoittavat sen usein lukuna 0x-etuliitteellä, kuten Flutterissa, jossa Color(0xFF1E90FF) alkaa alfaparilla.

Näin löydät näytöllä olevan värin HEX-koodin

Käytä pipettiä: työkalua, joka lukee osoittimen alla olevan värin ja näyttää sen koodin. Ne ovat ilmaisia ja yleensä valmiiksi asennettuja.

• Chrome ja Edge: avaa DevTools F12-näppäimellä, napsauta mitä tahansa värineliötä Styles-paneelissa ja poimi väri sivulta pipettikuvakkeella.
• PickShade: etusivun värivalitsimessa on Chromessa ja Edgessä pipettipainike, jolla voi poimia värin mistä tahansa näytöltä.
• Windows: asenna Microsoft PowerToys ja avaa Color Picker painamalla Win + Shift + C.
• macOS: avaa Digitaalinen värimittari kohdasta Ohjelmat, Lisäohjelmat. Vaihda se sRGB:hen ja valitse sitten Näytä, Näytä arvot, Heksadesimaalina.
• Figma, Photoshop ja useimmat suunnitteluohjelmat: paina I, niin saat pipetin.
• Valokuvassa tai kuvakaappauksessa: avaa se kuvan värivalitsimessa ja napsauta mitä tahansa pikseliä. Kuva pysyy laitteellasi.

Poimittu arvo voi poiketa alkuperäisestä muutaman yksikön, koska näytöt käyttävät väriprofiileja ja kuvat pakataan. Kun tarvitset tarkan arvon, kopioi se suunnittelutiedostosta tai CSS:stä, älä kuvakaappauksesta.

Kysymyksiä ja vastauksia