Màu Tailwind CSS: bảng màu OKLCH của v4, màu tùy chỉnh và các bậc màu

Cấu trúc bảng màu Tailwind

Bảng màu mặc định trong Tailwind v4.3 có 26 thang màu có tên. Mười bảy thang là màu sắc: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink và rose. Chín thang là màu trung tính: slate, gray, zinc, neutral và stone từ v3, cộng thêm mauve, olive, mist và taupe được bổ sung trong v4. Ngoài ra còn có black và white.

Mọi thang màu đều có cùng 11 bậc: 50, 100, 200 đến 900, và 950. Bậc 50 gần như trắng, bậc 950 gần như đen. Một class gồm tiện ích, màu và bậc: bg-blue-500, text-rose-700, border-zinc-200.

Số bậc là vị trí trong thang màu, không phải giá trị độ sáng. Bậc 500 có độ sáng OKLCH từ 55,1% ở gray đến 79,5% ở yellow, vì thế yellow-500 và blue-500 hoạt động rất khác nhau khi làm màu chữ.

Màu blue của Tailwind: mọi bậc kèm OKLCH, hex và độ tương phản

Đây là toàn bộ thang màu blue theo định nghĩa của Tailwind v4. Cột hex là màu sRGB gần nhất, tìm được bằng cách giảm chroma trong khi giữ nguyên độ sáng và sắc màu. Tỷ lệ tương phản là giá trị WCAG 2 đo trên mã hex đó.

Blue-600 là bậc đầu tiên đạt 4,5:1 cho chữ nội dung trên nền trắng. Blue-500 đạt trên nền đen với 5,58:1 nhưng không đạt trên nền trắng với 3,76:1. Không có bậc blue nào đạt 4,5:1 trên cả hai nền, nên giao diện sáng và tối cần dùng các bậc khác nhau.

Bậc màu Tailwind nào đạt WCAG AA trên nền trắng

Bậc sáng nhất đạt chuẩn phụ thuộc vào sắc màu. Orange, amber, yellow, lime cùng các màu green, teal, cyan và sky vẫn còn sáng ở bậc 500, nên cần bậc 700 cho chữ nội dung. Red, blue, violet, purple, fuchsia, pink và rose đạt ở bậc 600, còn indigo đạt ngay từ 500. Yellow là ngoại lệ: ngay cả yellow-600 cũng không đạt cho chữ lớn, chỉ 2,93:1.

Độ sáng dự đoán kết quả tốt hơn số bậc. Trong cả 286 màu, mọi bậc có độ sáng OKLCH dưới 58% đều đạt 4,5:1 trên nền trắng, và mọi bậc trên 59,2% đều không đạt. Chỉ cần đọc giá trị L trong class là bạn biết kết quả trước khi kiểm tra.

Mọi màu trung tính trừ olive đều đạt ở bậc 500. Olive-500 có độ sáng 58% với sắc màu hơi ngả vàng và chỉ đạt 4,25:1, nên chữ gray-500 và chữ olive-500 không thể thay thế cho nhau.

Màu Tailwind v3 và v4 khác nhau thế nào

v3 định nghĩa màu bằng giá trị hex trong tailwind.config.js, dưới theme.extend.colors. v4 chuyển cấu hình vào CSS: màu là các biến theme bên trong @theme, viết bằng OKLCH và được xuất ra dưới dạng biến CSS, nên var(--color-blue-500) dùng được trong CSS thuần và style nội tuyến.

