Cách sử dụng Bảng màu & kiểm tra độ tương phản
- 1
Bắt đầu từ một màu
Nhập hoặc chọn Màu gốc, rồi chọn kiểu Phối màu như màu tương cận, bộ ba hay bổ sung chia đôi – hoặc tạo Bảng màu ngẫu nhiên.
- 2
Khóa và tinh chỉnh
Khóa các ô màu bạn thích trước khi xáo trộn lại, sửa trực tiếp từng ô màu, hoặc lấy năm màu chủ đạo từ một bức ảnh.
- 3
Kiểm tra khả năng đọc
Mở Độ tương phản để thử chữ trên nền theo WCAG 2.2 AA và AAA, áp dụng gợi ý sửa lỗi, rồi xem trước bảng màu ở chế độ Mù màu.
- 4
Xuất
Sao chép biến CSS, giao diện Tailwind v4 hoặc cấu hình v3, SCSS hay JSON với các sắc độ 50–950, hoặc tải xuống ảnh mẫu màu PNG.
Giới hạn và Pro
Mọi thứ đều miễn phí: bảng 5 màu, 6 kiểu phối màu, xáo trộn và xuất không giới hạn, ảnh lấy màu tối đa 50 MB, ảnh mẫu màu PNG rộng 1600 pixel.
Về Bảng màu & kiểm tra độ tương phản
Trình tạo bảng màu này dựng một bảng năm màu cùng mọi thứ mà một hệ thống thiết kế cần xung quanh nó. Các kiểu phối màu xoay sắc độ gốc trên vòng màu HSL: màu tương cận lệch 30° mỗi bên, màu bổ sung thêm màu đối diện, bổ sung chia đôi lấy hai màu nằm cạnh màu đối diện, bộ ba chia ba sắc độ cách nhau 120°, bộ bốn dùng hình vuông 90°, còn đơn sắc giữ một sắc độ ở năm mức sáng. Chế độ ngẫu nhiên tôn trọng các ô màu đã khóa, và tùy chọn từ ảnh gom các pixel của ảnh trong OKLab để tìm năm màu phổ biến và khác biệt nhất.
Với mỗi màu, tab Sắc độ tạo thang 11 bậc từ 50 đến 950 trong OKLCH, trong đó bậc gần màu của bạn nhất chính là giá trị gốc, hoặc 13 tông của hệ HCT trong Material 3 cùng năm bảng màu chính mà một giao diện Material sẽ suy ra. Công cụ kiểm tra tương phản dùng công thức độ chói của WCAG 2.2, không bao giờ làm tròn tỷ lệ lên, và gợi ý màu đạt gần nhất bằng cách chỉ đổi độ sáng, giữ nguyên sắc độ. Một lưới hiển thị tỷ lệ của mọi cặp màu trong bảng so với trắng và đen.
Mô phỏng gồm mù màu đỏ, lục, lam và mù màu hoàn toàn bằng ma trận Machado, đồng thời đánh dấu các ô màu bị lẫn vào nhau. Bản xuất đặt tên màu theo sắc độ và nhận tên do bạn tự đặt. Công cụ không đánh giá màu có hợp với thương hiệu hay không, và mô phỏng chỉ xấp xỉ cách người mù màu nhìn; chúng không thay thế việc thử nghiệm với chính họ.
Quyền riêng tư
Mọi phép tính màu, kiểm tra tương phản và phân tích ảnh đều chạy ngay trong tab này: ảnh bạn dùng để lấy màu được đọc từ ổ đĩa vào một canvas nhỏ và không bao giờ được tải lên. Bảng màu có thể lưu trong địa chỉ trang để liên kết đã sao chép mở lại đúng bảng; không có gì được lưu trên máy chủ.
Tính năng
Sáu kiểu phối màu và màu từ ảnh
Từ màu tương cận đến bộ bốn chỉ với một màu gốc, xáo trộn ngẫu nhiên có khóa, hoặc các màu chủ đạo của một bức ảnh.
Độ tương phản WCAG 2.2 kèm gợi ý sửa
AA và AAA cho chữ thường, chữ lớn và đồ họa giao diện, với màu đạt gần nhất chỉ cách một lần nhấp.
Bản xuất sẵn cho lập trình viên
Biến CSS, Tailwind v4 và v3, SCSS và JSON ở dạng HEX, RGB, HSL hoặc OKLCH, kèm ảnh mẫu màu PNG.