How many shades should a color scale have?

Nine is the practical default. It gives you two light steps for backgrounds, a mid step for the brand color itself, and enough dark steps for accessible text. Fewer than five and you run out of contrast; more than twelve and adjacent steps stop being visually distinguishable.

Can I export the palette to Tailwind?

Yes. Pick the 50-900 naming pattern and copy the generated block into the theme section of your Tailwind config. The keys already match Tailwind's scale, so nothing needs renaming.

Why do my light shades look washed out?

Very light steps lose saturation fast because there is little room left between the color and pure white. Raise the saturation of your base color before generating, or drop the step count so the lightest shade does not sit as close to white.

Is this palette generator free?

Yes, completely. There is no signup, no export limit, and no watermark. Everything runs in your browser.

Palette Generator

Color Palette Generator

Create monochromatic palettes from any color. Export-ready for Tailwind, Radix UI, and Ant Design.

Export Code

/* CSS Variables */
:root {
  --custom-palette-50: #FFD4FF;
  --custom-palette-100: #FFB9FF;
  --custom-palette-200: #FF9FFF;
  --custom-palette-300: #E486FF;
  --custom-palette-400: #C96CE8;
  --custom-palette-500: #AE54CE;
  --custom-palette-600: #943AB4;
  --custom-palette-700: #7A209B;
  --custom-palette-800: #600082;
  --custom-palette-900: #47006A;
  --custom-palette-950: #2F0053;
}

How the scale is built

Pick a base hex and the generator walks its lightness axis, holding hue and saturation steady. That keeps every step recognisably the same color instead of drifting toward grey or shifting hue the way naive HSL interpolation does.

Choose 5 to 12 steps depending on how much room your design system needs. Nine is the usual answer: it maps cleanly onto Tailwind's 50 through 900 and leaves you two dark steps for text on tinted backgrounds.

Picking a naming pattern

The 50-900 pattern matches Tailwind and most component libraries, so a generated scale drops into an existing config without renaming anything. The 1-10 pattern suits Radix-style scales where step number maps to a semantic role. The 10-100 pattern is for teams who already number tokens that way.

Frequently asked

How many shades should a color scale have?: Nine is the practical default. It gives you two light steps for backgrounds, a mid step for the brand color itself, and enough dark steps for accessible text. Fewer than five and you run out of contrast; more than twelve and adjacent steps stop being visually distinguishable.
Can I export the palette to Tailwind?: Yes. Pick the 50-900 naming pattern and copy the generated block into the theme section of your Tailwind config. The keys already match Tailwind's scale, so nothing needs renaming.
Why do my light shades look washed out?: Very light steps lose saturation fast because there is little room left between the color and pure white. Raise the saturation of your base color before generating, or drop the step count so the lightest shade does not sit as close to white.
Is this palette generator free?: Yes, completely. There is no signup, no export limit, and no watermark. Everything runs in your browser.

Related tools

← All tools

Color Palette Generator

Custom Palette

Custom Palette

How the scale is built

Picking a naming pattern