oklch() — color function ที่ perceptually uniform กว่า hsl()
oklch(lightness chroma hue) ปรับ lightness แล้วสีดูสว่างขึ้นจริงในสายตา ไม่ใช่แค่ค่าตัวเลข — ต่างจาก hsl ที่ yellow กับ blue มี perceived brightness ต่างกันมาก
ปัญหาของ hsl(): yellow (hue 60°) กับ blue (hue 240°) ที่ lightness: 50% มีความสว่างในสายตาต่างกันมาก — yellow สว่างกว่าเยอะ ทั้งที่ lightness ค่าเท่ากัน
oklch() แก้โดยใช้ perceptual lightness — ค่า L เท่ากัน = สายตามองว่าสว่างเท่ากันจริงๆ:
:root {
/* oklch(lightness chroma hue) */
--blue: oklch(55% 0.2 260);
--yellow: oklch(55% 0.15 95);
/* ทั้งคู่ดูสว่างเท่ากันในสายตา */
}ข้อดีอื่น:
- ครอบคลุม color gamut กว้างกว่า sRGB — ได้สีสดที่ P3 display แสดงได้แต่ hex/hsl ทำไม่ได้
chromaแยกจากlightness— ปรับความเข้มสีโดยไม่กระทบความสว่าง
/* สร้าง color scale อัตโนมัติ */
.surface-1 { background: oklch(20% 0.02 260); }
.surface-2 { background: oklch(25% 0.02 260); }
.surface-3 { background: oklch(30% 0.02 260); }
/* lightness เพิ่มทีละ 5% — ดูสม่ำเสมอกว่า hsl */Support: Chrome 111+, Firefox 113+, Safari 15.4+ — ใช้ได้ใน production แล้ว