Máy tính tạo ra màu sắc như thế nào: RGB, HEX và số nhị phân

#FF0000. #00FF00. #0000FF. Đây là những ký hiệu bạn từng gặp trong bản thiết kế hoặc trong code. Trông như mật mã, như mã game. Thực ra chúng là tên của màu sắc.

#FF0000

#00FF00

#0000FF

Lần lượt từ trên xuống là đỏ, xanh lá, xanh lam. Đây là tên gọi màu sắc mà máy tính sử dụng. Bài viết này sẽ giải thích nguồn gốc của ký hiệu đó.

RGB — Ba chữ cái tạo nên màu sắc

Red, Green, Blue. Ba màu gốc của ánh sáng. Mọi màu sắc chúng ta nhìn thấy đều được tạo ra từ sự pha trộn ba màu này theo tỷ lệ khác nhau.

Chúng ta đang thấy RGB mỗi ngày

Hầu hết mọi nơi có màn hình đều dùng RGB.

Màn hình / TV — mỗi pixel gồm ba điểm đỏ, xanh lá và xanh lam
Màn hình điện thoại — cùng cấu trúc, pixel nhỏ hơn
LED bàn phím gaming — mỗi phím có ba LED R·G·B
Đèn viền case PC — dải RGB chính là tín hiệu RGB

Phóng to màn hình đủ lớn, bạn sẽ thấy rõ. Đỏ, xanh lá, xanh lam. Chỉ vậy thôi. Hàng triệu điểm RGB nhỏ xíu ghép lại thành một khung hình chúng ta nhìn thấy.

Màu sắc được tạo ra bằng cách pha trộn

Mỗi kênh RGB có cường độ từ 0 đến 255.

RGB(255, 0, 0) — chỉ đỏ ở mức tối đa → đỏ thuần
RGB(0, 255, 0) — chỉ xanh lá ở mức tối đa → xanh lá thuần
RGB(255, 255, 0) — đỏ + xanh lá → vàng
RGB(0, 0, 0) — tất cả tắt → đen
RGB(255, 255, 255) — tất cả tối đa → trắng

Đỏ và xanh lá pha lại thành vàng có thể gây khó hiểu, nhưng đây là tổng hợp ánh sáng. Khác với trộn màu sơn trong giờ mỹ thuật (đỏ + xanh lá = nâu). Ánh sáng càng cộng thêm càng sáng, và khi cộng tất cả lại thì thành trắng.

Hãy thử kéo ba thanh trượt để tự kiểm chứng.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

Dãy số 8 chữ số ở bên phải là biểu diễn nhị phân của kênh đó. Kéo thanh trượt, dãy số cũng thay đổi theo. Chủ đề tiếp theo là cách dùng 0 và 1 để tạo ra 256 giá trị.

Tại sao lại là 0 đến 255?

Máy tính chỉ xử lý 0 và 1. Một vị trí chứa giá trị 0 hoặc 1 gọi là bit. Càng nhiều bit, số giá trị biểu diễn được càng tăng gấp đôi.

0/1

1 bit

= 2 giá trị

0/10/1

2 bit

= 4 giá trị

0/10/10/10/1

4 bit

= 16 giá trị

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

8 bit

= 256 giá trị ← một kênh RGB

8 bit = 1 byte. Một màu có ba kênh RGB, tổng cộng 3 byte = 24 bit. 24 bit biểu diễn được khoảng 16,7 triệu màu — đủ để mắt người phân biệt, và đó là lý do 1 byte trở thành tiêu chuẩn cho mỗi kênh.

Đọc số nhị phân trực tiếp

Mỗi vị trí có một giá trị cố định. Từ trái sang phải lần lượt là 128, 64, 32, 16, 8, 4, 2, 1 — lũy thừa của 2.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

Cộng tất cả giá trị ở các vị trí có số 1 lại sẽ ra số thập phân.

Ví dụ 1

0128

064

032

016

8 + 2 = 10

Ví dụ 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

Ví dụ 3 — tất cả 8 vị trí đều là 1

1128

164

132

116

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

Đó là lý do giá trị tối đa của 8 bit là 255. Và đây cũng là lý do chính xác tại sao phạm vi biểu diễn của mỗi kênh RGB là 0–255.

HEX — Cùng con số, viết ngắn hơn

RGB(255, 255, 255). Gồm 16 ký tự. Viết đi viết lại trên từng dòng CSS hay ô trong công cụ thiết kế thật dài dòng. Vì vậy xuất hiện cách viết ngắn gọn hơn cho cùng một con số.

Hệ thập lục phân là gì?

Hệ thập lục phân biểu diễn từ 0 đến 15 bằng một ký tự duy nhất. Tuy nhiên, chữ số thông thường chỉ có 10 ký tự từ 0–9. Sáu ký tự còn thiếu được mượn từ bảng chữ cái.

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

Quy tắc có ba điểm.

0–9 vẫn giữ nguyên như thường
Từ 10 bắt đầu bằng A
F là giá trị tối đa một ký tự (= 15)

Tại sao lại là hệ thập lục phân?

Số nhị phân 4 chữ số (0000 ~ 1111) biểu diễn chính xác 16 giá trị.

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 chữ số nhị phân = 1 ký tự thập lục phân. Rút bốn ký tự xuống còn một. Vì mỗi kênh RGB có 8 bit nên vừa khớp với hai ký tự thập lục phân.

Cách chuyển RGB sang HEX

Hãy chuyển đổi RGB(255, 87, 51).

Chuyển giá trị R sang thập lục phân

255→FF

Chuyển giá trị G sang thập lục phân

87→57

Chuyển giá trị B sang thập lục phân

51→33

Thêm # ở đầu và sắp xếp theo thứ tự R·G·B

#FF5733

Ký hiệu 14 ký tự rút gọn còn 7 ký tự.

Nhìn HEX đoán màu

Ngược lại, nhìn HEX cũng có thể đoán được màu gì.

#FF5733 — R tối đa (FF), G trung bình (57), B thấp (33) → cam đậm đỏ
#3576E0 — R thấp (35), G trung bình (76), B mạnh (E0) → xanh lam hơi tím
#29A85A — R thấp (29), G mạnh (A8), B thấp (5A) → xanh lá tươi mát

Chỉ cần đọc ba cặp ký tự là có thể phân biệt “cam hay xanh lam” — từ đó designer và developer có thể nói chuyện cùng một ngôn ngữ.

Tóm tắt một dòng

RGB — Ba kênh đỏ·xanh lá·xanh lam, mỗi kênh từ 0–255
Nhị phân 8 bit — Nguồn gốc của 256 giá trị mỗi kênh biểu diễn được
HEX — Cách viết ngắn gọn cùng con số đó thành hai ký tự

Khi ba khái niệm này liên kết thành một chuỗi, mã màu không còn là ngoại ngữ nữa. Ba con số RGB chính là sáu ký tự HEX.

Bước tiếp theo là chuyển đổi những con số này thành ngôn ngữ của designer. Những yêu cầu như “sáng hơn một chút,” “ít bão hòa hơn,” hay “giống nhau trên giấy” rất khó xử lý chỉ với RGB và HEX. Cách HSL, CMYK và OKLCH giải quyết điều này được tiếp nối trong RGB chưa đủ: ký hiệu màu HSL, CMYK và OKLCH.