Bảng Màu Tailwind CSS - Tra Cứu Mã HEX, RGB, HSL Đầy Đủ

Tra Cứu Bảng Màu Tailwind CSS

Toàn bộ màu Tailwind nằm gọn trong một lưới có thể tìm kiếm — đủ 242 giá trị trên 22 nhóm màu, mỗi nhóm gồm 11 sắc độ từ 50 (sáng nhất) đến 950 (tối nhất). Nhấp vào ô màu bất kỳ để sao chép ngay tên class hoặc giá trị màu, khỏi phải quay lại tài liệu Tailwind.

Bảng màu được chia thành 5 nhóm trung tính (Slate, Gray, Zinc, Neutral, Stone) dùng cho chữ, nền và viền, cùng 17 nhóm có sắc từ Red đến Rose để tạo điểm nhấn và theme. Công cụ dành cho lập trình viên front-end và nhà thiết kế muốn duyệt nhanh, tra một mã HEX và lấy đúng giá trị mình cần.

Riêng tư từ thiết kế: toàn bộ bảng màu được đóng gói sẵn trong ứng dụng và chạy ngay trên trình duyệt của bạn. Không có gì được tải lên máy chủ, và các màu yêu thích chỉ lưu trong bộ nhớ cục bộ của chính trình duyệt bạn.

Cách Sử Dụng

Duyệt lưới màu

Mỗi hàng hiển thị tên nhóm màu ở bên trái và 11 sắc độ của nó, từ sáng nhất (50) đến tối nhất (950). Di chuột lên ô màu bất kỳ để xem số sắc độ và giá trị HEX.

Tìm và lọc

Gõ tên nhóm màu như blue hoặc giá trị HEX như #3b82f6 để lọc ngay khi gõ. Dùng menu thả xuống để chỉ hiện Tất cả màu, Màu có sắc hoặc Màu trung tính.

Chọn định dạng và sao chép

Chọn Tên Class, HEX, RGB hoặc HSL từ menu định dạng, rồi nhấp vào ô màu bất kỳ để sao chép giá trị đó vào bộ nhớ tạm.

Mở xem chi tiết

Nhấp đúp vào ô màu để mở cửa sổ chi tiết. Xem cùng lúc tên class, HEX, RGB và HSL, sao chép bất kỳ giá trị nào, và chuyển nhanh sang các sắc độ khác trong cùng nhóm.

Lưu và xuất màu yêu thích

Nhấp vào ngôi sao trên ô màu bất kỳ để thêm vào danh sách yêu thích. Mở bảng yêu thích và dùng Xuất CSS để sao chép mọi màu yêu thích thành một bộ thuộc tính tùy chỉnh CSS, sẵn sàng dán vào tệp stylesheet của bạn.

Tính Năng

Bảng màu đầy đủ

Tất cả 242 màu Tailwind trong một lưới — 22 nhóm với 11 sắc độ mỗi nhóm — bố trí để bạn so sánh các sắc độ trong cùng một nhóm chỉ với một cái nhìn.

Nhiều định dạng sao chép

Sao chép một màu dưới dạng Tên Class (bg-blue-500), HEX, RGB hoặc HSL — chọn định dạng từ menu thả xuống rồi nhấp để sao chép.

Danh sách yêu thích

Đánh dấu sao những màu bạn dùng nhiều nhất. Màu yêu thích được giữ trong bộ nhớ cục bộ của trình duyệt, nên còn nguyên qua các phiên trên cùng một thiết bị.

Xuất ra biến CSS

Biến các màu yêu thích thành thuộc tính tùy chỉnh CSS chỉ với một cú nhấp, sẵn sàng đặt vào khối :root để tạo bảng màu riêng cho dự án.

Cửa sổ chi tiết màu

Nhấp đúp vào màu bất kỳ để xem trọn vẹn: tên class, HEX, RGB và HSL cùng lúc, kèm liên kết nhanh đến mọi sắc độ khác trong nhóm.

Tìm kiếm thông minh

Tìm màu tức thì theo tên nhóm hoặc giá trị HEX. Lưới lọc theo thời gian thực ngay khi bạn gõ, và bộ lọc danh mục thu hẹp về màu trung tính hay màu có sắc.

Dữ liệu của bạn luôn riêng tư

Bảng màu được đóng gói sẵn trong ứng dụng và chạy hoàn toàn trên trình duyệt. Không có yêu cầu máy chủ, màu yêu thích lưu cục bộ, và hoạt động ngoại tuyến sau lần tải đầu.

Câu Hỏi Thường Gặp

Tailwind có bao nhiêu màu và sắc độ?

Công cụ này bao gồm 22 nhóm màu, mỗi nhóm có 11 sắc độ từ 50 (sáng nhất) đến 950 (tối nhất) — tổng cộng 242 màu. Năm nhóm là màu trung tính (Slate, Gray, Zinc, Neutral, Stone) và 17 nhóm còn lại là màu có sắc, từ Red đến Rose.

Mã HEX của bg-blue-500 là gì?

bg-blue-500 là #3b82f6. Để tìm mã HEX của bất kỳ màu nào khác, hãy tìm theo tên nhóm hoặc di chuột lên ô màu — số sắc độ và giá trị HEX hiện ngay trên đó, còn cửa sổ chi tiết liệt kê đủ HEX, RGB và HSL cùng lúc.

Cách sao chép mã HEX hoặc RGB của màu Tailwind?

Đặt menu định dạng sang HEX hoặc RGB, rồi nhấp vào ô màu bất kỳ để sao chép giá trị đó. Bạn cũng có thể nhấp đúp vào ô màu để mở cửa sổ chi tiết và sao chép riêng tên class, HEX, RGB hoặc HSL.

Cách dùng một class màu như bg-, text- hay border-?

Định dạng class sao chép một class nền như bg-blue-500, sẵn sàng dán vào HTML của bạn với Tailwind CSS. Với màu chữ, đổi tiền tố thành text-blue-500, còn với viền thì dùng border-blue-500 — tên nhóm và sắc độ vẫn giữ nguyên.

Các màu trung tính khác nhau ở điểm nào?

Tailwind có sẵn năm nhóm trung tính với sắc thái tinh tế: Slate là xám lạnh ngả xanh dương, Gray là màu trung tính cân bằng, Zinc lạnh nhưng ấm hơn Slate một chút, Neutral hoàn toàn không ngả màu nào, và Stone là xám ấm phảng phất chút nâu.

Dùng được các màu này mà không có Tailwind CSS không?

Được. Sao chép giá trị HEX, RGB hoặc HSL rồi dùng trong bất kỳ tệp CSS, công cụ thiết kế hay ứng dụng nào — các màu này hoạt động độc lập, không cần framework Tailwind.

Màu yêu thích có được lưu không, và xuất chúng ra sao?

Màu yêu thích được lưu trong bộ nhớ cục bộ của trình duyệt, nên còn nguyên qua các phiên trên cùng một thiết bị và trình duyệt; xóa dữ liệu trình duyệt sẽ xóa luôn chúng. Mở bảng yêu thích và nhấp Xuất CSS để sao chép mọi màu yêu thích thành các thuộc tính tùy chỉnh CSS mà bạn có thể dán vào stylesheet.