Generate a 10-shade palette from any colour. Export CSS, Tailwind, or JSON.
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.
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.
Yes — the Tailwind export copies a colour object you can paste directly into tailwind.config.js.
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.
Related: WCAG Contrast Checker · Tints & Shades
Keywords: colour palette generator, Tailwind colour scale, 10-shade palette, CSS colour variables, brand colour palette