Tạo
Màu sắcTrình tạo sắc độ màu
Tạo dãy sắc độ sáng tối đồng nhất từ bất kỳ màu HEX nào. Điều chỉnh số lượng tông sáng và tông đậm, xem trước swatch thân thiện trải nghiệm và xuất mã CSS, JSON hoặc cấu hình Tailwind cho hệ thống thiết kế chỉ trong vài giây.
Trình tạo sắc độ màu - Xây thang màu cho thương hiệu
Thiết kế giao diện, thương hiệu hay biểu đồ đều cần dãy màu sáng tối đồng nhất. Công cụ này giúp bạn sinh các biến thể cân bằng từ một màu gốc duy nhất, sẵn sàng dùng cho nút bấm, nền, trạng thái hay đồ thị.
Tint và shade là gì?
Tint là màu được pha với trắng để sáng hơn, shade là màu pha với đen để đậm hơn. Một thang màu chuẩn giúp bạn có đủ sắc độ cho hover, shadow, background thẻ hay điểm nhấn biểu đồ mà không phải đoán tỷ lệ.
Cách sử dụng công cụ?
1) Nhập hoặc chọn màu gốc. 2) Điều chỉnh tổng số swatch hoặc số tint và shade cần dùng. 3) Nhấn "Tạo bảng màu" để cập nhật. 4) Nhấp để sao chép từng swatch hoặc xuất mã CSS, JSON, Tailwind cho dự án.
Vì sao cần nhiều định dạng xuất?
Mỗi nhóm làm việc theo quy trình khác nhau: biến CSS dùng ngay trong stylesheet, JSON phù hợp token design hoặc plugin Figma, còn Tailwind giúp tích hợp vào dự án utility-first.
Tính năng nổi bật
- Tạo tối đa 16 sắc độ sáng tối từ một màu HEX
- Lưới swatch tương tác, sao chép nhanh khi nhấp
- Điều chỉnh riêng số lượng tint và shade
- Khối xuất mã CSS, JSON, Tailwind sẵn dùng
- Tạo màu ngẫu nhiên để khai phá ý tưởng
- Swatch hiển thị chữ tương phản dễ đọc
- Giao diện responsive, thao tác bàn phím mượt
- Hỗ trợ chế độ tối cùng hiệu ứng hover nhẹ
- Tất cả xử lý trực tiếp trên trình duyệt