Sådan laver computere farver: RGB, HEX og det binære system

#FF0000. #00FF00. #0000FF. Du har sandsynligvis set disse i et designdokument eller i kode. De ser ud som kryptiske koder — men det er faktisk farvenavne.

#FF0000

#00FF00

#0000FF

Fra top til bund: rød, grøn, blå. Det er navnene, computere bruger til farver. Lad os se på, hvor de kommer fra.

RGB — tre bogstaver der skaber farver

Red, Green, Blue. Lysets tre primærfarver. Alle de farver, vi ser, skabes ved at blande disse tre i bestemte mængder.

Vi ser RGB hver dag

Næsten alt med en skærm bruger RGB.

Skærme / TV — hvert pixel består af tre punkter: rød, grøn og blå
Smartphoneskærme — samme opbygning, blot mindre pixels
Gaming-tastatur-LED — tre LED’er pr. tast: R, G og B
PC-kabinetbelysning — RGB-strips sender RGB-signaler

Zoom ind nok på en skærm, og du ser det selv. Rød, grøn, blå. Det er det hele. Millioner af bittesmå RGB-punkter udgør tilsammen det billede, du ser.

Farver blandes

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

RGB(255, 0, 0) — kun rød på maks → ren rød
RGB(0, 255, 0) — kun grøn på maks → ren grøn
RGB(255, 255, 0) — rød + grøn → gul
RGB(0, 0, 0) — alt slukket → sort
RGB(255, 255, 255) — alt på maks → hvid

Det kan virke mærkeligt, at rød + grøn = gul, men dette er additiv farveblanding med lys. Det er anderledes end at blande maling (rød + grøn = brun). Lys bliver lysere, jo mere du tilføjer, og når det hele er tændt, er resultatet hvidt.

Træk i de tre slidere herunder og se selv.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

Det 8-cifrede tal til højre er kanalens binære repræsentation. Når du trækker i slideren, skifter tallet med. Næste emne er, hvordan 0’er og 1’ere kan repræsentere 256 værdier.

Hvorfor præcis 0 til 255?

Computere arbejder kun med 0 og 1. Et enkelt 0 eller 1 kaldes en bit. For hver bit der tilføjes, fordobles antallet af mulige værdier.

0/1

1 bit

= 2 værdier

0/10/1

2 bit

= 4 værdier

0/10/10/10/1

4 bit

= 16 værdier

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

8 bit

= 256 værdier ← én RGB-kanal

8 bits = 1 byte. En farve har tre RGB-kanaler, dvs. 3 bytes = 24 bit i alt. 24 bit kan repræsentere ca. 16,7 millioner farver — nok til at det menneskelige øje ikke kan skelne imellem dem, og det er grunden til, at 1 byte pr. kanal er standarden.

Læs et binært tal selv

Hver position har en fast værdi. Fra venstre til højre: 128, 64, 32, 16, 8, 4, 2, 1 — potenser af 2.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

Læg alle positionerne med 1 sammen, og du får det tilsvarende decimaltal.

Eksempel 1

0128

064

032

016

8 + 2 = 10

Eksempel 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

Eksempel 3 — alle 8 pladser er 1

1128

164

132

116

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

Det er præcis grunden til, at maksimum for 8 bit er 255. Og det er den præcise grund til, at én RGB-kanal spænder fra 0 til 255.

HEX — samme tal, kortere

RGB(255, 255, 255). Det er 16 tegn. Lidt langt at skrive i en CSS-regel eller et designværktøj hele tiden. Derfor kom der en kortere notation.

Hvad er hexadecimalt?

Hexadecimalt er et talsystem, der repræsenterer 0 til 15 med ét enkelt tegn. Vores normale tal dækker kun 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øjeste enkelt tegn (= 15)

Hvorfor præcis hexadecimalt?

4 binære cifre (0000 – 1111) giver nøjagtigt 16 kombinationer.

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 cifre = 1 hexadecimalt tegn. Fire cifre skrumper til ét. Da en RGB-kanal er 8 bit, passer den nøjagtigt til to hexadecimale tegn.

Sådan konverterer du RGB til HEX

Lad os konvertere RGB(255, 87, 51).

Konverter R til hexadecimalt

255→FF

Konverter G til hexadecimalt

87→57

Konverter B til hexadecimalt

51→33

Tilføj # foran og sæt R·G·B i rækkefølge

#FF5733

14 tegn skrumper til 7 tegn.

Aflæs farven fra HEX

Omvendt kan du få en fornemmelse af farven bare ved at se på HEX-koden.

#FF5733 — R maks (FF), G halvvejs (57), B lav (33) → stærk orange-rød
#3576E0 — R lav (35), G middel (76), B stærk (E0) → blå med lidt violet
#29A85A — R lav (29), G stærk (A8), B lav (5A) → frisk grøn

Kan du skelne de tre dele, ved du allerede, om farven er orange, blå eller grøn — og designer og udvikler taler samme sprog.

Kort opsummering

RGB — tre kanaler (rød, grøn, blå), hver fra 0 til 255
8-bit binært — årsagen til, at én kanal kan repræsentere 256 værdier
HEX — en kortere notation, der skriver de samme tal med blot to tegn

Når de tre begreber hænger sammen, er farvekoder ikke længere fremmedsprog. RGB’s tre tal er direkte HEX’s seks tegn.

Næste skridt er at oversætte disse tal til designernes sprog. Ønsker som „lidt lysere”, „mindre mættet” eller „det samme på papir” er svære at håndtere med kun RGB og HEX. Hvordan HSL, CMYK og OKLCH løser det, beskrives i RGB er ikke nok: HSL, CMYK og OKLCH – farvenotationer forklaret.