Color Palette Generator
Generate a color scheme from any base color using complementary, analogous, triadic and other classic harmonies. Save the colors you like, check WCAG contrast pairs, and export the result as CSS variables or JSON. For a single-color picker with HEX/RGB/HSL conversion, see the Color Picker.
Two colors opposite on the colour wheel — high contrast, classic for accent + base.
WCAG Contrast Checker
How it works
Pick a base color with the colour picker, by typing a HEX value (e.g. `#1A73E8`), or by clicking one of the eight preset swatches. Choose a harmony mode from the dropdown and the tool builds the matching palette with classic colour-theory math.
The six harmony modes: • Complementary: base plus the colour 180° opposite on the wheel. Maximum contrast, the usual pick for accent colours and call-to-action buttons. • Analogous: base plus the colours ±30° away. Calm and harmonious, good for gradients and naturalistic illustrations. • Triadic: three colours evenly spaced 120° apart. Vibrant but balanced, good for playful brands. • Split-complementary: base plus the two colours adjacent to its complement (±30° from the opposite). A softer alternative to full complementary, easier on the eye. • Tetradic: four colours in two complementary pairs (90° spacing). Rich but harder to balance; use one as dominant and the others as accents. • Monochromatic: five tints and shades of the base hue with adjusted lightness. The safest pick for a single-brand palette.
Each swatch shows the colour in HEX, RGB, and HSL with one-click copy buttons, and a star (★) button to save it to your favourites. Saved colours persist in localStorage and survive across sessions: click any saved swatch to load it as the new base color, right-click to remove it.
The WCAG contrast checker sits below the palette. Pick any two colours from the current palette and the tool calculates the contrast ratio per WCAG 2.1, plus pass/fail badges for the three thresholds: • AA Normal (≥ 4.5:1): required for body text on most websites under WCAG 2.1 AA, the legal baseline in the EU (EN 301 549, EAA 2025) and in most public-sector US contracts (Section 508). • AAA Normal (≥ 7:1): best practice for accessibility-critical content (health, finance, government). • AA Large (≥ 3:1): for text 18 pt+ (or 14 pt+ bold), and for graphical elements and UI components.
Export: • Export CSS Variables: downloads a ready-to-paste `:root { --color-1: …; }` file for a Tailwind theme extension or any custom-property-based design system. • Export JSON: downloads structured data with HEX, RGB, and HSL components for design-token pipelines (Style Dictionary, Theo, Tokens Studio).
Performance: the picker emits ~60 events per second while you drag, but the palette is recomputed only after you pause for 80 ms. You get a smooth picker without DOM thrashing, and the palette grid stays stable while you scrub through the colour wheel.
For a single-color picker (no harmony, just HEX/RGB/HSL conversion plus a history), use the dedicated Color Picker tool.
Frequently Asked Questions
What is a complementary color?
- Two colours opposite on the colour wheel, 180° apart. Red and cyan, blue and orange, yellow and purple: these pairs maximise visual contrast, which is why warning signs and brand accents tend to use them. Pick Complementary in the dropdown to generate a base plus complement pair from any colour.
What's the difference between analogous and triadic?
- Analogous picks the two colours adjacent to your base (±30°), so they feel naturally harmonious: they share the warmth or coolness of the base. Triadic picks three colours evenly spaced 120° apart, which reads as vibrant and balanced because no two sit close together. Analogous is subtle, triadic is punchy.
When should I use monochromatic?
- When you want a single-brand palette that stays coherent across UI elements (button, hover, disabled, background, accent). All five generated colours share the exact same hue and differ only in lightness. Monochromatic palettes are the lowest-risk choice for a new brand because they are hard to make ugly.
How do I save a color I like?
- Click the ★ icon on the swatch. It turns gold and the colour is added to a Saved colors section that persists in localStorage, so it is still there when you reopen the tool tomorrow. Click any saved swatch to load it as the new base; right-click (or long-press on mobile) to remove it.
What does the WCAG contrast ratio tell me?
- The ratio between the relative luminance of two colours, computed per WCAG 2.1. 1:1 means identical luminance (invisible text) and 21:1 is the maximum (pure black on pure white). Body text under WCAG AA needs at least 4.5:1, AAA needs 7:1, and large text (18pt+ or 14pt+ bold) needs only 3:1. The pass/fail badges turn green when your pair meets each threshold.
Why is the contrast on my brand color failing AA?
- Because brand colours are designed for visual identity, not for body text. A brand blue at #1A73E8 on white has a contrast ratio of about 3.6:1, which fails AA Normal (needs 4.5) and passes AA Large (needs 3). Use the brand colour for headings, buttons and accents, and pair body text with high-contrast neutrals (#212529 on #ffffff = 17:1).
How do I export the palette to my CSS framework?
- Click Export CSS Variables and you get a `palette.css` file with `:root { --color-1: …; --color-2: …; }`. Paste those into your Tailwind config (extend.colors), a CSS-in-JS theme, or a global stylesheet. For design tokens use Export JSON instead: the structured output works directly with Style Dictionary, Theo, or Figma Tokens Studio.
Is my data stored anywhere?
- No. Palette generation is plain JavaScript running in your browser, and the saved colours live in localStorage on your device. DevTools → Network shows zero outbound requests while you pick, generate, save or export, so client work and brand experiments stay on your machine.
Color harmony modes: when to use which
Quick reference for picking the right harmony for your project. The colour wheel angle determines how adjacent or contrasting the resulting palette feels.
| Mode | Wheel angle | Colors generated | Mood / use case |
|---|---|---|---|
| Complementary | 180° apart | 2 | Highest contrast: buttons, warnings, brand accent + counter-accent |
| Analogous | ±30° from base | 3 | Calm, naturalistic: landscape illustrations, gentle backgrounds, gradients |
| Triadic | 120° spacing | 3 | Vibrant but balanced: playful brands, children's apps, infographics |
| Split-complementary | +150° and +210° | 3 | Softer than complementary: friendly contrast, editorial design |
| Tetradic | 90° spacing | 4 | Rich, complex: dashboards with many categories, magazine-style layouts |
| Monochromatic | Same hue | 5 | Safe single-brand: UI states (default / hover / active / disabled / muted) |
Computed in HSL space. Hue rotates by the listed angle; saturation and lightness stay close to the base (within ±15-30 for monochromatic). For accessible body-text pairings, always run the result through the built-in WCAG contrast checker: visually pleasing palettes can still fail AA on small text.