Về công cụ này
Sắc tối (shade) và sắc sáng (tint) là nền tảng của một hệ màu giao diện dùng được. Một màu thương hiệu duy nhất hiếm khi đủ dùng: bạn cần các sắc sáng hơn cho nền, trạng thái hover và các mảng tô nhẹ, và các sắc tối hơn cho văn bản, viền và các trạng thái cần giữ được độ tương phản dễ đọc trên nền sáng. "Shade" và "tint" có ý nghĩa chính xác trong thuật ngữ thiết kế — shade là trộn màu gốc với đen, tint là trộn với trắng — khác với "tone", là trộn với xám, và công cụ này không tạo ra tone.
Chọn một màu gốc và số bước để tạo ra chuỗi chuyển màu đầy đủ từ tối sang sáng: sắc tối nhất đứng đầu, màu gốc của bạn ở giữa, và sắc sáng nhất ở cuối. Nhấp vào bất kỳ ô màu nào để sao chép mã hex của nó vào clipboard, dùng cho biến CSS, design token hoặc cấu hình Tailwind. Mọi thứ chạy cục bộ trong trình duyệt khi bạn điều chỉnh màu hoặc số bước; không có gì được tải lên.
Câu hỏi thường gặp
Sự khác biệt giữa shade và tint là gì?
Shade là màu gốc của bạn pha về đen (đậm hơn), còn tint là màu gốc pha về trắng (nhạt hơn). Cả hai đều giữ nguyên tông màu (hue).
Tôi nên tạo bao nhiêu bước cho bảng màu hệ thống thiết kế?
Hầu hết các hệ thống thiết kế dùng 5-10 bước (tương tự thang 50-900 của Tailwind) — đủ để bao phủ nền, viền, chữ và trạng thái hover mà không có quá nhiều màu gần trùng lặp.