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
About the Color Palette Generator
Start from one base color, generate common harmony patterns, and inspect text contrast before using the palette in a UI, brand, or visual system.
How to build a color palette
- 1
Choose a base color
Enter a valid six-digit hex value or use the color picker.
- 2
Pick a harmony
Try analogous, complementary, triadic, tetradic, or monochromatic relationships.
- 3
Review contrast
Check the contrast ratios shown for black and white text against each palette color.
- 4
Export the palette
Copy CSS variables or JSON and map the colors to your own design tokens.
Color palette questions
What does WCAG AA mean here?
The tool checks the standard contrast thresholds used for normal and large text in WCAG 2.x.
Is a generated palette automatically accessible?
No. Accessibility depends on how foreground and background colors are paired. Review the contrast result for the actual UI use case.
Can I export the result?
Yes. You can copy the generated palette as CSS variables or JSON.