CSSVì oklch đồng đều theo cảm nhận: giữ nguyên L và C, đổi H thì mắt thấy các màu sáng ngang nhau. hsl không có tính chất đó.
/* hsl: cùng lightness 50%, nhưng vàng trông sáng hơn hẳn xanh dương */
.a { background: hsl(60 100% 50%); }
.b { background: hsl(240 100% 50%); }
/* oklch: cùng L 70%, độ sáng cảm nhận tương đương */
.c { background: oklch(70% 0.15 100); }
.d { background: oklch(70% 0.15 260); }Hệ quả với design system:
1. Thang màu sinh được bằng công thức. Với oklch, --blue-500 → --blue-600 chỉ là giảm L một bước; áp cùng công thức cho mọi tông đều ra kết quả cân. Với hsl mỗi tông phải chỉnh tay.
2. Màu trạng thái đồng đều. primary, success, danger cùng L sẽ trông cùng "trọng lượng" — nút không có cái nào nổi bật quá mức so với thiết kế.
3. Kiểm tra tương phản dễ đoán hơn vì L bám sát độ sáng cảm nhận.
Thêm nữa oklch chạm được gamut P3, rộng hơn sRGB trên màn hình hiện đại:
.vivid { color: oklch(70% 0.28 145); } /* vượt sRGB, hiển thị đậm hơn trên P3 */Lưu ý: chroma cao vượt gamut sẽ 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àn hình.
Với màu thương hiệu cần chính xác, giữ chroma vừa phải hoặc kiểm tra bằng @media (color-gamut: p3).