Hur datorer skapar färger: RGB, HEX och binära tal

#FF0000. #00FF00. #0000FF. Du har förmodligen sett den här notationen i designskisser eller kod. Det kan se ut som en hemlig kod eller ett spelcheat. Det är faktiskt ett färgnamn.

#FF0000

#00FF00

#0000FF

Uppifrån och ned: rött, grönt, blått. Det är namnen datorer använder för färger. Låt oss ta reda på varifrån den här notationen kommer.

RGB — tre bokstäver som skapar färg

Red, Green, Blue. Ljusets tre primärfärger. Alla synliga färger skapas genom att blanda dessa i olika proportioner.

Vi ser RGB varje dag

Var det finns en skärm finns det nästan alltid RGB.

Monitorer / TV — varje pixel består av tre underpunkter: röd, grön och blå
Smarttelefoner — samma struktur, mindre pixlar
Gaming-tangentbord med LED — tre lysdioder (R, G, B) per tangent
PC-chassibelysning — RGB-strips skickar RGB-signaler

Zoomar du in tillräckligt ser du det. Rött, grönt, blått. Det är allt. Miljontals små RGB-punkter bildar tillsammans den skärmbild du ser.

Färger skapas genom blandning

Varje RGB-kanal har ett intensitetsvärde från 0 till 255.

RGB(255, 0, 0) — bara rött på max → rent rött
RGB(0, 255, 0) — bara grönt på max → rent grönt
RGB(255, 255, 0) — rött + grönt → gult
RGB(0, 0, 0) — allt av → svart
RGB(255, 255, 255) — allt på max → vitt

Det kan kännas kontraintuitivt att rött och grönt ger gult, men det handlar om additiv ljusblandning. Det skiljer sig från att blanda färg (rött + grönt = brunt). Ljus blir ljusare ju mer du lägger till — allt ihop ger vitt.

Dra i de tre reglagen och se vad som händer.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

De 8-siffriga talen till höger är kanalens binära representation. Flytta reglaget och se hur de ändras. Hur 0 och 1 kan representera 256 värden är nästa ämne.

Varför just 0 till 255?

Datorer hanterar bara 0 och 1. En position som rymmer 0 eller 1 kallas en bit. För varje bit som läggs till fördubblas antalet möjliga värden.

0/1

1 bit

= 2 värden

0/10/1

2 bitar

= 4 värden

0/10/10/10/1

4 bitar

= 16 värden

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

8 bitar

= 256 värden ← en RGB-kanal

8 bitar = 1 byte. En färg har tre RGB-kanaler, alltså totalt 3 bytes = 24 bitar. 24 bitar representerar ungefär 16,7 miljoner färger — tillräckligt för det mänskliga ögat, vilket är varför 1 byte blev standard per kanal.

Läsa binär kod direkt

Varje position har ett fast värde. Från vänster: 128, 64, 32, 16, 8, 4, 2, 1 — potenser av 2.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

Addera värdena för alla positioner med en 1:a, så får du decimalvärdet.

Exempel 1

0128

064

032

016

8 + 2 = 10

Exempel 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

Exempel 3 — alla 8 positioner är 1

1128

164

132

116

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

Det är därför maxvärdet för 8 bitar är 255. Det är den exakta anledningen till att en RGB-kanal spänner över 0–255.

HEX — samma siffror, kortare notation

RGB(255, 255, 255). Det är 16 tecken. För CSS eller designverktyg är det lite långt att skriva varje gång. Därför uppstod ett kortare sätt att skriva samma siffror.

Vad är hexadecimalt?

Hexadecimalt (hex) är ett talsystem där ett enda tecken representerar 0 till 15. Vanliga siffror täcker bara 0–9 — tio värden. De sex saknade lånar vi från 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 fungerar som vanligt
10 börjar med A
F är det högsta enstaka tecknet (= 15)

Varför hexadecimalt?

Binärt med 4 siffror (0000–1111) representerar exakt 16 värden.

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ära siffror = 1 hexadecimalt tecken. Fyra siffror pressas ihop till ett. Eftersom en RGB-kanal är 8 bitar passar det perfekt in i exakt 2 hexadecimala tecken.

Konvertera RGB till HEX

Låt oss konvertera RGB(255, 87, 51).

Konvertera R-värdet till hex

255→FF

Konvertera G-värdet till hex

87→57

Konvertera B-värdet till hex

51→33

Sätt ett # framför och skriv R·G·B i ordning

#FF5733

14 tecken krymper till 7 tecken.

Avläsa färg från HEX

Tittar du baklänges på en HEX-kod kan du gissa färgen.

#FF5733 — R max (FF), G halvvägs (57), B lågt (33) → röd-dominant orange
#3576E0 — R lågt (35), G medel (76), B starkt (E0) → lite lila blå
#29A85A — R lågt (29), G starkt (A8), B lågt (5A) → frisk grön

Känner du igen de tre segmenten — “är det orangeaktigt eller blåaktigt?” — kan designers och utvecklare prata samma språk.

Kort sammanfattning

RGB — tre kanaler, röd, grön, blå, vardera 0–255
8-bitars binär — det är vad 256 värden per kanal innebär
HEX — ett kortare sätt att skriva samma siffror, med två tecken per kanal

Förstår du kopplingen mellan de tre begreppen är färgkoder inte längre ett mysterium. De tre siffrorna i RGB är precis de sex tecknen i HEX.

Nästa steg är att översätta dessa tal till formgivarnas språk. Önskemål som «lite ljusare», «mindre mättat» eller «samma på papper» är svåra att hantera med bara RGB och HEX. Hur HSL, CMYK och OKLCH löser detta beskrivs i RGB räcker inte: HSL, CMYK och OKLCH – färgnotationer förklarade.