Tạo dải đầy đủ tints và shades từ một màu duy nhất — chọn bước sáng/tối và số lượng sắc thái, rồi sao chép bất kỳ giá trị nào ngay lập tức.

Màu cơ sở
Bước
%
Mỗi sắc thái sáng/tối hơn bao nhiêu, mỗi bước (1–25%).
Số sắc thái
Số lượng tints và shades cần tạo ở mỗi bên của màu cơ sở.
Gradient
Sắc thái đã tạo

Chọn màu cơ sở, phần trăm bước và số lượng — mọi tint và shade được tính toán ngay lập tức trong trình duyệt.


Giới thiệu về Tạo sắc thái màu

Trình Tạo Sắc Độ Màu mở rộng một màu duy nhất thành một dải đầy đủ các tông sáng và tông tối. Cho công cụ một màu gốc, nó sẽ tạo ra các tông sáng dần ở một phía và tông tối dần ở phía kia, kiểu dải màu cổ điển từ 50 đến 900 được dùng trong các hệ thống thiết kế hiện đại.

Hai tùy chọn định hình kết quả đầu ra: phần trăm bước quyết định mỗi sắc độ sáng hoặc tối hơn bao nhiêu (1–25% mỗi bước), và số lượng quyết định có bao nhiêu tông sáng và tông tối xuất hiện ở mỗi bên của màu gốc, tối đa mười. Một dải gradient xem trước toàn bộ dải màu chỉ trong một cái nhìn.

Việc tạo màu diễn ra ngay lập tức trong trình duyệt của bạn khi bạn gõ, không có gì được gửi tới máy chủ. Sao chép bất kỳ giá trị đơn lẻ nào, toàn bộ danh sách, hoặc cả dải màu dưới dạng biến CSS, sẵn sàng đưa vào tệp design-token hoặc thang màu kiểu Tailwind.

Cách sử dụng Tạo sắc thái màu

  1. Chọn màu gốc bằng bảng chọn màu hoặc nhập giá trị; nhấp "Màu ngẫu nhiên" để lấy cảm hứng.
  2. Đặt phần trăm bước để kiểm soát mức độ sáng hoặc tối của mỗi sắc độ.
  3. Chọn số lượng sắc độ để quyết định có bao nhiêu tông sáng và tông tối xuất hiện ở mỗi bên.
  4. Nhấp vào một mẫu màu để sao chép, hoặc dùng "Sao chép tất cả" và "Sao chép biến CSS" cho toàn bộ dải màu.

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

Có, hoàn toàn miễn phí. Mọi tông sáng và tông tối đều được tính trực tiếp trong trình duyệt của bạn nên không tốn phí, không cần tài khoản và không giới hạn số lần tạo dải màu.

Tint là màu gốc của bạn được pha về phía trắng (sáng hơn), còn shade là màu gốc được pha về phía đen (tối hơn). Công cụ tạo ra cả hai hướng cùng lúc, được gắn nhãn "Tints (sáng hơn)" và "Shades (tối hơn)" quanh màu gốc của bạn.

Đặt số lượng là 4 hoặc 5 mỗi bên để có tổng cộng chín đến mười một mẫu màu, với màu gốc ở giữa. Bước khoảng 8–10% thường cho khoảng cách tương tự thang 50–900 được dùng trong các framework phổ biến.

Bước nhỏ (3–6%) cho các biến thể hover và viền tinh tế; bước vừa (8–12%) phù hợp cho dải màu hệ thống thiết kế đầy đủ; bước lớn (15–25%) tạo bộ màu tương phản cao, kiểu poster. Hãy quan sát bản xem trước gradient, một dải màu tốt phải tối dần đều mà không tạo dải phân đoạn.

Có. "Sao chép biến CSS" xuất toàn bộ dải màu dưới dạng thuộc tính tùy chỉnh CSS có tên, và "Sao chép tất cả" cho bạn danh sách giá trị thuần túy có thể dán vào bất kỳ đâu, từ bản đồ SCSS đến đối tượng theme trong JavaScript.


Tìm kiếm phổ biến
tạo sắc độ màu sắc nhạt và sắc đậm làm sáng và làm tối màu các sắc độ của màu tạo sắc nhạt màu tạo các sắc độ màu
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.
Báo cáo sự cố

Thêm công cụ miễn phí này vào trang web của riêng bạn — sao chép và dán mã bên dưới.