- ปริภูมิสี OKLCH ต่างจาก RGB หรือ HSL แบบเดิมตรงที่อิงตาม การรับรู้ของมนุษย์ ทำให้มีความแม่นยำและคาดเดาได้มากกว่า
- เหมาะกับ การปรับปรุง design system และ accessibility โดยเฉพาะการแสดงผล สี wide gamut อย่าง P3 ที่ทำได้ดี จึงเข้ากับอุปกรณ์สมัยใหม่ได้ดีกว่า
oklch() เป็น รูปแบบสีที่อ่านง่ายและเข้าใจได้ตรงไปตรงมา ทำให้จัดการสีในโค้ดได้สะดวกขึ้น โดยแยกความสว่าง (L), ความอิ่มสี (C), สี (H), และความทึบแสง (a) ออกจากกัน- เมื่อมาพร้อมกับ สเปก CSS Colors 4/5 ความสามารถด้านการจัดการสีแบบเนทีฟก็ยิ่งแข็งแกร่งขึ้น ทำให้ OKLCH เป็นตัวเลือกที่มองไปข้างหน้า
- ระบบนิเวศอย่าง Stylelint, ปลั๊กอิน Figma, ไลบรารี JS ฯลฯ ก็กำลังเติบโตอย่างรวดเร็ว และส่งผลดีต่อการทำงานร่วมกันระหว่างดีไซน์กับฝั่งพัฒนา
- อย่างไรก็ตาม ระบบนิเวศยังไม่สุกงอมเต็มที่ และบางชุดค่าก็อาจมองไม่เห็นบนจอภาพทุกประเภท
การนำ OKLCH ไปใช้กับโปรเจกต์
- ค้นหาค่าสีใน CSS เดิมแล้ว แปลง เป็น OKLCH จากนั้นใช้ปลั๊กอิน Figma หรือเครื่องมือแปลงเพื่อ คัดลอกและนำสี OKLCH ไปใช้
- จัดระเบียบสีใน CSS ให้เป็น พาเลต custom properties เพื่อเพิ่มการนำกลับมาใช้ซ้ำและการดูแลรักษา
- ใช้ Stylelint และ plugin เพื่อ ตรวจจับและป้องกัน การใช้ค่าสีที่ไม่ใช่ OKLCH แบบอัตโนมัติ
- รวม Stylelint เข้ากับสภาพแวดล้อม CI เพื่อ ทำให้การตรวจสอบความสม่ำเสมอของสีเป็นอัตโนมัติ
ประโยชน์ที่ได้หลังเปลี่ยนมาใช้ OKLCH
- โค้ดอ่านง่ายขึ้น
- ปรับแก้สีได้อย่างคาดเดาได้
- สร้าง design system ที่อิงกับสีแบบสัมพัทธ์ได้
- รองรับการแสดงผลภาพขั้นสูง เช่น สี P3
- มีโอกาสทำงานร่วมกับทีมดีไซน์ได้ดีขึ้น
1 ความคิดเห็น
ดูเหมือนว่าความสะดวกในการเขียนลำดับและการอ่านสำหรับสิ่งอย่างแสงสี DMX จะเพิ่มขึ้นอย่างมาก