CSSoklch / oklab là không gian màu đồng đều theo cảm nhận: thay đổi số bao nhiêu thì mắt thấy đổi tương ứng bấy nhiêu — điều mà hsl không đảm bảo.
.a { color: oklch(70% 0.15 250); } /* lightness / chroma / hue */
.b { color: oklch(70% 0.15 145); } /* CÙNG độ sáng cảm nhận, khác màu */Vấn đề của hsl: cùng 50% lightness nhưng vàng trông sáng hơn hẳn xanh dương — nên bảng màu dựng bằng hsl luôn phải chỉnh tay từng tông.
Hai lợi ích cụ thể cho design system:
1. Thang màu đều — sinh 50→900 bằng cách đổi mỗi lightness, không phải căn chỉnh từng bậc.
2. Gradient sạch — chuyển giữa hai màu không đi qua vùng xám đục như rgb.
/* gradient nội suy trong oklch, không bị xỉn ở giữa */
background: linear-gradient(in oklch, oklch(70% 0.2 20), oklch(70% 0.2 250));Còn cho phép chạm tới gamut P3 — dải màu rộng hơn sRGB trên màn hình hiện đại.
Hỗ trợ: Baseline 2023 (Chrome 111+, Safari 15.4+, Firefox 113+).
Lưu ý: chroma quá cao sẽ vượt gamut của màn hình và bị cắt về màu gần nhất — cùng một giá trị hiển thị khác nhau giữa các máy. Giữ chroma dưới ~0.2 nếu cần chắc chắn nhất quán.