Free Color Palette Generator — Triadic, Analogous, Complementary

Pick a base color, choose a harmony rule, and the palette generates instantly with hex / RGB / HSL codes and WCAG contrast scores for accessibility.

No signup Nothing uploaded No watermarks
Why use it

What you get.

Four classic harmony rules: triadic, analogous, complementary, split

WCAG AA / AAA contrast scoring against light + dark backgrounds

Export as CSS variables, Tailwind config, or JSON

Save palettes locally for later

Color-blindness simulator overlay

Step by step

How it works

No manual required — but here's the whole flow, start to finish.

  1. Pick your base color (hex, RGB, or color picker)

  2. Choose a harmony rule

  3. The palette generates — see all 5 colors with codes

  4. Click any swatch to copy, or Export to grab CSS / Tailwind

Use cases

Who reaches for this.

01

Brand guidelines

Start with one brand color, generate a 5-color system.

02

Web design

Tailwind / CSS variables exported and dropped straight into your project.

03

Accessibility audits

Check WCAG AA / AAA contrast across the whole palette.

04

Color-blindness checks

See how your palette looks for the ~5% of users with CVD.

FAQ

Questions, answered.

What's WCAG contrast?

A standard ratio between text and background. AA = 4.5:1, AAA = 7:1 for body text. We compute it for you against both light and dark backgrounds.

Can I save palettes?

Yes — saved palettes live in your browser's localStorage.

174+ tools, all free

The rest of the
toolkit

PDF utilities, image editors, calculators, dev tools and more — same rules: no login, nothing uploaded, no watermarks.