CSSดีไซน์Frontend

Design System ด้วย OKLCH: สีแห่งอนาคต

ทำไม OKLCH ถึงมาแทนที่ HSL ในระบบ Design System สมัยใหม่ พร้อมตัวอย่างจริงใน CSS และ TailwindCSS 4

8 เมษายน 2569อ่าน 6 นาที

เว็บกำลังเปลี่ยนแปลง และวิธีจัดการสีก็เช่นกัน ในปี 2026 OKLCH กลายเป็นมาตรฐานสำหรับ Design System ระดับมืออาชีพ นี่คือเหตุผล — และวิธีนำไปใช้

ทำไมต้องเลิกใช้ HSL?

HSL เป็นตัวเลือกยอดนิยมของนักพัฒนา Frontend มานาน แต่มีข้อเสียสำคัญ:

การรับรู้ไม่สม่ำเสมอ: สี HSL สองสีที่มี lightness เท่ากันไม่ได้ดูสว่างเท่ากันในสายตามนุษย์
Gamut จำกัด: HSL ถูกจำกัดอยู่ใน sRGB ไม่เพียงพอสำหรับจอ P3 สมัยใหม่
ปรับแต่งยาก: การเปลี่ยน saturation มักทำให้ความสว่างที่รับรู้เปลี่ยนไปด้วย

OKLCH: การปฏิวัติด้านการรับรู้

OKLCH (Lightness, Chroma, Hue) เป็นระบบสีที่สม่ำเสมอทางการรับรู้ หมายความว่าถ้าสีสองสีมี lightness เท่ากันใน OKLCH จะดูสว่างเท่ากันจริงๆ

css

:root {
  --brand: oklch(72% 0.14 250);
  --mint: oklch(90% 0.18 165);
  --gold: oklch(83% 0.13 80);
  --coral: oklch(70% 0.18 20);
}

OKLCH รับประกันว่าสีสองสีที่มี lightness เท่ากันจะดูสว่างเหมือนกันจริงๆ ไม่ต้องปรับแต่งด้วยตนเองอีกต่อไป

ธีม Dark/Light อัตโนมัติ

ด้วย OKLCH การสร้างธีม dark/light ที่สอดคล้องกันเป็นเรื่องง่าย แค่ปรับ lightness:

css

:root {
  color-scheme: dark;
  --bg: oklch(5% 0.008 270);
  --text: oklch(93% 0.005 260);
}
:root.light {
  color-scheme: light;
  --bg: oklch(99% 0.005 270);
  --text: oklch(15% 0.01 270);
}

Hue และ chroma ยังคงเหมือนเดิม — เปลี่ยนแค่ lightness ผลลัพธ์: สีที่สอดคล้องกันในทั้งสองโหมด

การใช้งานกับ TailwindCSS 4

TailwindCSS 4 รองรับตัวแปร CSS แบบ native ผ่าน @theme:

css

@theme {
  --color-brand: var(--brand);
  --color-mint: var(--mint);
  --color-gold: var(--gold);
}

จากนั้นใช้ bg-brand, text-mint, border-gold ได้โดยตรงในคลาส

สรุป

OKLCH คืออนาคตของ Design System การรับรู้ที่สม่ำเสมอ การรองรับ gamut ที่กว้างข้อน และการรวมเข้ากับ CSS แบบ native ทำให้เป็นตัวเลือกที่ชัดเจนสำหรับโปรเจกต์ใหม่ทุกโปรเจกต์ในปี 2026

มีโปรเจกต์ที่กล้าหาญในใจหรือไม่?

มาคุยเรื่องแนวคิดของคุณ ผมจะติดต่อกลับไปในเวลาไม่เกิน 24 ชั่วโมง

มาคุยเรื่องโปรเจกต์ของคุณ →