คอมพิวเตอร์สร้างสีได้อย่างไร: เรื่องของ RGB, HEX และเลขฐานสอง

#FF0000. #00FF00. #0000FF. รหัสเหล่านี้เคยผ่านตาในไฟล์ดีไซน์หรือโค้ดมาบ้างแล้วแน่นอน ดูเหมือนรหัสลับหรือโค้ดเกม แต่ที่จริงแล้วมันคือ ชื่อของสี

จากบนลงล่างคือ แดง เขียว น้ำเงิน — ชื่อที่คอมพิวเตอร์ใช้เรียกสี มาดูกันว่ารหัสเหล่านี้มาจากไหน

RGB — สามตัวอักษรที่สร้างสี

Red, Green, Blue คือสามแม่สีของแสง ผสมกันในสัดส่วนต่างๆ จึงได้ทุกสีที่มองเห็นบนหน้าจอ

เราเห็น RGB อยู่ทุกวัน

ที่ใดมีหน้าจอ ที่นั่นมี RGB

• จอมอนิเตอร์ / TV — แต่ละพิกเซลประกอบด้วยจุดสีแดง เขียว น้ำเงินสามจุด
• หน้าจอสมาร์ตโฟน — โครงสร้างเดียวกัน แต่พิกเซลเล็กกว่า
• LED คีย์บอร์ดเกมมิ่ง — แต่ละปุ่มมี LED สาม R·G·B ดวง
• ไฟตกแต่ง PC — RGB strip ก็คือสัญญาณ 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) — ทั้งหมดสูงสุด → ขาว

แดงผสมเขียวได้เหลืองอาจดูขัดกับสัญชาตญาณ แต่นี่คือ การผสมแสง ต่างจากการผสมสีน้ำในชั่วโมงศิลปะ (แดง + เขียว = น้ำตาล) แสงยิ่งรวมกันยิ่งสว่าง รวมครบทุกสีได้ขาว

ลองขยับสไลเดอร์ทั้งสามด้วยตัวเองดูได้เลย

ตัวเลข 8 หลักทางด้านขวาคือ เลขฐานสอง ของช่องนั้น เมื่อขยับสไลเดอร์ตัวเลขจะเปลี่ยนตาม จะได้ 256 ค่าจาก 0 กับ 1 ได้อย่างไร — นั่นคือหัวข้อถัดไป

ทำไมถึงเป็น 0 ถึง 255?

คอมพิวเตอร์ทำงานกับ 0 และ 1 เท่านั้น หนึ่งหลักที่บรรจุได้แค่ 0 หรือ 1 เรียกว่า บิต (bit) ยิ่งเพิ่มบิต จำนวนค่าที่แทนได้ก็เพิ่มขึ้น สองเท่า ทุกครั้ง

8 บิต = 1 ไบต์ (byte) สีหนึ่งสีมี RGB สามช่อง รวมเป็น 3 ไบต์ = 24 บิต ซึ่งแทนสีได้ประมาณ 16.7 ล้านสี — มากพอสำหรับสายตามนุษย์ จึงกลายเป็นมาตรฐาน 1 ไบต์ต่อช่อง

ลองอ่านเลขฐานสองด้วยตัวเอง

แต่ละหลักมีค่าตายตัว จากซ้ายไปขวาคือ 128, 64, 32, 16, 8, 4, 2, 1 — กำลังของ 2

บวกค่าของทุกหลักที่เป็น 1 รวมกัน ก็จะได้เลขฐานสิบ

ดังนั้นค่าสูงสุดของ 8 บิตคือ 255 นั่นคือเหตุผลที่ RGB แต่ละช่องมีช่วง 0–255 พอดี

HEX — ตัวเลขเดิม แต่สั้นกว่า

RGB(255, 255, 255) มีอักขระ 16 ตัว ยาวเกินไปสำหรับเขียนทุกครั้งใน CSS หรือช่องดีไซน์ จึงมีวิธีเขียนตัวเลขเดียวกันให้สั้นลง

เลขฐานสิบหกคืออะไร

เลขฐานสิบหกคือระบบที่ใช้ตัวอักษรหนึ่งตัวแทนค่า 0–15 แต่ตัวเลขที่ใช้กันทั่วไปมีแค่ 0–9 สิบตัว จึงยืมตัวอักษรจากตัวละตินมาเติม 6 ตัว

กฎมีสามข้อ

• 0–9 ใช้ตามปกติ
• 10 เป็นต้นไป เริ่มจาก A
• F คือค่าสูงสุดหนึ่งหลัก (= 15)

ทำไมถึงเป็นเลขฐานสิบหก?

เลขฐานสอง 4 หลัก (0000 – 1111) แทนได้พอดี 16 ค่า

เลขฐานสอง 4 หลัก = เลขฐานสิบหก 1 หลัก ย่อสี่หลักเหลือหนึ่งหลัก เมื่อ RGB แต่ละช่องมี 8 บิต จึงได้ เลขฐานสิบหกพอดี 2 หลัก

วิธีแปลง RGB เป็น HEX

ลองแปลง RGB(255, 87, 51) กัน

จาก 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 — เขียนตัวเลขเดิมในรูปแบบสั้น 2 หลัก

เมื่อสามแนวคิดนี้เชื่อมกัน รหัสสีไม่ใช่ภาษาต่างดาวอีกต่อไป — ตัวเลขสาม RGB ก็คือหกอักขระ HEX นั่นเอง

ขั้นตอนต่อไปคือการแปลงตัวเลขเหล่านี้เป็นภาษาของนักออกแบบ คำขอเช่น “สว่างขึ้นนิดหน่อย” “ความอิ่มตัวน้อยลง” หรือ “เหมือนกันบนกระดาษ” จัดการได้ยากด้วย RGB และ HEX เพียงอย่างเดียว วิธีที่ HSL, CMYK และ OKLCH แก้ปัญหานี้มีต่อใน RGB ยังไม่พอ: สัญกรณ์สี HSL, CMYK และ OKLCH