Tạo Scale Tailwind

Biến một màu gốc duy nhất thành dải màu 50–950 theo phong cách Tailwind, rồi sao chép thẳng vào tailwind.config hoặc dùng làm biến CSS. Mọi thứ chạy ngay trong trình duyệt nên không có dữ liệu nào bị tải lên.

Các bước sử dụng

1. Chọn màu gốc bằng bộ chọn Màu gốc (Base color), hoặc gõ/dán mã hex vào ô hex bên cạnh (ví dụ #1677ff).
2. Đặt Tên (Name) cho dải màu (chỉ gồm chữ, số và dấu gạch ngang) — tên này trở thành khóa như brand hoặc tiền tố của biến CSS.
3. Xem lưới Dải màu (Scale) hiển thị đủ 11 sắc độ từ 50 (nhạt nhất) đến 950 (đậm nhất) kèm mã hex.
4. Nhấp vào bất kỳ ô màu nào trong dải để sao chép riêng mã hex đó vào clipboard.
5. Dùng nút Sao chép (Copy) trên thẻ tailwind.config để lấy toàn bộ object màu, hoặc nút trên thẻ CSS variables để lấy khối :root chứa các biến CSS.

Mẹo

• Dải màu giữ nguyên tông màu (hue) và độ bão hòa (saturation) của màu gốc, chỉ thay đổi độ sáng qua các bước 50–950, nhờ vậy cả dải luôn nhất quán về mặt thị giác.
• Nhãn trên mỗi ô màu tự chuyển giữa chữ đen và chữ trắng theo độ sáng, giúp bạn ước lượng nhanh độ tương phản của từng sắc độ.
• Đổi ô Tên trước khi sao chép — nó đồng thời đổi tên khóa object trong tailwind.config và tiền tố biến CSS --tên-###.

Câu hỏi thường gặp

Sắc độ nào khớp với màu gốc của tôi?

Dải màu được dựng từ các mức độ sáng cố định, nên màu gốc chính xác thường không xuất hiện y nguyên. Bước 500 (độ sáng 55) gần với tông trung bình điển hình nhất, trong khi 50 là sắc nhạt nhất và 950 là sắc đậm nhất.

Tôi nhận được cấu hình Tailwind hay biến CSS?

Cả hai. Công cụ xuất ra object name: { 50: '#...', ... } cho tailwind.config và khối biến CSS tương ứng :root { --name-50: #...; }. Bạn sao chép cái nào phù hợp với dự án của mình.

Dữ liệu màu của tôi có bị gửi đi đâu không?

Không. Việc phân tích màu và tạo dải màu diễn ra hoàn toàn trong trình duyệt, và thao tác sao chép dùng clipboard cục bộ của bạn.