OKLCH ใน CSS: ทำไมเราถึงเปลี่ยนจาก RGB/HSL

• OKLCH คือวิธีประกาศค่าสีแบบใหม่ที่ถูกเพิ่มเข้ามาในสเปก CSS Color Module 4
  → oklch(45% 0.26 264 / 50%) : (Lightness Chroma Hue / Opacity)
• ข้อดีของ OKLCH
  • อ่านง่ายกว่าเมื่อเทียบกับ rgb/hex คล้ายกับ hsl แต่เข้ารหัสค่าความสว่างได้ดีกว่า
  • ต่างจาก hsl ตรงที่ใช้ความสว่างแบบ perceptual ทำให้คาดการณ์คอนทราสต์ได้
  • ใช้กับสี wide-gamut P3 ได้ (เช่น เมื่อแสดงสีได้มากกว่าจอ sRGB บนอุปกรณ์ Apple)

สารบัญ

1. CSS Color เปลี่ยนไปอย่างไร
2. เปรียบเทียบ OKLCH กับฟอร์แมต CSS Color อื่น ๆ
3. OKLCH ทำงานอย่างไร
4. วิธีเพิ่ม OKLCH เข้าไปในโปรเจกต์
5. เหตุผลที่เราเปลี่ยนมาใช้ OKLCH
   • เพิ่มความอ่านง่าย
   • ปรับเปลี่ยนสีได้ง่าย
   • รองรับสี P3
   • สื่อสารกับทีมดีไซน์ได้ดีขึ้น
   • รองรับอนาคต