Palette Generator & Contrast Analyzer
Generate harmonious color palettes from a base color using color theory. Includes WCAG contrast analysis for all color pairs.
Color Scheme
Contrast Analysis (WCAG)
All color-pair combinations from your palette checked against WCAG AA.
| Foreground | Background | Ratio | AA Normal | AA Large |
|---|
About Palette Generator & Contrast Analyzer
Generate color palettes using proven color theory principles — analogous, complementary, triadic, tetradic, and more. Every generated palette is automatically analyzed for WCAG AA contrast ratios so you can build accessible designs from the start.
Color Scheme Types
Analogous — neighboring hues on the wheel, harmonious · Complementary — opposite hues, high contrast · Triadic — three evenly spaced hues · Monochromatic — variations in lightness of one hue · Shades — tints and shades from white to black
Frequently Asked Questions
Analogous colors sit adjacent to each other on the color wheel (e.g. blue, blue-green, green). They create harmonious, natural-looking palettes commonly used for calm, unified designs like nature photography sites and wellness brands.
Complementary colors are directly opposite on the color wheel (e.g. blue and orange). They create strong contrast and visual tension, making them effective for call-to-action buttons and sports brands.
The WCAG contrast ratio determines whether text is readable against a background color, particularly for users with low vision or color blindness. Using palette colors that pass WCAG AA (4.5:1) ensures your design is accessible and often legally compliant.
Click "Copy CSS Variables" to get a
:root { --color-1: #...; } block. Paste it in your CSS file, then reference the colors anywhere with var(--color-1). This keeps your palette centralized and easy to update.