Компьютер түсті қалай жасайды: RGB, HEX және екілік сандар

#FF0000. #00FF00. #0000FF. Дизайн макетінде немесе кодта бір рет кездестірген белгілеу болуы мүмкін. Шифрға да, ойын кодына да ұқсайды. Шын мәнінде бұл — түстің аты.

#FF0000

#00FF00

#0000FF

Жоғарыдан төмен қарай: қызыл, жасыл, көк. Компьютер түсті атаған кезде қолданатын атаулар. Бұл белгілеу қайдан шыққанын түсіндіреміз.

RGB — түсті жасайтын үш әріп

Red, Green, Blue. Жарықтың үш негізгі түсі. Араластыру үлесіне байланысты біз көретін барлық түс жасалады.

Біз күн сайын RGB-ні көреміз

Экран бар жерде RGB де бар.

Монитор / TV — бір пиксель қызыл·жасыл·көк үш нүктеден тұрады
Смартфон экраны — бірдей құрылым, кішірек пиксельдер
Ойын пернетақтасының LED — бір пернеде R·G·B үш LED
PC корпусының жарығы — RGB жолағы RGB сигналы болып табылады

Экранды жеткілікті ұлғайтсаңыз, көресіз. Қызыл, жасыл, көк. Тек осы. Миллиондаған кішкентай RGB нүктелері жиналып, біз көретін бір экранды жасайды.

Түс араластыру арқылы жасалады

RGB әр арнасының 0-ден 255-ке дейін қарқындылығы бар.

RGB(255, 0, 0) — тек қызыл максималды → таза қызыл
RGB(0, 255, 0) — тек жасыл максималды → таза жасыл
RGB(255, 255, 0) — қызыл + жасыл → сары
RGB(0, 0, 0) — барлығы өшірулі → қара
RGB(255, 255, 255) — барлығы максималды → ақ

Қызыл мен жасылды араластырғанда сары шығуы интуицияға қайшы болуы мүмкін, бірақ бұл жарықтың қосылуы. Сурет сабағында үйренген бояу араластыру (қызыл + жасыл = қоңыр) ережесінен басқаша. Жарық қосылған сайын ашығырақ болады, барлығын қоссаңыз ақ шығады.

Үш сырғытпаны өзіңіз жылжытып тексеріп көріңіз.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

Оң жақтағы 8 орынды сан — сол арнаның екілік көрінісі. Сырғытпаны жылжытсаңыз, бұл сан да өзгереді. 0 мен 1 арқылы 256 мән қалай жасалатыны — келесі тақырып.

Неліктен дәл 0-ден 255-ке дейін?

Компьютер тек 0 мен 1-мен жұмыс жасайды. 0 немесе 1 мәнін сақтайтын бір орынды бит деп атайды. Биттер саны артқан сайын білдіруге болатын мәндер саны 2 есе артады.

0/1

1 비트

= 2 мән

0/10/1

2 бит

= 4 мән

0/10/10/10/1

4 бит

= 16 мән

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

8 бит

= 256 мән ← RGB бір арнасы

8 бит = 1 байт. Бір түс үшін RGB үш арна, жалпы 3 байт = 24 бит. 24 бит шамамен 16,7 миллион түсті білдіреді. Адам көзі ажырата алатын саты жеткілікті болғандықтан 1 байт бір арнаның стандартына айналды.

Екілік санды өзіңіз оқып көріңіз

Әр орынның белгіленген мәні бар. Солдан оңға: 128, 64, 32, 16, 8, 4, 2, 1 — 2-нің дәрежелері.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

1 жазылған орындардың мәндерін қоссаңыз, ондық сан шығады.

Мысал 1

0128

064

032

016

8 + 2 = 10

Мысал 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

Мысал 3 — 8 орын барлығы 1

1128

164

132

116

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

Сондықтан 8 биттің максималды мәні 255. RGB бір арнасының 0~255 аралығында болуының дәл себебі осы.

HEX — бірдей сан, қысқарақ

RGB(255, 255, 255). 16 таңба. CSS бір жолына, дизайн құралының бір өрісіне үнемі жазу үшін тым ұзын. Сондықтан бірдей санды қысқарақ жазу тәсілі пайда болды.

Он алтылық сан дегеніміз не

Он алтылық сан — бір таңбамен 0-ден 15-ке дейін білдіретін санау жүйесі. Бірақ біз күнделікті қолданатын сандар тек 0~9 — 10 таңба. Жетіспейтін 6 таңба әліпбиден алынады.

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

Ереже үш түрлі:

0~9 — кәдімгідей сол күйінде
10-нан A басталады
F — бір таңбаның максималды мәні (= 15)

Неліктен дәл он алтылық?

Екілік 4 орын (0000 ~ 1111) дәл 16 мәнді білдіреді.

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 орын = он алтылық 1 таңба. Төрт таңбаны бір таңбаға қысқартады. RGB бір арнасы 8 бит болғандықтан, дәл он алтылық 2 таңбаға сәйкес келеді.

RGB-ні HEX-ке аудару жолы

RGB(255, 87, 51)-ді түрлендірейік.

R мәнін он алтылыққа

255→FF

G мәнін он алтылыққа

87→57

B мәнін он алтылыққа

51→33

Алдына # қойып R·G·B ретімен

#FF5733

14 таңбалық белгілеу 7 таңбаға дейін қысқарды.

HEX-ті қарап түсті болжау

Керісінше, HEX-ті қарасаңыз, қандай түс екенін болжауға болады.

#FF5733 — R максималды (FF), G орташа (57), B төмен (33) → қызылы күшті қызғылт сары
#3576E0 — R төмен (35), G орташа (76), B күшті (E0) → сәл күлгін аралас көк
#29A85A — R төмен (29), G күшті (A8), B төмен (5A) → салқын жасыл

Тек үш орынды қарап «қызғылт сары ма, көк пе» ажырата алсаңыз, дизайнер мен әзірлеуші бірдей тілде сөйлесе алады.

Бір жолмен қорытынды

RGB — қызыл·жасыл·көк үш арна, әрқайсысы 0~255
Екілік 8 бит — бір арнаның 256 мән білдіретінінің мәні
HEX — бірдей санды екі таңбамен қысқа жазу белгілеуі

Үш ұғым бір жолмен байланысқанда түс коды бөгде тіл болудан шығады. RGB-нің үш саны — HEX-тің алты таңбасы.

Келесі қадам — осы сандарды дизайнер тіліне аудару. «Сәл жарықтандыру,» «қаныққандықты азайту» немесе «қағазда да сол түс» сияқты сұраныстарды тек RGB пен HEX арқылы орындау қиын. HSL, CMYK және OKLCH мұны қалай шешетіні RGB жеткіліксіз: HSL, CMYK және OKLCH түс белгілеулері мақаласында жалғасады.