Lộ trình tác vụ / từ đầu vào đến kết quả
Cách xây dựng một bộ hài hòa năm màu
- 01
Đặt màu gốc
Gõ một giá trị hex sáu chữ số vào HEX gốc — tiền tố # là tùy chọn — hoặc chọn màu trực quan bằng Bộ chọn màu gốc. Hai trường luôn đồng bộ, và không gian làm việc mở với màu gốc #5D4DF1.
- 02
Chọn quy tắc hài hòa
Chọn Tương đồng, Bổ túc, Bổ túc tách đôi, Tam sắc, Tứ sắc hoặc Đơn sắc. Bộ máy áp dụng các độ lệch hue cố định rồi ghim mẫu giữa vào đúng màu gốc; những mẫu còn lại không nhất thiết trùng các góc lý thuyết. Đơn sắc giữ hue gốc nhưng thay đổi cả độ bão hòa và độ sáng.
- 03
Đặt mục tiêu tương phản
Chọn một Mục tiêu tương phản chữ: 3:1 cho chữ cỡ lớn, 4.5:1 cho chữ nội dung mức AA, hoặc 7:1 cho chữ nội dung mức AAA — mặc định là 4.5:1. Mỗi mẫu màu được đo với đen hoặc trắng, tùy màu nào đọc tốt hơn trên nó.
- 04
Tạo bảng màu
Nhấn Tạo bảng màu. Năm mẫu màu xuất hiện, và mẫu ở giữa luôn chính xác là màu gốc của bạn — bốn mẫu còn lại dịch hue, độ bão hòa và độ sáng quanh nó trong các dải bị chặn, nên dải màu luôn dùng được thay vì trôi thành neon hay bùn đất.
- 05
Đọc các huy hiệu tương phản
Mỗi mẫu màu hiển thị giá trị hex, tỷ lệ tương phản và một huy hiệu Đạt hoặc Dưới mục tiêu, với chữ trên mẫu render bằng đen hoặc trắng — màu thắng trong phép so sánh tương phản. Huy hiệu Dưới mục tiêu nghĩa là hãy chọn một màu lân cận tối hơn hoặc sáng hơn cho chữ, chứ không phải màu đó bị hỏng.
- 06
Sao chép CSS hoặc tải xuống JSON
Sao chép CSS chép một khối :root có chú thích với các custom property từ --palette-1 đến --palette-5. Tải xuống JSON lưu toolars-palette.json, ghi lại màu gốc, quy tắc hài hòa, mục tiêu tương phản và dữ liệu tương phản của từng màu cùng các trường aiModel và api tường minh được đặt là null.