Slik lager datamaskiner farger: RGB, HEX og det binære systemet

#FF0000. #00FF00. #0000FF. Du har sannsynligvis sett disse i et designdokument eller i kode. De ser ut som kryptiske koder — men det er faktisk fargenavn.

#FF0000

#00FF00

#0000FF

Fra topp til bunn: rød, grønn, blå. Det er navnene datamaskiner bruker på farger. La oss se på hvor de kommer fra.

RGB — tre bokstaver som skaper farger

Red, Green, Blue. Lysets tre primærfarger. Alle fargene vi ser, lages ved å blande disse tre i bestemte mengder.

Vi ser RGB hver dag

Nesten alt med en skjerm bruker RGB.

Skjermer / TV — hvert piksel består av tre punkter: rød, grønn og blå
Smarttelefonskermer — samme oppbygning, bare mindre piksler
Gaming-tastatur-LED — tre LED-er per tast: R, G og B
PC-kabinettbelysning — RGB-strips sender RGB-signaler

Zoom inn nok på en skjerm, og du ser det selv. Rød, grønn, blå. Det er det hele. Millioner av bittesmå RGB-punkter utgjør til sammen bildet du ser.

Farger blandes

Hver RGB-kanal har en styrke fra 0 til 255.

RGB(255, 0, 0) — bare rød på maks → ren rød
RGB(0, 255, 0) — bare grønn på maks → ren grønn
RGB(255, 255, 0) — rød + grønn → gul
RGB(0, 0, 0) — alt slukket → svart
RGB(255, 255, 255) — alt på maks → hvit

Det kan virke rart at rød + grønn = gul, men dette er additiv fargeblanding med lys. Det er annerledes enn å blande maling (rød + grønn = brun). Lys blir lysere jo mer du legger til, og når alt er på, er resultatet hvitt.

Dra i de tre glidebryterne nedenfor og se selv.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

Det 8-sifrede tallet til høyre er kanalens binære representasjon. Når du drar i glidebryteren, endres tallet i takt. Neste tema er hvordan 0-er og 1-ere kan representere 256 verdier.

Hvorfor akkurat 0 til 255?

Datamaskiner jobber bare med 0 og 1. Ett enkelt 0 eller 1 kalles en bit. For hver bit som legges til, fordobles antallet mulige verdier.

0/1

1 bit

= 2 verdier

0/10/1

2 bit

= 4 verdier

0/10/10/10/1

4 bit

= 16 verdier

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

8 bit

= 256 verdier ← én RGB-kanal

8 bits = 1 byte. En farge har tre RGB-kanaler, det vil si 3 bytes = 24 bit totalt. 24 bit kan representere ca. 16,7 millioner farger — nok til at det menneskelige øyet ikke klarer å skille dem fra hverandre, og det er grunnen til at 1 byte per kanal er standarden.

Les et binærtal selv

Hver posisjon har en fast verdi. Fra venstre til høyre: 128, 64, 32, 16, 8, 4, 2, 1 — potenser av 2.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

Legg sammen alle posisjonene med 1, og du får det tilsvarende desimaltallet.

Eksempel 1

0128

064

032

016

8 + 2 = 10

Eksempel 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

Eksempel 3 — alle 8 plasser er 1

1128

164

132

116

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

Det er akkurat derfor maksverdien for 8 bit er 255. Og det er den nøyaktige grunnen til at én RGB-kanal spenner fra 0 til 255.

HEX — samme tall, kortere

RGB(255, 255, 255). Det er 16 tegn. Litt langt å skrive i en CSS-regel eller et designverktøy hele tiden. Derfor kom det en kortere notasjon.

Hva er heksadesimalt?

Heksadesimalt er et tallsystem som representerer 0 til 15 med ett enkelt tegn. Våre vanlige tall dekker bare 0–9 — ti tegn. De manglende seks hentes fra alfabetet.

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

Tre regler:

0–9 er som normalt
Fra 10 starter vi med A
F er det høyeste enkelt tegn (= 15)

Hvorfor akkurat heksadesimalt?

4 binære sifre (0000 – 1111) gir nøyaktig 16 kombinasjoner.

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ære sifre = 1 heksadesimalt tegn. Fire sifre krymper til ett. Siden en RGB-kanal er 8 bit, passer den nøyaktig til to heksadesimale tegn.

Slik konverterer du RGB til HEX

La oss konvertere RGB(255, 87, 51).

Konverter R til heksadesimalt

255→FF

Konverter G til heksadesimalt

87→57

Konverter B til heksadesimalt

51→33

Legg til # foran og sett R·G·B i rekkefølge

#FF5733

14 tegn krymper til 7 tegn.

Les fargen fra HEX

Omvendt kan du få en følelse av fargen bare ved å se på HEX-koden.

#FF5733 — R maks (FF), G halvveis (57), B lav (33) → sterk oransje-rød
#3576E0 — R lav (35), G middels (76), B sterk (E0) → blå med litt fiolett
#29A85A — R lav (29), G sterk (A8), B lav (5A) → frisk grønn

Kan du skille de tre delene, vet du allerede om fargen er oransje, blå eller grønn — og designer og utvikler snakker samme språk.

Kort oppsummering

RGB — tre kanaler (rød, grønn, blå), hver fra 0 til 255
8-bits binært — årsaken til at én kanal kan representere 256 verdier
HEX — en kortere notasjon som skriver de samme tallene med bare to tegn

Når de tre begrepene henger sammen, er fargekoder ikke lenger fremmedspråk. RGB’s tre tall er direkte HEX’s seks tegn.

Neste steg er å oversette disse tallene til designernes språk. Forespørsler som «litt lysere», «mindre mettet» eller «det samme på papir» er vanskelige å håndtere med bare RGB og HEX. Hvordan HSL, CMYK og OKLCH løser dette, beskrives i RGB er ikke nok: HSL, CMYK og OKLCH – fargenotasjoner forklart.