Trình tạo sắc độ màu

Trình tạo sắc độ màu là gì?

Trình tạo sắc độ màu biến một màu HEX cơ sở thành thang sắc độ sáng-tối đầy đủ, sẵn sàng cho một design system. Thay vì chỉ pha tuyến tính trong RGB, công cụ có thể nội suy trong OKLCH hoặc HSL để tông màu giữ ổn định và độ sáng phân bố đều, tạo ra một dải cân bằng về mặt tri giác không có bước bị xỉn hay bạc màu. Bạn chọn tạo bao nhiêu bước — từ 2 đến 24, hoặc một danh sách nhãn tùy chỉnh phân tách bằng dấu phẩy —, dịch tông màu hoặc chỉnh độ bão hòa, và đọc gợi ý tương phản WCAG cho từng bước cho biết sắc nào dùng được làm chữ trên nền trắng và nền đen. Thang hoàn thiện được sao chép dưới dạng thuộc tính tùy chỉnh CSS, đối tượng cấu hình màu Tailwind hoặc JSON chỉ bằng một cú nhấp.

Cách sử dụng Trình tạo sắc độ màu

1. Nhập một màu cơ sở vào ô Màu cơ sở (HEX) theo định dạng #rrggbb hoặc #rgb, hoặc nhấp vào ô màu lớn để chọn trực quan.
2. Chọn không gian màu: OKLCH hoặc HSL cho dải đều về tri giác với tông màu ổn định, hoặc RGB cho phép pha tuyến tính cổ điển.
3. Đặt số bước bạn muốn (2–24), hoặc mở Cài đặt để nhập danh sách bước tùy chỉnh phân tách bằng dấu phẩy, dịch tông màu, chỉnh độ bão hòa và đặt tên màu khi xuất.
4. Đọc hai ô tương phản ở mỗi hàng — chữ A trên nền trắng và nền đen —, được làm nổi bật khi sắc đó đạt WCAG AA cho chữ.
5. Sao chép HEX của một bước, hoặc sao chép cả thang dưới dạng biến CSS, cấu hình Tailwind hay JSON bằng các nút sao chép.

Ví dụ

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

Khác biệt giữa các tùy chọn RGB, HSL và OKLCH là gì?

RGB pha màu tuyến tính về phía trắng và đen, nhanh nhưng có thể trông không đều ở các tông trung gian. HSL và OKLCH thì giữ tông màu ổn định và phân bố độ sáng đều; OKLCH đều về tri giác, nên mỗi bước trông như một bước nhảy độ sáng bằng nhau. Chọn OKLCH để có dải cân bằng nhất.

Tôi tạo được bao nhiêu sắc và có đặt tên được không?

Đặt số bước bất kỳ từ 2 đến 24. Số 11 dùng cách đánh số Tailwind quen thuộc (50, 100…900, 950); các số khác được phân bố đều từ 50 đến 950. Bạn cũng có thể gõ danh sách nhãn tùy chỉnh phân tách bằng dấu phẩy trong Cài đặt; nó ghi đè số bước và đặt tên mỗi bước đúng như bạn viết.

Gợi ý tương phản WCAG được tính thế nào?

Với mỗi sắc, công cụ tính tỷ lệ tương phản WCAG so với trắng tinh và đen tinh từ độ sáng tương đối. Hai ô nhỏ ở mỗi hàng hiển thị chữ A trên nền trắng và nền đen, và được làm nổi bật khi tỷ lệ đạt 4.5:1 (AA cho chữ thường); di chuột để xem tỷ lệ chính xác và nó là AA hay AAA.

Dữ liệu màu của tôi có được tải lên đâu không?

Không. Phần tính toán màu, kiểm tra tương phản và cả ba định dạng xuất đều chạy hoàn toàn trong trình duyệt của bạn, nên không giá trị màu nào được gửi đến máy chủ. Công cụ hoạt động ngoại tuyến và giữ bảng màu của bạn ở chế độ riêng tư.