Bản thân bảng màu được tinh chỉnh chứ không vẽ lại. Khi chuyển sang OKLCH, blue-500 của v3 (#3b82f6) có độ sáng và sắc màu y hệt blue-500 của v4. Chỉ chroma tăng lên, từ 0,188 lên 0,214. Phần còn lại của thang blue cũng theo quy luật đó, trừ blue-400, bậc này còn tối đi 0,7 điểm. Độ tương phản gần như không đổi trong khi màu trông rực rỡ hơn.

Lượng chroma tăng thêm đó vượt ra ngoài sRGB. 94 trong số 286 màu của v4 nằm ngoài sRGB và bên trong Display P3, tất cả đều là màu sắc. Orange có 9 trên 11 bậc nằm ngoài, blue có 4 bậc (200 đến 500). Trên màn hình P3 bạn thấy đủ màu, trên màn hình sRGB trình duyệt hiển thị một màu gần đó. v4 nhắm tới Safari 16.4, Chrome 111 và Firefox 128 trở lên, tất cả đều hiểu oklch().

@theme {
    --color-blue-500: oklch(62.3% 0.214 259.815);
}

.card {
    border-color: var(--color-blue-500);
}

Cách thêm màu tùy chỉnh trong Tailwind v4

Khai báo một biến trong namespace --color- bên trong @theme. Phần sau --color- trở thành tên class, nên --color-brand cho bạn bg-brand, text-brand, border-brand, ring-brand và mọi tiện ích màu khác, cộng với var(--color-brand) trong CSS. Hex, rgb(), hsl() và oklch() đều được chấp nhận.

Để thay thế bảng màu mặc định thay vì mở rộng nó, trước tiên hãy đặt lại namespace bằng --color-*: initial, rồi chỉ định nghĩa những màu bạn muốn. Tiện ích chỉ được tạo cho các class bạn thực sự dùng, nên hầu hết dự án đều giữ các màu mặc định.

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

Một biến --color-brand duy nhất là đủ cho một màu nhấn. Ngay khi bạn cần trạng thái hover, nền ngả màu hoặc chế độ tối, hãy định nghĩa một thang màu đầy đủ với các bậc được đánh số.

Cách tạo thang màu tùy chỉnh đầy đủ từ 50 đến 950

Thang màu dưới đây được tạo từ #e4572e. Độ sáng 63,7% của màu này khớp với bậc 500, nên màu thương hiệu nằm đúng ở bậc 500. Các bậc còn lại theo đường cong độ sáng của Tailwind và giữ nguyên sắc màu, chroma đạt đỉnh ở bậc 500 và 600 rồi giảm dần về hai đầu, và tất cả đều nằm trong sRGB, nên giá trị hex là chính xác.

Giống các sắc màu ấm của chính Tailwind, thang màu này cần bậc 600 cho chữ nội dung trên nền trắng. Brand-500 cho 3,68:1, chỉ đủ cho chữ lớn và biểu tượng.

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

Hãy giữ nguyên độ chính xác đầy đủ khi dán. Làm tròn độ sáng đến 0,1% và chroma đến ba chữ số thập phân sẽ đẩy brand-600 ra ngoài sRGB một chút, điều này vô hại nhưng không còn khớp chính xác với mã hex.

Cách hoạt động của bộ điều chỉnh độ mờ như bg-blue-500/50

Dấu gạch chéo sau màu đặt kênh alpha cho màu đó: bg-blue-500/50 là blue-500 ở mức 50%. v3 biên dịch nó thành rgb(59 130 246 / 0.5), cách này chỉ hoạt động với những màu Tailwind có thể tách thành các kênh. Màu tùy chỉnh định nghĩa bằng biến CSS phải dùng định dạng đặc biệt rgb(var(--brand) / <alpha-value>).

v4 biên dịch bộ điều chỉnh thành color-mix() trong Oklab, trộn màu với transparent. Cách này hoạt động với mọi màu: biến theme, giá trị tùy ý như bg-[#e4572e]/50 và cả biến CSS của riêng bạn.

Độ mờ làm thay đổi độ tương phản. Trên nền trắng, blue-500/50 hiển thị thành #95bfff và blue-500/10 thành #eaf2ff. Chữ màu blue-600 đạt 5,25:1, nhưng text-blue-600/60 tụt xuống 2,62:1 và không đạt ngay cả với chữ lớn.

• blue-500#2b7fff
• blue-500/50 trên nền trắng#95bfff
• blue-500/20 trên nền trắng#d5e5ff
• blue-500/10 trên nền trắng#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

Cách tìm class Tailwind gần nhất cho mã hex bất kỳ

So sánh mã hex với cả 286 bậc màu theo khoảng cách cảm nhận trong Oklab (ΔEOK). Dưới khoảng 0,02, khác biệt khó thấy khi đặt cạnh nhau, nên class Tailwind có thể thay cho màu của bạn. Trên khoảng 0,04, hãy thêm màu tùy chỉnh.

Bảng dưới là các kết quả khớp thực tế. Mã hex cũ của v3 khớp lại đúng class tương ứng ở v4, còn một màu cam thương hiệu điển hình như #ff5733 nằm giữa orange-600 và red-400. Trang Tailwind của PickShade tra cứu việc này cho mọi màu và hiển thị ba class gần nhất.

Hỏi đáp