UI ที่ดี ทุกคนเข้าถึงได้ด้วย OKLCH
12 ก.ย. 2568
Share
OKLCH คืออะไร ?
เป็นระบบสีใน CSS เพื่อให้การแสดงผลสีสอดคล้องกับ การรับรู้ของสายตามนุษย์ มากขึ้น ประกอบด้วย 3 ค่า คือ
L (Lightness) ความสว่างของสี
C (Chroma) ความสดหรือความเข้มของสี
H (Hue) โทนสี / องศาของวงล้อสี
ปัญหาของระบบสี RGB/HSL/HEX
คุมความสว่างยาก
สีเพี้ยนเวลาเทียบกัน
Contrast ไม่แม่น
จุดเด่นของ OKLCH ที่ทำให้เหนือกว่า
คุมแสง-สีแม่นยำ
Contrast ชัดเจน
รองรับ Display P3 (สีมากกว่า sRGB)
LCH - การเปลี่ยนค่า L หรือ C ของสีน้ำเงิน ช่วง H 270–330 สีจะเพี้ยนไปทางม่วง
OKLCH - การเปลี่ยนค่า L หรือ C สีจะยังคง เป็นสีน้ำเงิน ไม่เพี้ยนไปทางม่วง
ในตัวอย่างนี้
ความสว่าง (L) เปลี่ยนจาก 0.6 (base) ไป 0.8 (lighter) และ 0.4 (darker)
โครมา (C) คงที่ 0.2 และเฉดสี (H) คงที่ 240°
ประโยชน์ของ OKLCH
ระบบสีที่ช่วยให้ดีไซน์และโค้ด “เข้ากัน” ดีขึ้น ทั้งเรื่องความสวย การสื่อความหมาย จนถึงการใช้งานจริงบนหน้าจอรุ่นใหม่ ๆ
การใช้ OKLCH ใน Figma ในปัจจุบัน
Figma ยังไม่รองรับ OKLCH ในเครื่องมือเลือกสี แต่สามารถใช้เครื่องมือเลือกสีจากภายนอกได้
เช่น
OkColor และ Harmonizer เป็น Plugin เลือกสี OKLCH แบบกำหนดเองภายใน Figma ได้โดยตรง
