Tạo bảng màu

Cách sử dụng

1. Nhập màu theo bất kỳ cách viết nào, hoặc dùng bộ chọn màu.
2. Đọc dải màu — mỗi bậc hiển thị độ tương phản của chính chữ trên nền đó.
3. Lấy một bộ phối khi bạn cần màu thứ hai đi cùng màu chính.
4. Sao chép biến CSS thẳng vào stylesheet.

Tính năng

• Mười một bậc từ 50 tới 950, đúng hình dạng mà một dải màu giao diện cần.
• Điều chỉnh độ sáng trong HSL, nên hai đầu dải vẫn giữ màu thay vì ngả xám.
• Màu chữ trên mỗi ô được chọn theo tỉ lệ tương phản, không đoán theo độ sáng.
• Năm kiểu phối: bổ túc, tương đồng, bộ ba, bổ túc xen kẽ và bộ bốn.
• Chạy hoàn toàn trong trình duyệt.

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

Vì sao dải màu từ công cụ khác trông bạc màu?

Vì chúng trộn màu với đen và trắng trong không gian RGB, mà trộn thì kéo độ bão hòa về không — hai đầu sáng và tối ngả xám. Điều chỉnh độ sáng trong HSL giữ nguyên tông màu và độ bão hòa, chỉ đổi mức sáng, đúng như một dải màu cần làm.

Con số tương phản trên mỗi bậc là gì?

Là tỉ lệ tương phản WCAG giữa ô màu và chữ đen hoặc trắng vẽ lên nó, lấy bên nào dễ đọc hơn. 4,5:1 là mức tối thiểu cho chữ thường và 3:1 cho chữ lớn, nên con số này cho biết ngay bậc nào đặt chữ được và bậc nào chỉ nên làm nền.

Nên dùng kiểu phối nào?

Màu tương đồng cho cảm giác êm — các màu nằm cạnh nhau trên vòng tròn nên hiếm khi chọi nhau. Màu bổ túc khi cần đúng một màu nhấn nổi bật. Bộ ba và bộ bốn cho nhiều màu hơn mức phần lớn giao diện cần; chúng hợp với minh họa hơn là với sản phẩm.

Công cụ liên quan