How are shades generated?

Shades are generated by adjusting the lightness value in HSL color space. Starting from your base color, the tool creates a range from very light (near white) to very dark (near black), producing a palette similar to Tailwind CSS or Material Design color scales.

How many shades are generated?

The tool generates 10 shades per color (100 through 900 scale), plus the base color (500). You can also generate tints (mixing with white) and tones (mixing with gray) separately.

Can I export the palette for CSS or Tailwind?

Yes - copy the palette as CSS custom properties (--color-100: #f3f4f6), as a Tailwind config object, or as a SCSS variable map. One-click copy for each format.

Is my data sent anywhere?

No - all generation runs in your browser using JavaScript.

/ developer tools

Color Shade Generator

Live

Base Color

Generated Shades

50#F5F7FA

100#E9EEF7

200#C5D6F2

300#89B0F0

400#4A8AF2

500#0B64F4

600#0C50C0

700#0C3D8D

800#0D2E64

900#0B1E3C

950#081120

Preview Strip

100

200

300

400

500

600

700

800

900

950

Export Shades

CSS Variables Preview

:root {
  --color-50: #F5F7FA;
  --color-100: #E9EEF7;
  --color-200: #C5D6F2;
  --color-300: #89B0F0;
  --color-400: #4A8AF2;
  --color-500: #0B64F4;
  --color-600: #0C50C0;
  --color-700: #0C3D8D;
  --color-800: #0D2E64;
  --color-900: #0B1E3C;
  --color-950: #081120;
}

Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.

Generate a complete palette of 11 perceptually balanced shades from any base color, following the Tailwind CSS naming convention: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Enter any hex color or use the color picker, and all 11 shades appear instantly as swatches with hex codes and one-click copy buttons. Export in three developer-ready formats: CSS custom properties ready to paste into a stylesheet, a Tailwind CSS configuration object ready for tailwind.config.js, or a plain hex list for Figma, Sketch, or Adobe XD. The generator intelligently shifts hue, saturation, and lightness across the scale for natural-looking results. All generation runs in your browser. No account required.

How to Use

1Enter a base color using the color picker or type a HEX value
2The tool generates 10 shades from light (100) to dark (900)
3Toggle between Shades (adding black), Tints (adding white), and Tones (adding gray)
4Click any shade swatch to copy its HEX value
5Choose an export format: CSS custom properties, Tailwind config, or SCSS variables
6Click Copy to copy the full palette code for your project

Features

10-step shade scale (100–900) per base color
Shades (add black), Tints (add white), and Tones (add gray) modes
Tailwind CSS config export format
CSS custom properties export format
SCSS variable map export format
One-click copy per swatch or for the entire palette
100% browser-based

Color Shade Generator

How to Use

Features

Frequently Asked Questions

/ related tools

Community Feedback

Reviews

Rate & Review

/ share this tool