Miten tietokone tekee värejä: RGB, HEX ja binääriluvut

#FF0000. #00FF00. #0000FF. Olet todennäköisesti törmännyt tällaisiin merkintöihin design-suunnitelmissa tai koodissa. Ne näyttävät salakoodeilta tai pelitunnuksilta. Todellisuudessa ne ovat värien nimiä.

#FF0000

#00FF00

#0000FF

Ylhäältä alas: punainen, vihreä, sininen. Ne ovat nimiä, joita tietokone käyttää väreille. Selitetään, mistä nämä merkinnät tulevat.

RGB — kolme kirjainta värin luomiseen

Red, Green, Blue. Valon kolme perusväriä. Sekoittamalla niitä eri suhteissa syntyy kaikki havaitsemamme värit.

Näemme RGB:tä joka päivä

Lähes kaikkialla missä on näyttö, on myös RGB.

Näyttö / TV — yksi pikseli koostuu kolmesta pisteestä: punainen, vihreä ja sininen
Älypuhelimen näyttö — sama rakenne, pienemmät pikselit
Pelaamisen näppäimistön LED — yhdessä näppäimessä kolme LED-valoa: R, G ja B
PC-kotelon valaistus — RGB-nauha on suoraan RGB-signaali

Kun zoomaat näyttöä tarpeeksi, näet sen itse. Punainen, vihreä, sininen. Siinä kaikki. Miljoonia pieniä RGB-pisteitä kokoontuu yhteen kuvaksi.

Värit sekoitetaan itse

Jokaisella RGB-kanavalla on intensiteetti välillä 0–255.

RGB(255, 0, 0) — vain punainen maksimilla → puhdas punainen
RGB(0, 255, 0) — vain vihreä maksimilla → puhdas vihreä
RGB(255, 255, 0) — punainen + vihreä → keltainen
RGB(0, 0, 0) — kaikki pois → musta
RGB(255, 255, 255) — kaikki maksimilla → valkoinen

Voi tuntua epäintuitiiviselta, että punainen ja vihreä sekoittuvat keltaiseksi, mutta kyse on valon additiivisesta sekoituksesta. Taidetunnilla opittu maaliseos (punainen + vihreä = ruskea) noudattaa eri sääntöjä. Valo kirkastuu kun sitä lisätään, ja kaikki yhdistettynä tuottaa valkoisen.

Kokeile siirtämällä kolmea liukusäädintä itse.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

Oikealla näkyvä 8-numeroinen luku on kanavan binääriesitys. Kun siirrät liukusäädintä, luku muuttuu samalla. Seuraava aihe on: miten ykköset ja nollat tuottavat 256 arvoa.

Miksi juuri 0–255?

Tietokone käsittelee vain ykkösiä ja nollia. Yhtä paikkaa, joka voi olla 0 tai 1, kutsutaan bitiksi. Jokainen lisäbitti kaksinkertaistaa esitettävissä olevien arvojen määrän.

0/1

1 bitti

= 2 arvoa

0/10/1

2 bittiä

= 4 arvoa

0/10/10/10/1

4 bittiä

= 16 arvoa

0/10/10/10/1 0/10/10/10/1

8 bittiä

= 256 arvoa ← RGB:n yksi kanava

8 bittiä = 1 tavu (byte). Yhdessä värissä on kolme RGB-kanavaa, yhteensä 3 tavua = 24 bittiä. 24-bittinen esitys tuottaa noin 16,7 miljoonaa väriä — riittävästi ihmissilmälle, minkä vuoksi 1 tavusta tuli yhden kanavan standardi.

Binääriluvun lukeminen itse

Jokaisella paikalla on kiinteä arvo. Vasemmalta oikealle: 128, 64, 32, 16, 8, 4, 2, 1 — 2:n potenssit.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

Laske yhteen kaikkien 1-merkittyjen paikkojen arvot, niin saat desimaaliluvun.

