Bảng màu Tailwind CSS | Tra cứu palette 50–950 và class HEX
Bảng màu Tailwind đọc theo công thức {prefix}-{tên}-{bậc} — ví dụ bg-slate-100, text-blue-600, border-red-200. 500 là mốc giữa; nền dùng bậc thấp, CTA dùng 600–700. Khi designer gửi HEX, tra công cụ màu Tailwind để lấy class gần nhất trước khi tạo custom scale thừa.
Freelancer và team outsourcing Việt Nam nhận Figma: #2563EB, #F8FAFC, #EF4444. Trong Tailwind bạn đã thấy blue-600, slate-50, red-500 — nhưng không nhớ HEX nào khớp class nào. Copy #2563EB thẳng vào style= phá design system; bịa bg-brand mỗi ticket thì config phình. Nhu cầu đúng là tra cứu bảng màu (palette) và map HEX → utility có sẵn.
Bài này là cẩm nang đọc palette Tailwind: cấu trúc class, bảng bậc theo mục đích, xám slate/zinc, ví dụ UI thật, và quy trình tra cứu — khác bài thêm custom color (extend config).
Bài viết này giúp bạn
- Đọc đúng prefix + tên màu + bậc 50–950
- Chọn bậc theo vai trò UI (không đoán
*-500mọi chỗ) - Phân biệt slate / gray / zinc / neutral / stone
- Map HEX Figma → class bằng tool
- Biết khi nào đủ dùng default, khi nào mới custom
Cấu trúc class màu
<p class="text-slate-700">Nội dung</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white">Gửi</button>
<div class="border border-slate-200 rounded-lg">Thẻ</div>| Phần | Ví dụ | Ý nghĩa |
|---|---|---|
| Prefix | text- bg- border- ring- fill- stroke- | Thuộc tính CSS nào nhận màu |
| Tên màu | slate blue emerald | Hệ trong palette |
| Bậc | 50 … 950 | Độ sáng/tối trong hệ |
Opacity: bg-black/50, text-blue-600/80 — số sau / là phần trăm alpha, không phải bậc palette.
Toàn bộ hệ màu mặc định (v3)
Xám (neutrals): slate, gray, zinc, neutral, stone
Màu: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
Mỗi hệ có 11 bậc: 50 100 200 300 400 500 600 700 800 900 950.
Một số token đặc biệt: white, black, transparent, current — không có scale 50–950.
Tư duy palette gần như giữ nguyên; cách khai báo custom đổi (tailwind.config vs @theme). Bảng default vẫn là chỗ tra cứu hàng ngày khi viết utility.
Chọn bậc theo mục đích (cheat sheet)
| Bậc | Việc hay dùng |
|---|---|
| 50–100 | Nền trang, zebra row, badge nhạt, hover nền |
| 200–300 | Viền, divider, input border, disabled nhạt |
| 400–500 | Icon, illustration, accent nhẹ |
| 600–700 | Nút primary, link, text nhấn |
| 800–900 | Heading, text chính trên nền sáng, nền dark header |
| 950 | Gần đen — nền dark mode sâu |
Anti-pattern: mọi thứ blue-500. Nút primary thường đậm hơn chữ link một chút (600/700); nền tip thì nhạt (50/100). Cùng một hue, khác bậc = hierarchy rõ mà không cần thêm màu brand.
Ví dụ cụ thể HEX hay gặp
| Class | HEX gần đúng (v3) | Gợi ý dùng |
|---|---|---|
blue-500 | #3B82F6 | Icon, badge |
blue-600 | #2563EB | Button / link |
slate-50 | #F8FAFC | Page background |
slate-200 | #E2E8F0 | Border card |
slate-700 | #334155 | Body text |
red-500 | #EF4444 | Icon lỗi |
red-600 | #DC2626 | Text lỗi đậm |
emerald-600 | #059669 | Success CTA |
Số HEX trên là tham chiếu palette phổ biến — khi nghi ngờ, tra tool thay vì nhớ thuộc lòng.
Slate vs gray vs zinc — chọn một rồi giữ
| Hệ | Cảm giác | Hay gặp ở |
|---|---|---|
| slate | Xám hơi xanh | Dashboard SaaS, docs kỹ thuật |
| zinc | Trung tính, lạnh nhẹ | UI tối giản, marketing hiện đại |
| gray | Xám 'cổ điển' Tailwind | Prototype nhanh, tutorial |
| neutral | Ít bias màu | Design system trung lập |
| stone | Ấm, hơi nâu | Blog, editorial, brand ấm |
Trộn text-slate-700 với border-zinc-200 và bg-gray-50 trong cùng màn hình khiến UI “rẻ” dù từng class đều hợp lệ. Rule team: một hệ xám cho app, màu sắc riêng cho semantic (blue/red/emerald).
Pattern UI copy được ngay
Card sáng
<div class="bg-white border border-slate-200 shadow-sm rounded-xl p-6">
<h2 class="text-slate-900 text-lg font-semibold">Tiêu đề</h2>
<p class="text-slate-600 mt-2 text-sm leading-relaxed">Mô tả phụ.</p>
<a class="text-blue-600 hover:text-blue-800 text-sm font-medium">Chi tiết</a>
</div>Alert lỗi
<p class="text-red-700 bg-red-50 border border-red-200 px-3 py-2 rounded-lg text-sm">
Vui lòng kiểm tra lại email.
</p>Header tối
<header class="bg-slate-900 text-slate-100">
<nav class="text-slate-300 hover:text-white">…</nav>
</header>Nút primary + secondary
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">Lưu</button>
<button class="bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 px-4 py-2 rounded-lg">Hủy</button>Quy trình: HEX từ Figma → class Tailwind
- Copy HEX từ inspect (
#0EA5E9) - Mở Màu Tailwind / Tailwind Color
- Dán HEX → nhận lớp gần nhất (ví dụ
sky-500) theo khoảng cách màu (Delta E) trên toàn palette mặc định - Quyết định:
- Khớp đủ gần → dùng
bg-sky-500/text-sky-600… theo vai trò - Lệch brand rõ → mới cân nhắc custom (bài custom color)
- Khớp đủ gần → dùng
- Viết chuỗi class đầy đủ trong JSX/HTML — tránh
`bg-sky-${n}`khiến purge/content scan nuốt class lúc build
Công cụ chạy trên trình duyệt: nhập HEX, đối chiếu palette — phù hợp lúc pair với designer trên call mà không mở docs Tailwind cả trang.
Case study
Case 1 — Landing freelance 1 ngày
Designer gửi 4 màu. Dev map:
| HEX Figma | Kết quả tool | Quyết định |
|---|---|---|
#2563EB | blue-600 | Primary button |
#F8FAFC | slate-50 | Background |
#334155 | slate-700 | Body |
#DC2626 | red-600 | Error text |
Không thêm theme.extend. Ship trong nửa ngày, UI đồng bộ với docs Tailwind mà khách vẫn thấy “đúng mock” trong ngưỡng chấp nhận.
Case 2 — Cố custom quá sớm
Team tạo brand-500 = #3B82F6 — trùng blue-500. Config dài, onboard junior rối, Storybook lệch. Sau review: xóa brand, dùng blue-*. Bài học: tra palette trước, extend sau.
Checklist trước khi merge UI
- Một hệ xám duy nhất trong màn hình?
- Nền / chữ / viền / CTA dùng bậc khác nhau có chủ đích?
- HEX Figma đã tra tool chưa — hay hardcode
#rrggbbrải rác? - Class viết literal (không nối động)?
- Contrast:
text-slate-400trênbg-whitecó đủ đọc không (đặc biệt placeholder)? - Dark mode (nếu có): đảo bậc có chủ đích (
slate-900nền,slate-100chữ) thay vì đảo hue lung tung?