← Back to Tools
🎨 Color Palette Generator
Pick a single color to automatically generate palettes based on complementary, analogous, triadic, and other color harmonies.
#4F46E5
HSL(243°, 75%, 59%)
Palette
#4F46E5
#DDE548
Preview
Sample Card
Preview of your color palette
PrimarySecondaryAccent
Contrast Check
WCAG (Web Content Accessibility Guidelines) defines two levels for text-to-background contrast. AA (4.5:1 or higher) is the minimum required for normal text. AAA (7:1 or higher) is the enhanced level recommended for better accessibility.
| Colors | Ratio | AA (4.5:1) | AAA (7:1) |
|---|---|---|---|
#4F46E5×#DDE548 | 4.60:1 | Pass | Fail |
📖 How to Use
- 1.Pick a base color using the color picker at the top of the page.
- 2.Choose a harmony type (complementary, analogous, triadic, etc.) to generate a palette.
- 3.Click any color swatch to copy its HEX code. The preview section shows how colors look together.
- 4.Check the WCAG contrast ratios below the preview to ensure your colors are accessible.
💡 What is Color Harmony?
Color harmony is a color theory based on the relationships of colors on the color wheel. Complementary colors are opposite on the wheel, analogous colors are adjacent, and triadic colors are spaced 120° apart. Checking WCAG contrast ratios ensures your color choices are accessible to all users.