🎙️ OKLCH — สีที่เข้าใจสายตาคนมากกว่าที่เคย ลองนึกภาพว่าคุณกำลังออกแบบปุ่มบนเว็บไซต์ และอยากให้แต่ละปุ่มมีสีต่างกัน แต่ยังคง “ความรู้สึก” ที่เหมือนกัน — ไม่ใช่บางปุ่มดูสว่างเกินไป บางปุ่มดูหม่น หรือบางปุ่มดูโดดเด่นเกินหน้าเพื่อน นั่นคือปัญหาที่ OKLCH เข้ามาแก้ได้อย่างเฉียบขาด OKLCH เป็นระบบสีใหม่ใน CSS ที่ออกแบบมาให้ “perceptually uniform” หรือก็คือ สีที่เปลี่ยนไปอย่างสม่ำเสมอตามการรับรู้ของสายตามนุษย์ ไม่ใช่แค่ตัวเลขในระบบ RGB หรือ HSL ที่บางครั้งเปลี่ยนแค่ 5 หน่วย แต่กลับทำให้สีดูเปลี่ยนไปมากเกินคาด OKLCH ประกอบด้วย 3 ค่า: - Lightness (L): ความสว่าง - Chroma (C): ความเข้มของสี - Hue (H): เฉดสี เมื่อคุณเปลี่ยนเฉพาะ Hue โดยคงค่า L และ C ไว้ สีที่ได้จะมีความสว่างและความเข้มเท่ากัน ต่างกันแค่เฉด — ทำให้สร้างชุดสีที่ “รู้สึกเท่ากัน” ได้ง่ายมาก นอกจากนี้ OKLCH ยังช่วยให้การสร้าง gradients ดูนุ่มนวลและเป็นธรรมชาติกว่า RGB เพราะมันคำนวณจากความสว่าง ความเข้ม และเฉด ไม่ใช่แค่ค่าของแดง เขียว น้ำเงิน และที่สำคัญ OKLCH รองรับสีใน Display-P3 ซึ่งเป็นขอบเขตสีที่กว้างกว่าสำหรับหน้าจอสมัยใหม่ เช่น MacBook หรือ iPhone รุ่นใหม่ ทำให้สีดูสดและแม่นยำยิ่งขึ้น 📌 สรุปเนื้อหาเป็นหัวข้อ ➡️ OKLCH เป็นระบบสีใหม่ใน CSS ที่ออกแบบมาให้ perceptually uniform ➡️ ประกอบด้วย 3 ค่า: Lightness, Chroma และ Hue ➡️ การเปลี่ยนเฉพาะ Hue โดยคงค่า L และ C จะได้ชุดสีที่มีความรู้สึกเท่ากัน ➡️ OKLCH ช่วยให้ gradients ดูนุ่มนวลและไม่เกิดสีแปลกกลางทาง ➡️ รองรับสีใน Display-P3 ซึ่งมีขอบเขตกว้างกว่าสี sRGB ➡️ OKLCH ถูกนำมาใช้ใน CSS Color Module Level 4 และรองรับในเบราว์เซอร์สมัยใหม่ ➡️ สามารถใช้ @supports ใน CSS เพื่อ fallback ไปยัง sRGB หากเบราว์เซอร์ไม่รองรับ ➡️ มีเครื่องมือช่วยสร้างพาเลตสี OKLCH เช่น oklch.fyi ➡️ OKLCH ใช้พื้นฐานจาก OKLab ซึ่งเป็นโมเดลสีที่แม่นยำต่อการรับรู้ของมนุษย์ ✅ ข้อมูลเสริมจากภายนอก ➡️ OKLCH ถูกเสนอโดย Björn Ottosson ในปี 2020 เพื่อแก้ปัญหาความไม่สม่ำเสมอของสีในระบบเดิม ➡️ Display-P3 มีขอบเขตสีมากกว่า sRGB ถึง 50% โดยเฉพาะในเฉดแดงและเขียว ➡️ OKLCH สามารถกำหนดค่าที่อยู่นอกขอบเขตของหน้าจอจริงได้ แต่จะถูก “clip” ให้ใกล้เคียงที่สุด ➡️ การใช้ OKLCH ช่วยให้การออกแบบเว็บเข้าถึงผู้ใช้ที่มีความบกพร่องทางการมองเห็นได้ดีขึ้น https://jakub.kr/components/oklch-colors