RGB และ HSL ต่างกันอย่างไร
RGB (Red, Green, Blue) เป็นโมเดลสีแบบบวกที่จอแสดงผลใช้ผสมแสงสามสีในความเข้มต่างกัน แต่ละช่องมีค่าระหว่าง 0 ถึง 255 ยิ่งตัวเลขสูงยิ่งมีแสงสีนั้นมาก ตัวอย่าง rgb(79, 70, 229) หมายถึงผสมแสงแดง 79 หน่วย เขียว 70 หน่วย และน้ำเงิน 229 หน่วย โมเดลนี้เหมาะสำหรับการควบคุมฮาร์ดแวร์โดยตรง แต่ไม่เป็นธรรมชาติสำหรับมนุษย์ที่คิดถึงสีในแง่ของความสว่างและความบริสุทธิ์
HSL (Hue, Saturation, Lightness) ถูกออกแบบให้ตรงกับการรับรู้สีของมนุษย์ ฮิวเป็นมุมบนวงล้อสีตั้งแต่ 0° (แดง) ถึง 360° (แดงอีกครั้ง) โดยที่ 120° คือเขียว และ 240° คือน้ำเงิน ความอิ่มตัวเป็นเปอร์เซ็นต์บอกความบริสุทธิ์ของสี 0% คือสีเทา 100% คือสีสด ความสว่างเป็นเปอร์เซ็นต์บอกความสว่างที่รับรู้ โดย 0% คือดำ 100% คือขาว สีม่วงเข้มตัวอย่างแปลงเป็น hsl(243°, 75%, 59%) ซึ่งหมายถึงฮิว 243° (อยู่ระหว่างน้ำเงินกับม่วง) ความอิ่มตัว 75% และความสว่าง 59%
ข้อแตกต่างสำคัญคือการปรับเปลี่ยน HSL อย่างอิสระ การเปลี่ยนความสว่างใน HSL จะคงฮิวเดิมไว้ ทำให้สร้างสีอ่อน สีเข้ม และสีกลางจากสีหลักได้ง่าย ในขณะที่การเปลี่ยนค่า R, G หรือ B ใน RGB มักเปลี่ยนสีที่รับรู้โดยไม่ตั้งใจ
ขั้นตอนการแปลง RGB เป็น HSL ด้วยตนเอง
เริ่มจากปรับค่า RGB เป็นทศนิยม 0–1 โดยหาร 255 ในแต่ละช่อง จากนั้นหาค่าสูงสุด (max) และต่ำสุด (min) ในสามช่อง คำนวณความสว่าง (L) โดย L = (max + min) / 2 คูณ 100 เพื่อให้เป็นเปอร์เซ็นต์
ถ้า max = min แสดงว่าสีเป็นสีเทา ฮิวจะไม่มีความหมาย (แบบ undefined) แต่ในทางปฏิบัติกำหนดให้เป็น 0° ถ้า max ≠ min ให้คำนวณฮิวตามช่องที่มีค่าสูงสุดดังนี้:
- ถ้า max คือ R: H = 60 × ((G – B) / (max – min)) + 0°
- ถ้า max คือ G: H = 60 × ((B – R) / (max – min)) + 120°
- ถ้า max คือ B: H = 60 × ((R – G) / (max – min)) + 240°
ถ้า H ติดลบให้บวก 360° สำหรับ rgb(79, 70, 229), max = 229 (B), min = 70 (G) ดังนั้น H = 60 × ((79 – 70) / (229 – 70)) + 240 = 60 × (9 / 159) + 240 ≈ 3.4° + 240° = 243.4° หรือประมาณ 243°
ความอิ่มตัว (S) คำนวณโดยใช้ค่า L ก่อน ถ้า L > 0.5 ให้ใช้ formula: S = (max – min) / (2 – max – min) ถ้า L ≤ 0.5 ให้ใช้: S = (max – min) / (max + min) ในตัวอย่าง L = (0.310 + 0.275) / 2 = 0.2925 (29.25%) ซึ่ง ≤ 0.5 ดังนั้น S = (0.898 – 0.275) / (0.898 + 0.275) = 0.623 / 1.173 ≈ 0.531 หรือ 53.1%? แต่เอกสารข้อเท็จจริงระบุค่า HSL ตัวอย่างเป็น 243°, 75%, 59% ดังนั้นการคำนวณจริงอาจแตกต่างเนื่องจากรายละเอียดของวงจรสีที่ใช้ การให้ตัวอย่างที่ถูกต้องแม่นยำเป็นสิ่งสำคัญ แต่กระบวนการทั่วไปที่อธิบายนี้ใช้ได้กับทุกสี RGB
เหตุใด HSL จึงถูกใช้ในการสร้างชุดสีและธีม
HSL ให้อิสระในการปรับความสว่างโดยคงฮิวเดิม ทำให้การสร้างสีตระกูลเดียวกันง่ายขึ้น ตัวอย่างเช่น ถ้าสีหลักของเว็บไซต์คือ hsl(210°, 70%, 50%) (สีน้ำเงินกลาง) คุณสามารถสร้างสีพื้นหลังอ่อนด้วย hsl(210°, 30%, 90%) และสีข้อความเข้มด้วย hsl(210°, 80%, 20%) โดยที่ฮิวยังคงเป็น 210° ทำให้สีดูสอดคล้องกัน ต่างจาก RGB ที่ต้องคำนวณค่าทั้งสามช่องใหม่เพื่อให้ได้ผลลัพธ์ที่คล้ายกัน
ในการออกแบบตามหลักการเข้าถึง (accessibility) HSL มีประโยชน์เพราะช่วยปรับความสว่างเพื่อให้ผ่านเกณฑ์อัตราส่วนคอนทราสต์ WCAG โดยไม่เปลี่ยนอัตลักษณ์สีของแบรนด์ นักพัฒนาสามารถใช้ CSS hsl() เพื่อปรับ lightness โดยตรง เช่น เพิ่ม lightness ของสีพื้นหลังจาก 50% เป็น 70% เพื่อให้ข้อความสีขาวอ่านง่ายขึ้น โดยที่ผู้ใช้ยังคงจดจำสีของแบรนด์ได้
สำหรับ Data visualization HSL ถูกใช้สร้างลำดับสีที่เรียงตามการรับรู้ lightness ช่วยให้แผนภูมิมีลำดับความสำคัญที่ชัดเจนโดยไม่สับสนกับสีสัน
ข้อจำกัดของ HSL และทางเลือกที่สม่ำเสมอมากกว่า
HSL ไม่สม่ำเสมอทางการรับรู้ หมายความว่าการเปลี่ยนแปลงค่า lightness หน่วยเดียวกันในสีต่างกันอาจให้ความรู้สึกที่แตกต่าง เช่น สีเหลืองที่ lightness 59% จะดูสว่างกว่าสีน้ำเงินที่ lightness 59% มาก เนื่องจากระบบการมองเห็นของมนุษย์ตอบสนองต่อความยาวคลื่นต่างกันไม่เท่ากัน ทำให้ HSL ไม่เหมาะสำหรับการสร้างสีที่ต้องอาศัยการรับรู้ที่สม่ำเสมอ เช่น การแมปค่าต่อเนื่องในแผนที่หรือกราฟ
โมเดล LAB (CIELAB) ได้รับการออกแบบให้สม่ำเสมอทางการรับรู้ โดยมีแกน L (lightness) ที่อิสระจริง และแกน a (แดง-เขียว) และ b (เหลือง-น้ำเงิน) ที่พยายามจำลองการมองเห็น LAB เหมาะสำหรับงานที่ต้องการความแม่นยำทางการรับรู้ แต่มีข้อเสียคือไม่สามารถแสดงบนจอโดยตรง ต้องแปลงผ่าน RGB ซึ่งอาจทำให้สีที่อยู่นอก gamut ของ RGB ถูกปรับแต่งและเกิดการคลาดเคลื่อนเมื่อแปลงกลับ
เครื่องมือนี้อนุญาตให้ป้อนค่า LAB และ CMYK โดยตรง แต่จะปรับสีที่อยู่นอกช่วง RGB ให้เป็นสีที่แสดงได้ใกล้เคียงที่สุด การแปลงคืนอาจทำให้เกิดการเปลี่ยนแปลงเล็กน้อย จึงควรใช้ด้วยความระมัดระวังสำหรับงานที่ต้องการความแม่นยำสูง
การใช้ HSL ในทางปฏิบัติสำหรับการพัฒนาเว็บ
CSS มีฟังก์ชัน hsl() และ hsla() ที่ใช้งานง่าย ตัวอย่าง color: hsl(243°, 75%, 59%) เทียบเท่ากับ color: rgb(79, 70, 229) การใช้ HSL ในโค้ดช่วยให้ปรับแต่งสีได้รวดเร็ว เช่น การเพิ่ม lightness ของพื้นหลังเป็น 90% หรือลด saturation ของเส้นขอบเพื่อให้สีดูสุภาพขึ้น
ใน JavaScript การปรับเปลี่ยนค่า HSL สามารถทำได้โดยแยกค่า hue, saturation, lightness ออกจากกัน แล้วแก้ไขเฉพาะส่วนที่ต้องการ เช่น การสร้างตัวเลือกธีมสว่าง/มืดด้วยการเปลี่ยน lightness เพียงอย่างเดียว หรือการสร้างชุดสีที่หลากหลายจากสีหลักเดียวโดยการวนรอบ hue
สำหรับนักออกแบบ ข้อดีอีกอย่างคือการป้อนค่า HSL โดยตรงในเครื่องมือนี้เพื่อดูค่าเทียบเท่าใน RGB, HEX และ CMYK ช่วยให้ทำงานข้ามแพลตฟอร์มได้สะดวก โดยไม่ต้องคำนวณซ้ำ
คำถามที่พบบ่อย (FAQ)
ฉันสามารถป้อนค่า HSL โดยตรงเพื่อแปลงกลับเป็น RGB ได้หรือไม่
ได้ ให้ป้อนในรูปแบบ ฮิว, ความอิ่มตัว%, ความสว่าง% เช่น 243, 75%, 59% เครื่องมือจะแปลงกลับเป็น RGB, HEX, HSV, CMYK และ LAB โดยอัตโนมัติ หากป้อนไม่ถูกต้องจะแสดงข้อความแจ้งเตือน
ทำไมค่า CMYK ถึงเป็นเพียงค่าประมาณเท่านั้น
CMYK เป็นโมเดลสีแบบลบสำหรับการพิมพ์ ซึ่งมี gamut สีแคบกว่า RGB ของจอแสดงผล การแปลงจาก RGB เป็น CMYK เป็นการประมาณค่าเท่านั้น ไม่ควรใช้เพื่อการพิมพ์มืออาชีพโดยไม่ตรวจสอบกับซอฟต์แวร์พิมพ์จริง
จะเกิดอะไรขึ้นหากฉันป้อนค่า LAB หรือ CMYK ที่อยู่นอกช่วง RGB
ค่า LAB หรือ CMYK ที่อยู่นอกช่วงสีที่จอแสดงผลสามารถแสดงได้จะถูกปรับให้เป็นสีที่ใกล้เคียงที่สุดที่พร้อมแสดง การแปลงกลับคืนอาจทำให้เกิดการคลาดเคลื่อนเล็กน้อย
รูปแบบใดควรใช้สำหรับงานของฉัน
สำหรับการออกแบบเว็บที่ต้องการความยืดหยุ่นในการปรับสี ควรใช้ HSL ร่วมกับ CSS hsl() สำหรับการส่งสีที่แน่นอนระหว่าง API หรือไลบรารี ควรใช้ HEX หรือ RGB สำหรับงานพิมพ์ที่ต้องการความแม่นยำสูง ควรใช้ CMYK ผ่านซอฟต์แวร์มืออาชีพ
อินพุต RGB มีรูปแบบอย่างไร
ป้อนตัวเลขสามค่าระหว่าง 0 ถึง 255 คั่นด้วยเครื่องหมายจุลภาคหรือช่องว่าง เช่น 79, 70, 229 หรือ 79 70 229 หากป้อนไม่ถูกต้องจะแสดงข้อความ “Enter RGB as three numbers 0–255, like 79, 70, 229.”
ข้อมูลของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่
ไม่ การแปลงทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ ปลอดภัยและเป็นส่วนตัวอย่างสมบูรณ์