Colour Palette Generator

Generate a 10-shade palette from any colour. Export CSS, Tailwind, or JSON.

Base colour

Palette name (for export)

About Colour Palette Generator

Enter any hex colour and generate a 10-shade palette — 50 through 900 — following the same lightness steps as Tailwind CSS's colour system. Each shade shows its WCAG contrast ratio against white and black so you can immediately see which text colours are accessible. Export as CSS custom properties, a Tailwind config object, or JSON.

How are the shades generated?

The hue and saturation of your input colour are preserved; only the lightness is mapped to fixed steps (97%, 93%, 85%, … 12%) following Tailwind's scale.

Can I export to Tailwind?

Yes — the Tailwind export copies a colour object you can paste directly into tailwind.config.js.

What does the contrast badge mean?

Each shade shows its WCAG contrast ratio against white and black. AA means ≥4.5:1, AA+ means ≥3:1 (large text), Fail means below 3:1.

Keywords: colour palette generator, Tailwind colour scale, 10-shade palette, CSS colour variables, brand colour palette