Bảng màu Tailwind CSS
Tạo thang màu 50–950 từ màu của bạn
★ Màu gốc #2F6FE0 nằm ở bậc 600 · gần nhất với màu Tailwind blue-600.
Đây là thang màu tạo tự động, không phải màu chính thức của Tailwind CSS. Màu gốc được giữ nguyên ở bậc có độ sáng gần nó nhất; các bậc còn lại giữ sắc độ và đổi độ sáng đều theo không gian OKLCH. Dòng cuối mỗi ô: màu chữ (trắng/đen) đọc rõ hơn trên bậc đó.
26 họ màu Tailwind, sắc độ 50–950
slate
gray
zinc
neutral
stone
mauve mới từ v4.3
olive mới từ v4.3
mist mới từ v4.3
taupe mới từ v4.3
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Cách đọc tên màu Tailwind
Mỗi màu Tailwind có dạng {họ màu}-{sắc độ}, ví dụ sky-500. Sắc độ chạy từ 50 (nhạt nhất) đến 950 (đậm nhất); 500 là màu “chuẩn” của họ. Ghép tên màu với tiền tố tiện ích để thành class:
| Class | Thuộc tính CSS |
|---|---|
bg-sky-500 |
background-color |
text-sky-500 |
color |
border-sky-500 |
border-color |
ring-sky-500 |
màu viền focus (box-shadow) |
from-sky-500, to-indigo-500 |
điểm đầu, điểm cuối của gradient |
Thêm độ trong suốt bằng dấu gạch chéo: bg-sky-500/50 là nền sky-500 ở 50% độ đục.
Cách dùng bảng này
- Chọn phiên bản: v4.3 (mặc định, mã
oklch()) hoặc v3.4 (mã HEX gốc). - Chọn nội dung muốn sao chép: HEX, RGB, OKLCH (chỉ v4), tên màu (
blue-500) hay class với tiền tố tuỳ chọn (bg-,text-,border-…). Lựa chọn được ghi nhớ cho lần sau. - Bấm vào ô màu để chép một màu, hoặc “Chép cả họ” để chép 11 bậc — ở chế độ OKLCH là các dòng
--color-…dán thẳng vào@theme. - Có mã màu từ bản thiết kế? Dán vào ô “Tìm màu Tailwind gần nhất” để biết token gần nhất và độ lệch ΔE.
Thang màu tự tạo hoạt động ra sao?
Bộ công cụ tạo thang màu 50–950 phía trên nhận một màu gốc — thường là màu thương hiệu — và sinh đủ 11 bậc để dùng như một họ màu Tailwind. Màu được tính trong không gian OKLCH, nơi độ sáng khớp với cảm nhận của mắt hơn HSL, nên các bậc sáng dần đều và không bị ngả màu. Màu gốc được giữ nguyên tại bậc có độ sáng gần nó nhất (đánh dấu ★), không nhất thiết là bậc 500.
Dán khối @theme vào file CSS của Tailwind v4, hoặc khối colors vào theme.extend trong tailwind.config.js của v3, rồi dùng như màu có sẵn: bg-brand-600, text-brand-50.
Các họ màu xám khác nhau thế nào?
Tailwind có năm thang xám quen thuộc với sắc ám khác nhau: slate ám xanh dương rõ nhất, gray ám xanh nhẹ, zinc gần trung tính hơi lạnh, neutral xám thuần không ám màu, stone ám nâu ấm. Từ v4.3 có thêm bốn thang xám ám màu: mauve (tím hồng), olive (xanh ô liu), mist (xanh sương), taupe (nâu xám). Hãy chọn một thang duy nhất cho toàn bộ giao diện: thang lạnh hợp màu chủ đạo xanh, tím; thang ấm hợp cam, nâu, đỏ.
Phiên bản và độ chính xác
Chế độ v4.3 dùng đúng giá trị oklch() trong file theme.css của Tailwind CSS v4.3.3 (26 họ màu). Nhiều màu v4 nằm ngoài dải sRGB (rực hơn trên màn hình P3), nên mã HEX hiển thị ở chế độ này là bản quy đổi gần nhất về sRGB — muốn đúng màu v4 hãy chép OKLCH. Chế độ v3.4 là mã HEX gốc của Tailwind CSS v3.3–v3.4 (22 họ, có sắc độ 950). Nguồn: tài liệu màu của Tailwind CSS và mã nguồn theme.css v4.3.3. Muốn đổi một mã HEX bất kỳ sang oklch(), dùng công cụ chuyển đổi mã màu.
Không dùng Tailwind? Xem bảng màu tổng hợp hoặc bảng màu Material Design.
