Color Shades Generator

Generate a full shade scale (50–950) from a single color, like Tailwind does.

Free & unlimited

Quick start presets

Name

Color

Compare with Tailwind

primary

Closest Tailwind: blue-500

Tip: Use the 500 shade as your base color and build UI with lighter shades for backgrounds and darker shades for text. Enable "Compare with Tailwind" to see how your custom palette stacks up against the built-in palette. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text.

Export

  --primary-50: #e6eefa;
  --primary-100: #d6e3f7;
  --primary-200: #b2ccf4;
  --primary-300: #8db4f2;
  --primary-400: #669cf3;
  --primary-500: #3b82f6;
  --primary-600: #0b60ed;
  --primary-700: #0848b6;
  --primary-800: #05317e;
  --primary-900: #031b47;
  --primary-950: #02102b;

WCAG contrast:W/B: ≥4.5 = AA passW/B: <4.5 = FailW = vs white, B = vs blackClick any swatch to copy its hex value

All processing happens in your browser. No data is sent to any server.

About this tool

1
Enter a color
Pick or type a hex color as your base (500 shade).
2
View shades
See 11 shades from 50 (lightest) to 950 (darkest) generated automatically.
3
Click to copy
Click any swatch to copy its hex value.
4
Export
Export as CSS custom properties, SCSS, Tailwind config, or JSON.

The algorithm adjusts lightness and saturation in HSL space, similar to how Tailwind generates its palettes.
Each shade shows contrast ratios against white and black for accessibility.
Add up to 5 colors to build a complete multi-color palette.