CodeKitHubCông Cụ Này Là Gì?
Tailwind CSS cung cấp một thang màu mặc định cố định thay vì cho phép bạn chọn giá trị tùy ý cho các màu giao diện thông dụng. Mỗi nhóm trong 22 nhóm có tên (như amber hoặc slate) có đúng 11 sắc độ, đánh số từ 50 đến 950, và mỗi sắc độ có một giá trị hex chính thức được chính Tailwind ghi tài liệu và sử dụng giống hệt nhau trên các tiện ích bg-, text-, border- và ring-.
Trang tra cứu này nhúng toàn bộ bảng màu chính thức đó cục bộ, nên việc tra một màu hoặc tên lớp không cần mở tài liệu Tailwind, chạy build, hay đưa lớp qua PurgeCSS chỉ để xem nó trông ra sao. Tra cứu hex dùng khoảng cách Euclid RGB để tìm sắc độ chính thức gần nhất, còn tra cứu lớp là chính xác tuyệt đối — mọi giá trị ở đây khớp với mặc định được Tailwind ghi tài liệu.
Tại Sao Nên Dùng?
- Dán mã hex từ file thiết kế hoặc ảnh chụp màn hình và lập tức nhận được tên lớp Tailwind gần nhất, thay vì phải đoán xem nó tương ứng với sắc độ đánh số nào.
- Gõ tên lớp như slate-900 hoặc bg-purple-500 để xem giá trị hex và RGB chính xác mà không cần lục tìm trong tài liệu Tailwind.
- Duyệt toàn bộ lưới 22 nhóm x 11 sắc độ để so sánh các sắc độ cạnh nhau trước khi chọn.
- Lấy các biến thể bg-, text-, border- và ring- cho bất kỳ sắc độ nào chỉ trong một cú nhấp, vì Tailwind dùng cùng một thang số cho tất cả.
- Miễn phí, tức thì và hoàn toàn cục bộ — không tải lên, không cần tài khoản, không cần bước build.
Cách Sử Dụng
- Để tìm tên lớp từ mã hex: gõ hoặc dán giá trị hex (có hoặc không có #) vào ô tìm kiếm — sắc độ Tailwind chính thức gần nhất sẽ hiện phía trên lưới, kèm khoảng cách màu nếu không khớp chính xác.
- Để tìm giá trị hex từ tên lớp: gõ tên lớp hoặc tên nhóm (ví dụ amber-500, bg-blue-600, hoặc chỉ teal) — khớp chính xác sẽ hiện hex, RGB và tất cả biến thể tiện ích; chỉ tên nhóm sẽ lọc lưới xuống nhóm đó.
- Để duyệt tất cả: để trống ô tìm kiếm và nhấp vào bất kỳ ô màu nào trong lưới — chi tiết của nó hiện ở bảng phía trên và mã hex được tự động sao chép.
- Nhấp vào bất kỳ nút biến thể bg-/text-/border-/ring- nào trong bảng chi tiết để sao chép chính xác tên lớp đó.
Ví dụ
Đầu vào
#c4b5fdĐầu ra
violet-300 — Khớp chính xác, #C4B5FD, rgb(196, 181, 253)Mã hex này là một trong các giá trị mặc định chính thức được Tailwind ghi tài liệu, nên khoảng cách là 0 và đây là khớp chính xác chứ không phải gần đúng.
Câu Hỏi Thường Gặp
Đây có phải là các màu mặc định chính thức của Tailwind CSS không?
Đúng vậy — toàn bộ 242 giá trị hex (22 nhóm x 11 sắc độ) đến từ bảng màu mặc định chính thức được Tailwind ghi tài liệu. Tailwind v4 biểu diễn màu nội bộ dưới dạng OKLCH, nhưng cùng bảng màu mặc định và các giá trị hex tương ứng được ghi tài liệu không thay đổi so với v3, nên các giá trị này đúng cho cả hai phiên bản.
Khi tra cứu hex không khớp chính xác thì có nghĩa là gì?
Nếu bạn dán một mã hex không thuộc 242 giá trị mặc định của Tailwind (ví dụ một màu thương hiệu tùy chỉnh), công cụ sẽ hiện sắc độ chính thức gần nhất theo khoảng cách RGB và gắn nhãn "Khớp gần nhất" kèm khoảng cách — nó sẽ không giống hệt từng pixel với đầu vào của bạn, chỉ là mặc định Tailwind gần nhất.
Tại sao bg-, text-, border- và ring- đều dùng chung số?
Tailwind áp dụng một thang màu chung cho mọi danh mục tiện ích, nên bg-amber-500, text-amber-500, border-amber-500 và ring-amber-500 đều là cùng một giá trị hex nền tảng áp dụng cho một thuộc tính CSS khác nhau. Đó là lý do bảng chi tiết hiển thị cả bốn biến thể cùng nhau cho bất kỳ sắc độ nào bạn tra.
Tôi có thể tra cứu một nhóm như chỉ "blue" mà không cần số sắc độ không?
Có — chỉ gõ tên nhóm (không có số) sẽ lọc lưới xuống còn 11 sắc độ của nhóm đó để bạn so sánh cạnh nhau, mà chưa cần chọn một sắc độ cụ thể.
Trang này có bao gồm các màu chủ đề Tailwind tùy chỉnh mà tôi đã định nghĩa trong cấu hình không?
Không — trang tra cứu này chỉ bao gồm bảng màu mặc định tích hợp sẵn của Tailwind, không phải các màu bạn đã thêm hoặc ghi đè trong khối tailwind.config.js theme.extend.colors hoặc khối @theme của v4. Nếu dự án của bạn tùy chỉnh bảng màu, màu hiển thị thực tế có thể khác với những gì hiển thị ở đây cho cùng một tên lớp.