Hogyan állítja elő a számítógép a színeket: RGB, HEX és a bináris számok

#FF0000. #00FF00. #0000FF. Valószínűleg már találkozott ezekkel a jelölésekkel tervfájlokban vagy kódban. Elsőre talán titkos kódnak vagy játék-cheatnek tűnnek. Valójában a színek nevei.

#FF0000

#00FF00

#0000FF

Felülről lefelé: piros, zöld, kék. Így nevezi a számítógép a színeket. Most megvizsgáljuk, honnan ered ez a jelölés.

RGB — három betű, amely a színeket alkotja

Red, Green, Blue — a fény három alapszíne. Ezek arányától függően jön létre az összes látható szín.

RGB-t látunk minden nap

Ahol képernyő van, ott szinte mindig RGB is van.

Monitor / TV — egyetlen pixel három pontból áll: piros, zöld és kék
Okostelefon kijelzője — ugyanez a felépítés, csak kisebb pixelekkel
Gaming billentyűzet LED-ek — minden billentyű mögött három LED: R, G és B
PC-ház világítás — az RGB szalag maga is RGB jeleket kap

Ha elég közel nagyítunk rá egy képernyőre, látjuk: piros, zöld, kék. Ennyi az egész. Több millió apró RGB pont együttese adja ki azt a képet, amit látunk.

A színek keverékből születnek

Az RGB minden csatornájának intenzitása 0-tól 255-ig terjedhet.

RGB(255, 0, 0) — csak a piros teljes → tiszta piros
RGB(0, 255, 0) — csak a zöld teljes → tiszta zöld
RGB(255, 255, 0) — piros + zöld → sárga
RGB(0, 0, 0) — mind ki → fekete
RGB(255, 255, 255) — mind teljes → fehér

Első hallásra meglepő lehet, hogy a piros és a zöld keveréke sárga — de ez fény additív keverése. Más szabályok érvényesek, mint a festéknél (ahol piros + zöld = barnásszürke). A fénynél összeadás megy: minél több, annál világosabb; ha mindet összeadjuk, fehéret kapunk.

Mozgassa a három csúszkát, és nézze meg a hatást.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

A jobb szélső 8 jegyű szám az adott csatorna bináris ábrázolása. Ha mozgatja a csúszkát, ez a szám is változik. A következő témánk: hogyan lehet 0-val és 1-gyel 256 különböző értéket előállítani.

Miért pont 0-tól 255-ig?

A számítógép kizárólag 0-val és 1-gyel dolgozik. Egyetlen 0-t vagy 1-et tároló helyiértéket bitnek nevezünk. Ahány bittel bővítjük a sort, az ábrázolható értékek száma kétszeresére nő.

0/1

1 bit

= 2 érték

0/10/1

2 bit

= 4 érték

0/10/10/10/1

4 bit

= 16 érték

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

8 bit

= 256 érték ← egy RGB csatorna

8 bit = 1 bájt. Egy színnek három RGB csatornája van, összesen 3 bájt = 24 bit. 24 biten közel 16,7 millió szín ábrázolható — ez elegendő az emberi szem számára, ezért lett az 1 bájt a csatornák szabványa.

Olvassuk el a bináris számot

Minden helyiértéknek meghatározott értéke van. Balról jobbra haladva: 128, 64, 32, 16, 8, 4, 2, 1 — 2 hatványai.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

Az 1-est tartalmazó helyiértékek összege adja a tízes számrendszerbeli értéket.

1. példa

0128

064

032

016

8 + 2 = 10

2. példa

1128

164

132

116

128 + 64 + 32 + 16 = 240

3. példa — mind a 8 bit 1-es

1128

164

132

116

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

Ezért a 8 bit maximális értéke 255. Ez pontosan az oka annak, hogy az RGB egy csatornájának tartománya 0-tól 255-ig terjed.

HEX — ugyanaz a szám, rövidebben

RGB(255, 255, 255). Ez 16 karakter. Elég hosszú ahhoz, hogy CSS-soronként vagy tervező eszközökben minden alkalommal beírjuk. Ezért született egy tömörebb jelölésmód.

Mi az a hexadecimális?

A hexadecimális (16-os alapú) számrendszerben egyetlen karakterrel 0-tól 15-ig lehet értékeket jelölni. A megszokott tízes rendszerben csak 0–9, összesen tíz számjegyünk van. A hiányzó hat értékhez az ábécé betűit kölcsönözzük.

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

Három szabály van:

0–9 marad ugyanúgy
10-től A betűvel kezdődik
F az egykarakteres maximális érték (= 15)

Miért éppen hexadecimális?

A 4 bites bináris szám (0000–1111) pontosan 16 különböző értéket képes ábrázolni.

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áris számjegy = 1 hexadecimális karakter. Négy jegy helyett elegendő egy. Mivel egy RGB csatorna 8 bites, pontosan 2 hexadecimális karakterre leképezhető.

RGB átalakítása HEX-re

Konvertáljuk a RGB(255, 87, 51) értéket.

R értéket hexadecimálisba

255→FF

G értéket hexadecimálisba

87→57

B értéket hexadecimálisba

51→33

Elé # jel, sorrendben R·G·B

#FF5733

A 14 karakteres jelölés 7 karakterre rövidül.

Szín leolvasása HEX-ből

Fordítva is működik: a HEX kódból következtetni lehet a színre.

#FF5733 — R maximális (FF), G közepes (57), B alacsony (33) → erősen piros narancssárga
#3576E0 — R alacsony (35), G közepes (76), B erős (E0) → enyhén lilás kék
#29A85A — R alacsony (29), G erős (A8), B alacsony (5A) → üde zöld

Ha a három értékpárból meg tudja mondani, hogy „narancs vagy kék árnyalat”, a tervező és a fejlesztő ugyanazon a nyelven tud kommunikálni.

Összefoglalás egy mondatban

RGB — három csatorna: piros, zöld, kék; mindegyik 0–255 között
8 bites bináris — ez adja az egyetlen csatorna 256 lehetséges értékét
HEX — ugyanazokat a számokat két karakterrel, rövidebben leírva

Ha a három fogalom összekapcsolódik, a színkód nem lesz több ismeretlen jelölesnél. Az RGB három száma pontosan a HEX hat karaktere.

A következő lépés az, hogy ezeket a számokat designer-nyelvvé alakítsuk. A „kicsit világosabb,” „kevésbé telített,” vagy „ugyanez papíron” kérések nehezen kezelhetők csupán RGB-vel és HEX-szel. Hogyan oldja meg ezt a HSL, a CMYK és az OKLCH — folytatás: Az RGB nem elég: HSL, CMYK és OKLCH színjelölések.