โค้ดสีสามารถแบ่งออกได้เป็น 2 กลุ่มหลัก ตามหลักการทำงาน คือ กลุ่มสำหรับ “การแสดงผลบนจอภาพ” และกลุ่มสำหรับ “งานพิมพ์” ซึ่งแต่ละกลุ่มก็มีระบบย่อยที่นิยมใช้แตกต่างกันไป
กลุ่มที่ 1: สำหรับการแสดงผลบนจอภาพ (Additive Color) 🖥️
กลุ่มนี้ใช้ หลักการผสมแสงสี ซึ่งยิ่งผสมกันจะยิ่งสว่างขึ้น เหมาะสำหรับงานดิจิทัลทุกชนิด เช่น เว็บไซต์, แอปพลิเคชัน, และงานวิดีโอ
RGB (Red, Green, Blue)
เป็นระบบพื้นฐานที่สุดที่ใช้แม่สีของแสง 3 สี คือ แดง (Red), เขียว (Green), และน้ำเงิน (Blue) มาผสมกันเพื่อสร้างสีต่างๆ
- รูปแบบ:
rgb(R, G, B)โดย R, G, B คือค่าความเข้มของสีตั้งแต่ 0 (มืดสุด) ถึง 255 (สว่างสุด) - ตัวอย่าง:
rgb(255, 0, 0)คือสีแดงสด
HEX (Hexadecimal)
เป็นรูปแบบของโค้ด RGB ที่นิยมมากที่สุดในการพัฒนาเว็บไซต์ เขียนด้วยเลขฐาน 16 (0-9 และ A-F) ทำให้สั้นกระชับกว่า
- รูปแบบ:
#RRGGBB - ตัวอย่าง:
#FF0000คือสีแดงสด (FF = 255)
HSL (Hue, Saturation, Lightness)
เป็นระบบที่ออกแบบมาให้มนุษย์เข้าใจง่ายกว่า โดยอธิบายสีผ่าน 3 คุณลักษณะ
- Hue (H): เฉดสีบนวงล้อสี (0-360 องศา)
- Saturation (S): ความสดของสี (0-100%)
- Lightness (L): ความสว่าง (0-100%)
- ตัวอย่าง:
hsl(0, 100%, 50%)คือสีแดงสด
กลุ่มที่ 2: สำหรับงานพิมพ์ (Subtractive Color) 🖨️
กลุ่มนี้ใช้ หลักการผสมสีวัตถุธาตุ เหมือนการผสมหมึกบนกระดาษ ยิ่งผสมกันสีจะยิ่งทึบและเข้มขึ้น
CMYK (Cyan, Magenta, Yellow, Key/Black)
เป็นระบบสีมาตรฐานสำหรับเครื่องพิมพ์ทุกชนิด
- C (Cyan): สีฟ้า
- M (Magenta): สีบานเย็น
- Y (Yellow): สีเหลือง
- K (Key): สีดำ
- รูปแบบ: ระบุเป็นเปอร์เซ็นต์ (0-100%)
- ตัวอย่าง:
cmyk(0%, 100%, 100%, 0%)คือสีแดงสดสำหรับงานพิมพ์
ตารางสรุป
| ระบบสี | การใช้งานหลัก | ตัวอย่างโค้ด |
| RGB | งานดิจิทัล, จอภาพ | rgb(255, 0, 0) |
| HEX | เว็บไซต์, แอปพลิเคชัน | #FF0000 |
| HSL | ออกแบบกราฟิก, UI/UX | hsl(0, 100%, 50%) |
| CMYK | งานพิมพ์ทุกชนิด | cmyk(0, 100, 100, 0) |