เรื่องการใส่สีบนหน้าจอ มีหลายวิธีในการเขียนโค้ด Hex, RGBA และ HSLA เป็นระบบรหัสสีที่ใช้กันมากที่สุด 3 แบบ
คุณน่าจะเคยเจอ Hex Codes และ RGB มาก่อน แต่ HSL ที่อ่านง่ายและเข้าใจได้ตามธรรมชาติมากกว่า อาจยังไม่ได้เข้าระดาร์ของคุณ ทุกวิธีการเขียนสีมีเหตุผลในสถานการณ์ต่างกัน ทุกอย่างที่ต้องการคือความเข้าใจพื้นฐานแต่ละแบบ เพื่อตัดสินใจได้อย่างมีข้อมูล นี่คือความแตกต่างระหว่าง RGB, HEX และ HSL
RGB (Red, Green, Blue) คืออะไร
สมเหตุสมผลที่จะเริ่มจากค่า RGB เนื่องจาก แดง, เขียว, และ น้ำเงิน เป็นสี 3 สีที่หน้าจอใช้ผลิตสีอื่นๆ ได้เกือบทุกสี ทำได้ผ่าน "Additive Color Mixing" แต่ไม่ต้องลึกวิทยาศาสตร์ก็เข้าใจ RGB ได้
rgb(255, 0, 0) คือสีแดง เพราะ R เต็มค่า ถ้าตั้ง G หรือ B เป็น 255 จะได้เขียวหรือน้ำเงินเต็มค่า ตั้งทั้ง 3 เป็น 255 ได้สีขาว (รวมทุกสี) ตั้งเป็น 0 ได้สีดำ เพิ่มค่าที่ 4 (Alpha Channel, 0-1) ได้ Transparency: rgba(0, 0, 0, .5) คือสีดำโปร่งแสง 50%
ดูง่าย แต่จริงๆ ไม่ Intuitive มาก Balance ของ RGB เปลี่ยนไปมากแม้แค่เปลี่ยน Shade ทำให้ยากมากสำหรับมนุษย์ที่จะปรับด้วยมือโดยไม่มี RGB Generator (ซึ่งมีเยอะมาก)
รหัสสี Hexadecimal คืออะไร
Hex คือแค่วิธีเขียนค่า RGB อีกแบบหนึ่ง #6a79f7 (Cornflower Blue) Map ไปตรงกับ rgb(106, 121, 247) 6a คือ Red, 79 คือ Green, f7 คือ Blue
ก่อนอื่น ต้องรู้ว่าในระบบ Hex ตัวอักษร "a-f" แทนเลข 10-15 และเป็น Hexadecimal คือ Base 16 เลข 21 ใน Base 10 คือ 2 * 10 + 1 แต่ใน Hex คือ 2 * 16 + 1 คูณตัวแรกด้วย 16 บวกตัวที่สอง แค่นี้เอง 6a = 6 * 16 + 10 = 106, 79 = 7 * 16 + 9 = 121
แม้คณิตศาสตร์จะสนุก แต่ทำให้ Hex ยิ่งยากกว่า RGB สำหรับมนุษย์ แม้จะ Copy-paste ง่ายและมี Combination ตัวอักษร/ตัวเลขที่จดจำง่าย
เพิ่ม Transparency ให้ Hex ได้โดยวางค่าเทียบเท่า % ของ 255 นำหน้า เช่น #806a79f7 80 ใน Hex = 126 ใกล้เคียง 50% ของ Max 255
HSL (Hue, Saturation, Lightness) คืออะไร
HSL ออกแบบมาเพื่อ Human Readability และกำลังดังเป็น Alternative ของ RGB ทำงานแบบนี้:
Hue = สี ใช้องศาของ Color Wheel บอกว่าอยู่สีไหน ถ้ารู้ Color Wheel และตำแหน่งสีหลัก คุณจะรู้ว่า 45 จะเป็นสีส้ม และ 270 จะเป็นม่วง แค่คิดสักพัก
- 0 = แดง
- 60 = เหลือง
- 120 = เขียว
- 180 = ไซยัน
- 240 = น้ำเงิน
- 300 = มเจนตา
Saturation = ความสaturated ของสี 0% = สีเทา 100% = สีเต็มที่ ถ้าอยาก Mute สีหรือทำให้ Pop มากขึ้น แค่เปลี่ยนค่านี้
Lightness = ความสว่าง/มืด 0% = สีดำ (ไม่สน Hue/Saturation) 100% = สีขาว 50% = สีที่แม่นยำที่สุด
ด้วยข้อมูลนี้ คุณจะรู้ทันทว่า hsl(0, 100%, 50%) คืออะไร มันคือแดง! อยากได้แดงเข้ม濃厚? ลอง 0, 70%, 40% อยากได้แบบนั้นแต่น้ำเงิน? เปลี่ยน 0 เป็น 240 ได้เลย! มี Transparency ด้วย เหมือน RGB: เพิ่มค่าที่ 4 (0-1) เช่น hsla(240, 70%, 40%, .5)
HSV/HSB และ HSI
อีกโมเดลสี? เมื่อไหร่จะจบ? สำหรับคนส่วนใหญ่ที่ทำงานกับสีบนคอมพิวเตอร์ จบแล้ว Hex, RGB, HSL เป็นวิธีเขียนสีที่พบบ่อยที่สุด แต่ถ้าอยู่สายงานที่เกี่ยวกับภาพและสีเยอะ เช่น Graphic Design หรือ ML บนภาพ อาจเจอโมเดล Esoteric เหล่านี้
HSB = Hue Saturation Brightness, HSV = Hue Saturation Value ชื่อต่างกันแต่มันคือโมเดลเดียวกัน ความต่างหลักจาก HSL คือวิธี Define Saturation HSI (Hue Saturation Intensity) มีความต่างเล็กน้อยจาก HSB/HSV แต่ไม่ค่อยใช้ จึงไม่น่าจะเจอในธรรมชาติ
ควรใช้ Color Model ไหน?
โดยทั่วไป การเลือก Color Model เป็น Design Decision เล็กน้อย แต่สิ่งดีๆ ทำจากหลายๆ Decision เล็ก Hex Codes ทำ Copy-paste ง่าย เหมาะสำหรับสถานการณ์ที่มนุษย์ไม่ค่อยเกี่ยวข้อง RGB/RGBA อ่านง่ายพอสมควร เหมาะตอนอยากให้มนุษย์ Tweak Transparency บ้าง ถ้ามนุษย์ต้องเปลี่ยนสีด้วยมือ ใช้ HSL/HSLA นอกจากนี้ก็ Preference แหละ แม้คนฝ่าย HSL มักจะฉลาดและหล่อกว่า (เงื่อนไขไม่ได้รับประกัน)