Esimerkki 1

0128

064

032

016

8 + 2 = 10

Esimerkki 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

Esimerkki 3 — kaikki 8 paikkaa ovat 1

1128

164

132

116

128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255

Tämän vuoksi 8-bitin maksimiarvo on 255 — ja siksi RGB-kanava kulkee tarkasti välillä 0–255.

HEX — sama luku, lyhyemmin

RGB(255, 255, 255). Siinä on 16 merkkiä. Se on pitkä toistettavaksi joka kerta CSS-rivillä tai design-työkalun kentässä. Siksi kehitettiin tapa kirjoittaa sama luku lyhyemmin.

Mitä on heksadesimaalijärjestelmä?

Heksadesimaalijärjestelmässä yhdellä merkillä voidaan esittää luvut 0–15. Tavalliset numeromme ovat vain 0–9, eli kymmenen kappaletta. Puuttuvat kuusi lainataan aakkosista.

0→0

1→1

2→2

3→3

4→4

5→5

6→6

7→7

8→8

9→9

10→A

11→B

12→C

13→D

14→E

15→F

Kolme sääntöä:

0–9 toimii normaalisti kuten aina
10:stä alkaen käytetään A:ta
F on yhden merkin maksimiarvo (= 15)

Miksi juuri heksadesimaalijärjestelmä?

Binäärinen 4-numeroinen luku (0000–1111) esittää täsmälleen 16 arvoa.

0000→0

0001→1

0010→2

0011→3

0100→4

0101→5

0110→6

0111→7

1000→8

1001→9

1010→A

1011→B

1100→C

1101→D

1110→E

1111→F

4 binäärinumeroa = 1 heksadesimaalimerkki. Neljä numeroa tiivistyy yhdeksi merkiksi. Koska RGB-kanava on 8 bittiä, se sopii täsmälleen kahteen heksadesimaalimerkkiin.

RGB:n muuntaminen HEX-muotoon

Muunnetaan RGB(255, 87, 51).

Muunna R-arvo heksadesimaaliksi

255→FF

Muunna G-arvo heksadesimaaliksi

87→57

Muunna B-arvo heksadesimaaliksi

51→33

Lisää # eteen ja järjestä R·G·B

#FF5733

14-merkkinen esitys supistuu 7 merkiksi.

Värin arvaaminen HEX-koodista

HEX-koodia katsomalla voi päätellä, mistä väristä on kyse.

#FF5733 — R maksimi (FF), G puolikas (57), B matala (33) → voimakkaan punainen oranssi
#3576E0 — R matala (35), G keskikokoinen (76), B voimakas (E0) → hieman violettiin vivahtava sininen
#29A85A — R matala (29), G voimakas (A8), B matala (5A) → raikas vihreä

Kun osaat erottaa pelkistä kolmesta paikasta “onko tämä oranssi vai sininen”, designer ja kehittäjä voivat puhua samaa kieltä.

Lyhyt yhteenveto

RGB — kolme kanavaa: punainen, vihreä, sininen; kukin välillä 0–255
8-bittinen binääriluku — selittää, miksi yhdessä kanavassa on täsmälleen 256 arvoa
HEX — tapa kirjoittaa sama luku kahdella merkillä

Kun nämä kolme käsitettä yhdistyvät, värikoodi ei ole enää vierasta kieltä. RGB:n kolme lukua ovat suoraan HEX:n kuusi merkkiä.

Seuraava askel on kääntää nämä luvut suunnittelijoiden kielelle. Pyynnöt kuten «hieman kirkkaampi», «vähemmän kylläinen» tai «sama paperiväri» ovat vaikeita toteuttaa pelkällä RGB:llä ja HEX:llä. Miten HSL, CMYK ja OKLCH ratkaisevat tämän, käsitellään kirjoituksessa RGB ei riitä: HSL, CMYK ja OKLCH – värinotaatiot selitettynä.