Design

SHD

Color Shade Generator

Generate tints and shades of any color for design systems

Base Color

Quick presets

Scale type

Display format

All Values

Click any value to copy

Swatch	Step	HEX	RGB	HSL
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900
	950

Share to Community

Was this tool helpful?

What is Color Shade Generator?

Free online color shade generator to generate a complete range of light to dark shades from any base color.

Enter a HEX code or pick a color and get 10+ carefully calculated tints and shades from near-white to near-black, mapped to a Tailwind CSS 50 to 950 color scale. Perfect for building a design system, generating shades from a single brand color, and finding the right value for hover states, backgrounds, and borders. Copy individual shades as HEX, RGB, or HSL, or export the whole scale as CSS variables or a Tailwind config block. Useful for turning one brand color into a full palette, matching Material Design tonal steps, or creating consistent light and dark variants. No signup required.

How to Use Color Shade Generator

1Enter a base color using the color picker or type a HEX code
2View the generated shade scale from lightest (50) to darkest (950)
3Click any shade to copy its HEX value
4Copy the entire palette as CSS variables or Tailwind config

Frequently Asked Questions

Shades are darker versions of a color (mixed with black), while tints are lighter versions (mixed with white). Together, they create a range of values from light to dark that maintain the same hue. This range is essential for creating depth, hierarchy, and contrast in UI design.

The Color Palette Generator creates harmonious multi-color palettes (complementary, analogous, etc.). The Color Shade Generator focuses on a single color and produces a complete range of light-to-dark variations of that specific color, similar to Tailwind's 50-950 color scales.

Yes. The generated shade scale maps directly to Tailwind's color scale format (50, 100, 200... 900, 950). You can copy the values and use them as custom colors in your tailwind.config.js file.

Enter your brand color as the base and the tool generates the lighter tints above it and darker shades below it, giving you a complete scale built around that one color. Use the lighter steps for backgrounds and the darker steps for text or hover states so everything stays in the same hue family.

A common pattern is to use your base color for the default button and step one or two shades darker for the hover state, for example 500 for default and 600 or 700 on hover. The generated scale gives you those exact values so the hover color stays consistent with your palette.

Share this tool

Related Tools

PAL

Color Palette Generator

Free online color palette generator - generate beautiful color palettes from any base color

🎨

Design Token Converter

Free online design token converter - convert design tokens between CSS, SCSS, Tailwind, and more

🔘

CSS Button Generator

Free online CSS button generator - generate styled CSS buttons with hover effects

CSS

AI CSS Generator

Free online AI CSS generator - browse 25+ CSS effects or generate custom styles with AI

GRD

CSS Gradient Generator

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

🪟

Glassmorphism Generator

Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency

Swatch

Step

HEX

RGB

HSL

100

200

300

400

500

600

700

800

900

950

What is Color Shade Generator?

Free online color shade generator to generate a complete range of light to dark shades from any base color.

Frequently Asked Questions

Yes. The generated shade scale maps directly to Tailwind's color scale format (50, 100, 200... 900, 950). You can copy the values and use them as custom colors in your tailwind.config.js file.