Sắc nhạt và Sắc đậm
Công cụ tạo tint và shade này tạo các sắc thái sáng hơn (pha với trắng) và tối hơn (pha với đen) của bất kỳ màu gốc nào theo 5, 10 hoặc 20 bước, kèm kết quả dạng biến CSS.
Về công cụ này
Công cụ tạo tint và shade này tạo các sắc thái sáng hơn (pha với trắng) và tối hơn (pha với đen) của bất kỳ màu gốc nào theo 5, 10 hoặc 20 bước, kèm kết quả dạng biến CSS.
Cách sử dụng
- Chọn một màu gốc.
- Chọn 5, 10 hoặc 20 bước.
- Nhấn vào ô màu bất kỳ để sao chép giá trị hex của nó.
- Nhấn Copy as CSS Variables để xuất toàn bộ thang màu.
Điều nên biết
- Tint là màu pha với trắng; shade là màu pha với đen.
- Công cụ pha màu theo các bước RGB đều nhau, nên mỗi bước thay đổi màu một lượng như nhau.
- Các design system như Tailwind dùng thang 50–900 được tạo từ tint và shade của mỗi màu thương hiệu.
- Hãy kiểm tra độ tương phản với màu chữ lấy từ thang màu, vì các bước ở giữa thường không đạt WCAG AA trên nền trắng.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Tint và shade khác nhau thế nào?
Tint làm sáng màu bằng cách thêm trắng; shade làm tối màu bằng cách thêm đen. Tone thì thêm xám.
Một màu trong design system nên có bao nhiêu sắc thái?
Khoảng 10 bước là phổ biến, ví dụ 50, 100 … 900 trong Tailwind. Như vậy đủ dải màu cho nền, viền, chữ và trạng thái hover.
Làm sao dùng thang màu trong CSS?
Sao chép thang màu dưới dạng custom properties và tham chiếu bằng var(--color-name), ví dụ cho nền, viền hoặc trạng thái hover.
Tại sao một số tint trông nhợt nhạt?
Pha với trắng vừa tăng độ sáng vừa làm giảm độ bão hòa. Để có các biến thể sáng rực rỡ hơn, hãy điều chỉnh độ bão hòa riêng trong HSL.