What is Color Palette Generator?

The Color Palette Generator creates harmonious color combinations based on color theory. Choose a base color and a harmony rule to instantly generate a palette you can use in design, web development, or art projects.

Start three ways: pick a base swatch with the colour picker or paste a hex code, drop in a photo to pull its dominant colours, or type a mood like ocean or sunset. Then choose a harmony rule and the tool builds the rest of the palette from colour-theory ratios on the wheel. Lock any swatch you want to keep, shuffle the others, click a colour you love to pivot the whole palette around it, and preview the result under colour-blindness filters. Export the final five as a CSS custom-property block, a Tailwind config, or a JSON file for your design system, or save the strip as a PNG or SVG image to share in a brief or on social.

How to use

1. Start from a base color, drop in a photo to extract its colors, or type a mood like ocean or sunset
2. Pick a harmony rule: complementary, analogous, triadic, split-complementary, tetradic, or monochromatic
3. Copy any swatch as HEX, RGB, or HSL, scan the contrast grid for accessible text pairs, then export the palette as CSS, a Tailwind config, JSON, or a PNG or SVG swatch image

When to use

• Drafting a brand palette from a single anchor colour the client already approved.
• Picking accessible accent colours for a chart or dashboard.
• Quickly auditioning palettes for a slide deck or social post.

Result

Base color #3498DB with triadic harmony generates #3498DB, #976CD6, #DB3498.

FAQ

What's the difference between complementary, analogous, and triadic harmonies?

Complementary sits the base opposite its 180-degree partner for high contrast. Analogous keeps everything within roughly 30 degrees on the wheel, so the palette feels calm. Triadic spaces three colours evenly at 120 degrees apart for bold, balanced contrast.

Can I keep my favourite swatch and only regenerate the others?

Yes. Hit the lock button on the swatches you want to preserve, then change the harmony or base colour, or press shuffle. Locked swatches stay fixed while everything else rebuilds around them.

Which export format should I use?

CSS gives you custom properties like --color-1, the Tailwind option drops a ready theme.extend.colors block into your config, and JSON is a structured object for design-token tools or scripts. For sharing the palette as a picture — in a brief, a deck, or a social post — pick PNG for a flat image or SVG for a crisp vector swatch strip.

Do these palettes pass WCAG colour contrast?

The built-in contrast grid scores every pair against the WCAG 2.x thresholds — AAA at 7:1, AA at 4.5:1, AA Large at 3:1 — and flags failures in rose. Pick a pair from the grid before assigning it to body text or buttons, since harmony rules optimise for visual balance, not contrast ratios.

Where does my colour data go?

Nowhere. All the colour maths runs inside the page, and any photo you drop in is read on your device to pull its colours — it is never sent anywhere. Your base colour, palette, and export files stay local, so an unreleased brand palette is as private as your own clipboard.

Related Tools