Thiết Kế Giao Diện Cùng Tailwind v4 & Hệ Màu OKLCH

Màu sắc là một trong những yếu tố quan trọng nhất quyết định "độ sang trọng" của một giao diện Web. Trong nhiều năm qua, chúng ta đã quá quen với việc sử dụng RGB, HEX hay HSL. Nhưng nếu bạn là một Frontend Developer khắt khe về UI, chắc hẳn bạn từng gặp tình trạng: Chọn 2 màu có cùng độ sáng (Lightness) trong HSL nhưng khi nhìn bằng mắt thường, một màu lại chói lòa trong khi màu kia lại tối thui.

Đó là lúc OKLCH ra đời để giải cứu thế giới UI Design. Và với sự ra mắt của Tailwind CSS v4, OKLCH đã trở thành tiêu chuẩn màu sắc mặc định, mở ra kỷ nguyên mới cho thiết kế Web. Hãy cùng khám phá tại sao OKLCH lại "thần thánh" đến vậy!

Hãy nhìn vào hệ màu HSL (Hue, Saturation, Lightness). Về mặt toán học, nếu bạn giữ nguyên Saturation = 100% và Lightness = 50%, nhưng thay đổi Hue (chuyển từ màu Vàng sang màu Xanh dương), mắt người sẽ thấy màu Vàng cực kỳ sáng chói, trong khi màu Xanh dương lại khá tối.

Vì sự không nhất quán này, khi thiết kế Dark Mode bằng HSL, bạn sẽ phải tinh chỉnh thủ công từng mã màu để chữ vẫn đọc được trên nền tối. Rất mất thời gian và dễ gây lỗi Accessibility (A11y).

OKLCH là một không gian màu (Color Space) mới được thiết kế dựa trên cách mắt người thực sự cảm nhận ánh sáng (Perceptually Uniform Color Space).

• L (Lightness): Độ sáng tối (từ 0% đến 100%). Cực kỳ chính xác! 50% độ sáng trong OKLCH màu Vàng và màu Xanh lam sẽ trông giống hệt nhau về độ sáng trong mắt người.
• C (Chroma): Độ rực rỡ của màu. Tính bằng số thập phân từ 0 đến khoảng 0.4.
• H (Hue): Tông màu (Góc từ 0 đến 360 độ).

Chính sự ổn định về Lightness (L) là sức mạnh tuyệt đối của OKLCH. Nhờ có nó, bạn có thể tạo ra các bảng màu với hàng chục biến thể màu sắc khác nhau, nhưng vẫn duy trì chính xác tỷ lệ tương phản cho Text hiển thị mà không cần chỉnh bằng tay!

Bắt đầu từ Tailwind v4, engine của framework đã được viết lại bằng Rust (Lightning CSS) và toàn bộ bảng màu mặc định (default color palette) đã được nâng cấp lên không gian màu OKLCH thay vì RGB/HEX như trước đây.

Cách khai báo CSS thuần cũng đã hỗ trợ gốc OKLCH (trên tất cả các trình duyệt hiện đại). Trong Tailwind v4, bạn có thể khai báo một biến màu OKLCH tùy chỉnh cực kỳ đơn giản trong CSS:

/* file: global.css */
@theme {
  --color-primary: oklch(65% 0.2 250);
  --color-primary-dark: oklch(45% 0.2 250);
}

Sự tinh tế của Tailwind v4 nằm ở chỗ nó hiểu biến OKLCH tự động và cho phép bạn mix thêm alpha channel (độ mờ) ngay trong class HTML:

<!-- Dùng màu với opacity 50% cực kỳ dễ dàng -->
<div class="bg-primary/50 text-primary-dark">
  Xin chào OKLCH
</div>

Việc chuyển đổi Dark Mode trước đây rất phức tạp vì bạn phải gán lại toàn bộ HEX code cho nền tối. Với OKLCH, bạn chỉ việc đảo ngược Lightness (L) là xong!

/* Light Theme */
:root {
  --bg-color: oklch(98% 0.01 250); /* Rất sáng */
  --text-color: oklch(20% 0.05 250); /* Rất tối */
}

/* Dark Theme */
.dark {
  --bg-color: oklch(20% 0.01 250); /* Đảo L xuống 20% */
  --text-color: oklch(98% 0.05 250); /* Đảo L lên 98% */
}

Vì giá trị Lightness (L) trong OKLCH là hoàn hảo với mắt người, nên tỷ lệ tương phản (Contrast Ratio) của cả 2 theme Light và Dark sẽ gần như bằng nhau y hệt. Bạn không còn phải lo lắng về việc Dark mode bị quá chói hay chữ khó đọc nữa!

Tailwind CSS v4 kết hợp cùng OKLCH là một cú hích lớn đối với các Frontend Developer và UI Designer. Nó mang tính cách mạng vì nó giải quyết tận gốc vấn đề bất đối xứng thị giác của RGB/HSL.

Hãy thử cập nhật dự án tiếp theo của bạn lên Tailwind v4 và sử dụng OKLCH, bạn sẽ nhận ra việc tạo Color Palette và Dark Mode chưa bao giờ dễ chịu và đạt độ thẩm mỹ cao đến như vậy!