T
DataToolings

Color Shades Generator

Generate a full 11-stop tints & shades palette from any color. Export as CSS variables, Tailwind config, or hex values.

★
50
100
200
300
400
500
600
700
800
900
950
/* brand */
:root {
  --color-brand-50: #f0f6fe;
  --color-brand-100: #e2ecfe;
  --color-brand-200: #c0d7fc;
  --color-brand-300: #8ab5f9;
  --color-brand-400: #4b8df7;
  --color-brand-500: #0b64f4;
  --color-brand-600: #0950c3;
  --color-brand-700: #07409c;
  --color-brand-800: #063075;
  --color-brand-900: #042253;
  --color-brand-950: #03183a;
}

What Is a Color Shades Generator?

A color shades generator takes a single base color and produces a full palette of tints (lighter variants) and shades (darker variants). The output follows the same 11-stop scale used by Tailwind CSS (50, 100, 200 … 900, 950), making it easy to drop the result directly into a design system or Tailwind config.

How to Use

  • Enter a hex color or use the color picker
  • The 11-stop palette generates instantly
  • Use the tabs to copy CSS variables, Tailwind config, or plain hex values
  • The closest stop to your input color is highlighted

Features

  • 11 stops: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
  • Automatic contrast-aware text color on each swatch
  • Export as CSS custom properties, Tailwind config, or hex list
  • One-click copy for each format

FAQ

How is the palette calculated?

The input color is converted to HSL. The hue and saturation are preserved, while the lightness is mapped to predefined values at each stop (e.g. stop 50 = 97% lightness, stop 950 = 12% lightness). This produces a perceptually consistent scale similar to Tailwind CSS's built-in color palettes.

Can I use the output directly in Tailwind CSS?

Yes — copy the Tailwind Config tab output and paste it into the theme.extend.colorssection of your tailwind.config.js file. You can then use class names like text-brand-500 or bg-brand-100 immediately.

What is the difference between a tint and a shade?

A tint is a color mixed with white (increasing lightness), and a shade is a color mixed with black (decreasing lightness). The stops below 500 are tints; stops above 500 are shades.