OKLCH คืออะไร

• OKLCH คือ โมเดลสีสมัยใหม่ที่ออกแบบให้สอดคล้องกับการรับรู้ทางสายตาของมนุษย์ โดยมีคุณสมบัติที่ทำให้ การเปลี่ยนแปลงของความสว่าง ความอิ่มสี และเฉดสีระหว่างสีต่าง ๆ รู้สึกสม่ำเสมอ จึงเป็น โมเดลสีแบบสม่ำเสมอเชิงการรับรู้
• โครงสร้างประกอบด้วย Lightness(ความสว่าง), Chroma(ความอิ่มสี), Hue(เฉดสี) และเมื่อเทียบกับโมเดลเดิมจะช่วยให้ สร้างชุดสีที่มีความสม่ำเสมอ ได้
• สามารถสร้างพาเลตสีที่สม่ำเสมอได้แม้จะ เปลี่ยนเฉพาะ Hue โดยคงความสว่างและความอิ่มสีเท่าเดิม จึงเหมาะกับงานออกแบบ UI
• เมื่อเทียบกับ sRGB/HSL จะให้ การเปลี่ยนระดับแสงเงาที่คาดเดาได้และไล่สีที่สม่ำเสมอ แต่ในบางกรณีอาจเกิดสีที่ไม่ได้ตั้งใจได้
• บน จอแสดงผลสมัยใหม่อย่าง Display-P3 สามารถแสดงสีได้กว้างขึ้น และเบราว์เซอร์สมัยใหม่ก็รองรับผ่าน CSS Color 4 พร้อมทั้งมี การทำ sRGB fallback ทำให้กำลังกลายเป็นมาตรฐานเว็บมากขึ้นเรื่อย ๆ

---

แนะนำโมเดลสี OKLCH

• OKLCH เป็นโมเดลสีสมัยใหม่ที่พัฒนาขึ้นโดยมีเป้าหมายเรื่อง ความสม่ำเสมอเชิงการรับรู้ (perceptually uniform)
• โมเดลนี้ทำงานใกล้เคียงกับ วิธีที่มนุษย์รับรู้สีจริง ๆ มากกว่า จึงทำให้ การจัดการสีสะดวกขึ้นมาก ในงานออกแบบดิจิทัลและการพัฒนาฟรอนต์เอนด์

แนวคิดพื้นฐานของโมเดลสี

• โมเดลสี คือ ระบบ ที่ใช้นิยามและแสดงสีในเชิงคณิตศาสตร์
• ตัวอย่างโมเดลที่ใช้กันบ่อย: RGB, HSL, LCH, OKLCH, LAB, XYZ
• แต่ละโมเดลจะกำหนด ความสะดวกในการแสดงผลและการจัดการสี

ตัวอย่างวิธีเขียนค่าสี

• oklch(0.55 0.18 260)
• hsl(220 100% 50%)
• rgb(0, 128, 255)
• lch(60% 60 260)
• lab(50 -10 -50)
• color(xyz 0.18 0.19 0.6)
• #1E90FF

Gamut(ขอบเขตของปริภูมิสี)

• Gamut หมายถึง ช่วงสีทั้งหมด ที่โมเดลสีนั้นสามารถแสดงได้
• gamut ที่เป็นตัวแทนได้แก่ sRGB(ค่ามาตรฐานบนเว็บ), Display-P3(รองรับบนอุปกรณ์สมัยใหม่)
• ปริภูมิสีมีคุณสมบัติหลายอย่างนอกเหนือจาก ขอบเขต gamut เช่น white point, transfer function

โครงสร้างของ OKLCH

ทั้ง OKLCH และ LCH ต่างก็ประกอบด้วยสามค่า คือ Lightness, Chroma, Hue
OKLCH อ้างอิงจากปริภูมิสี OKLab

• Lightness(ความสว่าง/ความสว่างสัมพัทธ์) : แสดงเป็น 0~1 หรือ 0%~100% และช่วยให้ การเปลี่ยนแปลงความสว่างมีความสม่ำเสมอ
• Chroma(ความอิ่มสี) : ความเข้มของสี คล้ายกับ Saturation(ความอิ่มสี) ใน HSL
• Hue(เฉดสี) : แสดงสีด้วยมุม 0~360 องศา

ข้อดีและการใช้งานของ OKLCH

• ความสว่างที่สม่ำเสมอ

  • ใน OKLCH หากกำหนดสีด้วย ค่าความสว่างและความอิ่มสีเท่าเดิม แล้วเปลี่ยนเฉพาะ hue จะทำให้ ทุกสีถูกรับรู้ว่ามีความสว่างใกล้เคียงกัน
  • ใน sRGB หรือ HSL แบบเดิม ความสว่างหรือความอิ่มสีอาจดูไม่สม่ำเสมอตามแต่ละสี
  • ดังนั้น OKLCH จึงเหมาะกับการสร้าง พาเลตสีที่สม่ำเสมอเชิงการรับรู้ ได้ง่าย

