CSS oklch() — ระบบสีสมัยใหม่ที่ดีกว่า hsl()

ทำไม oklch() ดีกว่า hsl()

ปัญหาของ hsl(): lightness 50% ของสีน้ำเงิน vs สีเหลือง มองเห็นสว่างไม่เท่ากัน

oklch() แก้ปัญหานี้ด้วย perceptual uniformity — ถ้าเปลี่ยน L เท่ากัน ทุกสีจะดูสว่าง/มืดเท่ากันจริง

/* syntax: oklch(lightness chroma hue) */
oklch(60% 0.15 250)
/*    ↑L    ↑C   ↑H */

ค่าแต่ละตัว

สร้าง Design Token ด้วย oklch()

:root {
  /* accent: blue */
  --accent-50:  oklch(97% 0.03 250);
  --accent-100: oklch(93% 0.06 250);
  --accent-200: oklch(86% 0.10 250);
  --accent-300: oklch(76% 0.15 250);
  --accent-400: oklch(65% 0.18 250);
  --accent-500: oklch(55% 0.20 250);  /* base */
  --accent-600: oklch(46% 0.20 250);
  --accent-700: oklch(38% 0.18 250);
  --accent-800: oklch(30% 0.14 250);
  --accent-900: oklch(22% 0.09 250);
}

ข้อดีคือ scale นี้ดู consistent กว่า hsl() เพราะ L ต่างกันเท่าๆ กัน = มองเห็นต่างกันเท่าๆ กันจริง

Dark mode ด้วย oklch()

:root {
  --bg:   oklch(98% 0.01 250);
  --text: oklch(18% 0.02 250);
}

[data-theme='dark'] {
  --bg:   oklch(15% 0.02 250);
  --text: oklch(92% 0.01 250);
}

Relative Color Syntax (ใหม่มาก)

/* สร้างสีจากสีที่มีอยู่แล้ว */
:root {
  --brand: oklch(55% 0.20 250);
  
  /* lighter version */
  --brand-light: oklch(from var(--brand) calc(l + 0.15) c h);
  
  /* muted version */
  --brand-muted: oklch(from var(--brand) l calc(c * 0.5) h);
  
  /* complementary hue (opposite) */
  --brand-comp: oklch(from var(--brand) l c calc(h + 180));
}

Browser Support

ณ ปี 2026 ทุก browser หลักรองรับ oklch() แล้ว (Chrome, Firefox, Safari, Edge)

/* fallback สำหรับ browser เก่า */
color: hsl(220, 90%, 56%);
color: oklch(55% 0.20 250);

เครื่องมือ

• oklch.com — color picker + converter พร้อม gamut visualization
• Tailwind CSS v4 — ใช้ oklch() เป็น default color space
• Radix Colors — palette ที่ออกแบบบน oklch หลักการ

Gamut: P3 vs sRGB

/* P3 display สามารถแสดงสีฉูดฉาดกว่า sRGB */
.vivid-button {
  background: oklch(60% 0.30 250);  /* อาจเกิน sRGB gamut */
}

/* ใช้ @supports เพื่อตรวจสอบ */
@supports (color: oklch(0 0 0)) {
  .vivid-button {
    background: oklch(60% 0.30 250);
  }
}