SHD

Color Shade Generator

LOCAL · Browser-Only

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 recipe

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

What are color shades and tints?

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.

How is this different from the Color Palette Generator?

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.

Can I use these shades in Tailwind CSS?

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.

How do I build a full palette from a single brand color?

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.

Which shade should I use for a button hover state?

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

Complementary colors

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

🎨

Css variables generator

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

CSS

Glassmorphism generator

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

🔘

Css button maker

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

🪟

Frosted glass css

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

GRD

CSS Gradient Generator

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

🎨

Color Converter

Free online color converter - convert colors between HEX, RGB, HSL formats with live preview

SHD

Box shadow css

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

Keep reading: Tailwind CSS Cheat Sheet and .gitignore templates reference. Doing this in code instead? See the utility endpoints.

SHD