• ระดับความสว่างของสีที่คาดเดาได้

  • ใน OKLCH เมื่อ เปลี่ยนค่าความสว่าง ก็สามารถสร้างระดับสีหลายขั้นได้ โดยไม่ทำให้ hue(เฉดสี) หรือ chroma(ความอิ่มสี) เปลี่ยนไป
  • ใน HSL เป็นต้น เมื่อความสว่างเปลี่ยน มักเกิดอาการ drift ที่เฉดสีเลื่อนไปด้วย
  • OKLCH ทำให้สร้างระดับความสว่างของสีที่สม่ำเสมอได้ด้วยการปรับเพียงความสว่าง

• วิธีจัดการไล่สี (Gradients)

  • ใน sRGB จะเป็นการ interpolate ระหว่างค่าแดง เขียว น้ำเงิน ทำให้จุดกึ่งกลางดูหม่นหรือเกิดการเปลี่ยนความสว่างมากเกินไป
  • OKLCH จะ interpolate ตามแกน Lightness, Chroma, Hue จึงสร้างไล่สีที่ดูเป็นธรรมชาติมากกว่าได้
  • อย่างไรก็ตาม เนื่องจาก ค่า Hue มีโครงสร้างแบบวงกลม จึงอาจเกิดการเพี้ยนของสีที่ไม่คาดคิดได้
  • เพื่อหลีกเลี่ยงปัญหานี้ สามารถทำการ interpolate แบบเส้นตรงใน OKLab เพื่อให้ได้ผลลัพธ์ที่คาดเดาได้มากกว่า

การรองรับปริภูมิสี

• sRGB ไม่สามารถครอบคลุมสีบางส่วนในปริภูมิสีที่กว้างของจอแสดงผลสมัยใหม่ได้
• เมื่อใช้ OKLCH จะสามารถ แสดงสีได้สดขึ้นบนอุปกรณ์ที่รองรับช่วงสีกว้าง เช่น Display-P3
• บนอุปกรณ์ที่รองรับเพียง sRGB สีจะถูก แมปให้ใกล้เคียงที่สุดเท่าที่ทำได้

ค่า Chroma(ความอิ่มสี) สูงสุด

• OKLCH สามารถระบุสีในเชิงคณิตศาสตร์ได้แม้จะอยู่นอกช่วงที่หน้าจอจริงแสดงผลได้
• ตัวอย่างเช่น ค่า chroma ที่สูงเกินไปอย่าง oklch(0.7 0.4 40) ไม่สามารถแสดงผลจริงได้ จึงถูก clipping เป็นสีใกล้เคียง
• จึงสำคัญที่จะต้องเข้าใจ แนวคิดเรื่อง chroma สูงสุด และตั้งค่าให้เหมาะสมตามเฉดสี ความสว่าง และปริภูมิสีที่เลือกใช้ (sRGB, Display-P3)

การรองรับของเบราว์เซอร์และ fallback

• สีแบบ OKLCH ถูกนำมาใช้ใน CSS Color Module Level 4 และ เบราว์เซอร์สมัยใหม่ส่วนใหญ่รองรับแล้ว
• ในเบราว์เซอร์รุ่นเก่าอาจยังไม่รองรับ จึงสามารถตั้งค่า fallback ด้วยคำสั่ง CSS @supports ได้

  @layer base {  
    :root {  
      /* sRGB hex */  
      --color-gray-100: #fcfcfc;  
      --color-gray-200: #fafafa;  
      --color-gray-300: #f4f4f4;  
  
      @supports (color: oklch(0 0 0)) {  
        /* OKLCH */  
        --color-gray-100: oklch(0.991 0 0);  
        --color-gray-200: oklch(0.982 0 0);  
        --color-gray-300: oklch(0.955 0 0);  
      }  
    }  
  }  
  

• ในเบราว์เซอร์ที่รองรับจะใช้ OKLCH ส่วนเบราว์เซอร์ที่ไม่รองรับจะใช้สี sRGB(hex)

เครื่องมือ oklch.fyi

• oklch.fyi เป็นเครื่องมือบนเว็บที่มีฟังก์ชันเกี่ยวกับ OKLCH เช่น การสร้างพาเลตสี และการแปลงเป็นตัวแปร CSS
• ช่วยให้การนำสีแบบ OKLCH ไปใช้ในระบบดีไซน์หรือการพัฒนาธีมทำได้ง่ายขึ้น