CSS Color Level 4: Tận dụng màu sắc hiện đại (lab, lch, color-mix)

Vấn đề của RGB/HSL truyền thống

• RGB: Tốt cho máy tính, nhưng không phản ánh cách mắt người cảm nhận màu.
• HSL: Dễ dùng, nhưng chuyển màu chưa mượt, thiếu chính xác ở biên độ sáng/tối.
• HEX: Chỉ là dạng viết gọn của RGB, không giải quyết hạn chế về cảm nhận màu.

lab(): Màu dựa trên cảm nhận của mắt

lab() mô tả màu dựa trên cách con người cảm nhận độ sáng và sắc thái, thay vì chỉ số ánh sáng máy tính. Điều này giúp phối màu tự nhiên hơn.

.lab-sample {
  background: lab(70% 40 30);
}

Trong đó 70% là độ sáng (lightness), còn 40 và 30 điều khiển trục màu xanh–đỏ và vàng–xanh lam.

lch(): Màu chính xác và dễ điều chỉnh

lch() là biến thể của Lab, tách thành 3 thông số: Lightness (L), Chroma (C), Hue (H). Đây là không gian màu trực quan, rất hợp khi tạo theme hoặc hệ thống design token.

.lch-sample {
  background: lch(70% 50 200);
}

So với HSL, lch() giúp màu sắc rõ ràng và đều đặn hơn, đặc biệt khi tăng giảm độ sáng.

color-mix(): Pha màu ngay trong CSS

color-mix() cho phép pha trộn hai màu theo tỷ lệ, cực hữu ích cho việc tạo biến thể màu (hover, gradient, dark mode).

.btn {
  background: color-mix(in srgb, #007bff 80%, white);
}
.btn:hover {
  background: color-mix(in srgb, #007bff 60%, white);
}

Kết quả: nút hover có màu sáng hơn, không cần tự tính HEX thủ công.

Ứng dụng thực tế trong UI/UX

• Theme động: Dễ dàng tạo màu sáng/tối từ cùng một base color bằng color-mix().
• Độ tương phản tốt hơn: lch() giúp màu chữ rõ ràng, phù hợp tiêu chuẩn WCAG.
• Gradient tự nhiên: Dùng lab() hoặc lch() cho gradient đều hơn mắt thường cảm nhận.

Ví dụ: tạo hệ thống màu linh hoạt

:root {
  --brand: lch(60% 70 250);
  --brand-light: color-mix(in lch, var(--brand) 80%, white);
  --brand-dark: color-mix(in lch, var(--brand) 70%, black);
}

.button {
  background: var(--brand);
}
.button:hover {
  background: var(--brand-dark);
}
.alert {
  background: var(--brand-light);
}

Demo

Dưới đây là các ví dụ trực quan để thấy sức mạnh của CSS Color Level 4.

Khả năng hỗ trợ trình duyệt

Các trình duyệt hiện đại như Chrome, Edge, Safari và Firefox đang hỗ trợ khá tốt lab(), lch() và color-mix(). Với project production, nên kiểm tra Can I Use để chắc chắn trước khi áp dụng rộng rãi.

Best practice khi dùng CSS Color Level 4

• Sử dụng lch() cho màu brand và theme chính.
• Dùng color-mix() để tạo state màu (hover, focus, disabled).
• Tránh lạm dụng pha màu phức tạp nhiều lớp gây khó debug.
• Kết hợp với CSS Variables để xây dựng hệ thống màu thống nhất.

Tóm tắt nhanh

• lab(), lch() giúp màu sắc chính xác và gần gũi với cách mắt người cảm nhận.
• color-mix() cho phép pha màu trực tiếp trong CSS, tiện lợi và linh hoạt.
• Ứng dụng hiệu quả trong UI/UX: theme, gradient, contrast.
• Đã được hỗ trợ trên trình duyệt hiện đại, nên bắt đầu áp dụng dần cho dự án mới.