Primary
#63adf1
White 2.39:1
AA fail
Black 8.78:1
AA pass
Color Palette Generator
Start from one color, explore common color harmonies, and check WCAG contrast before using the palette in a UI or brand system.
Browse saved palette ideas →Primary
#63adf1
8.78:1
Secondary
#6389f1
6.38:1
Accent
#6366f1
4.70:1
Surface
#8463f1
5.04:1
Support
#a763f1
5.70:1
Secondary
#6389f1
White 3.29:1
AA fail
Black 6.38:1
AA pass
Accent
#6366f1
White 4.47:1
AA fail
Black 4.7:1
AA pass
Surface
#8463f1
White 4.17:1
AA fail
Black 5.04:1
AA pass
Support
#a763f1
White 3.69:1
AA fail
Black 5.7:1
AA pass
Giới thiệu Color Palette Generator
Bắt đầu từ một màu gốc, tạo các kiểu phối màu phổ biến và kiểm tra độ tương phản chữ trước khi dùng palette cho UI, thương hiệu hoặc design system.
Cách tạo bảng màu
- 1
Chọn màu gốc
Nhập mã hex 6 ký tự hợp lệ hoặc chọn màu bằng color picker.
- 2
Chọn kiểu phối màu
Thử analogous, complementary, triadic, tetradic hoặc monochromatic.
- 3
Kiểm tra contrast
Xem tỷ lệ tương phản của chữ đen và trắng trên từng màu trong palette.
- 4
Xuất palette
Copy CSS variables hoặc JSON rồi map vào design token của dự án.
Câu hỏi về bảng màu
WCAG AA ở đây nghĩa là gì?
Tool kiểm tra các ngưỡng contrast tiêu chuẩn cho chữ thường và chữ lớn theo WCAG 2.x.
Palette được tạo có tự động accessible không?
Không. Accessibility phụ thuộc cách ghép màu foreground và background trong giao diện thực tế.
Có thể export kết quả không?
Có. Bạn có thể copy palette dưới dạng CSS variables hoặc JSON.