Free Color Palette Generator

What is a color palette — and why harmony rules matter

A color palette is a small set of colors chosen to work together across a design: a brand, a website, a slide deck, an app. The reason some palettes feel instantly professional while others feel random is almost always the geometry of the color wheel. Colors that sit at predictable angles from each other — neighbours, opposites, evenly spaced trios — read as intentional, because the relationships between them are consistent even before anyone analyses why.

This generator builds every palette from those relationships. Pick a seed color that represents the brand or mood, choose a harmony rule, and the wheel does the rest. Lock the swatches that already feel right, regenerate the others, and stop when the set feels like one family rather than five strangers.

The six harmony rules, and when to use each

How many colors does a website actually need?

Five is the sweet spot most design systems land on: a primary for brand elements and main actions, a secondary for supporting actions, an accent for highlights, a surface/background tone, and a text tone. Everything else — hover states, borders, disabled controls, dark-mode variants — should be tints and shades of those five, not new hues. That discipline is what makes a site feel like one product instead of a collage, and it is why every swatch here expands into a 100–1000 scale.

If the palette is for a brand rather than a screen, the same five still work: primary and secondary carry the identity, the accent carries attention, and the two neutrals carry everything the brand prints, posts or packages.

Making a palette accessible, not just pretty

A palette can look beautiful and still fail the people who need to read it. The WCAG thresholds are simple: normal text needs a contrast ratio of at least 4.5:1 against its background for AA (7:1 for AAA), and large text needs 3:1. The pair checker above grades any two palette colors against all three bars, and every swatch already shows whether black or white text reads better on it.

Contrast alone is not enough. Around 1 in 12 men and 1 in 200 women live with some color-vision deficiency, so a design that communicates only through color — red for error, green for success, two similar hues for two chart series — will mislead them. Preview the palette under protanopia, deuteranopia, tritanopia and achromatopsia before shipping, and pair color with labels, icons or patterns wherever the distinction matters. For a deeper check of any single pair, use the color contrast checker.

From palette to production

A finished palette should move into code without retyping. Copy the CSS variables block straight into a stylesheet, paste the Tailwind snippet into a config, or download the SVG/PNG strip for a brand sheet or client deck. The share link encodes the exact five colors, so a teammate opening it sees the same palette you approved — no screenshots, no "close enough".

Starting from a photo instead of a color? Drop it in the extractor and use the dominant colors as the palette, or take one extracted color as a seed and grow a harmony around it. For the rest of the design workflow, browse the full design tools collection — including the image compressor for web-ready assets.

Common mistakes to avoid

• Adding a sixth, seventh, eighth hue. When a design feels flat, the fix is usually a tint, shade or better spacing — not another unrelated color.
• Judging colors only as strips. Always preview them as text, buttons and cards. A combination that looks fine as blocks can be unreadable as an interface.
• Trusting a palette you have only seen once. Check it under color-blindness simulation and at small sizes before it becomes a brand asset.
• Locking nothing and regenerating everything. Lock the swatches that work and iterate on the rest — that is how a random draw becomes a deliberate palette.
• Copying hex codes by hand into code. Paste the export instead. One transposed character is a brand inconsistency that nobody notices until a client does.