How do I create a color scale from one color?

Start with your base color at the 500 level. Generate lighter tints by reducing saturation and increasing lightness (HSL). Generate darker shades by reducing lightness and slightly shifting hue. This tool automates the entire process.

Color Shade Generator — Free Tool

What Is a Color Shade Generator?

A color shade generator creates a complete tint-to-shade scale from a single base color — typically 9-11 steps from near-white to near-black. This is the foundation of every design system's color palette: Tailwind CSS, Material Design, and Bootstrap all use numbered shade scales (50 through 950) for consistent, systematic color usage.

Shades vs Tints vs Tones

Shades — darker variants, created by adding black (reducing lightness in HSL). Tints — lighter variants, created by adding white (increasing lightness). Tones — muted variants, created by adding gray (reducing saturation). A complete color scale combines all three for maximum versatility.

How to Use This Color Shade Generator

Enter your base color — Paste a hex code or pick a color using the color input. This is the starting point for your shade palette.
Generate shades and tints — The tool creates a full range from light tints (mixed with white) to dark shades (mixed with black) based on your base color.
Adjust the number of steps — Control how many shades to generate — 5 for a minimal palette, 10 for a comprehensive scale.
Copy individual values — Click any swatch to copy its hex code, or copy the entire palette as CSS custom properties.

Tips and Best Practices

→ Use HSL for better shade control. Shading by adjusting lightness in HSL produces more natural-looking results than mixing with black (which muddies colors). This tool uses perceptual algorithms for better results.
→ Build a 50–950 scale. Modern design systems (like Tailwind) use a 50-950 numbering scale with 500 as the base. This gives you granular control for backgrounds, borders, text, and hover states.
→ Test shade contrast. Make sure your text color shade has at least 4.5:1 contrast against your background shade. Use our Contrast Checker to verify.
→ Avoid pure black for shadows. Instead of #000000, use your darkest shade (900 or 950) for shadows and dark backgrounds. It creates more cohesive, less harsh designs.

Frequently Asked Questions

What is a color shade?

A shade is a darker version (adding black). A tint is lighter (adding white). A tone adds gray. Together they form a complete color scale from one base color.

How many shades should a design system have?

9-11 steps: 50 (lightest) through 900/950 (darkest). Tailwind CSS uses this 50-950 scale. Each step needs enough contrast to be visually distinguishable.

How do I create a color scale?

Start with your base at 500. Generate lighter tints by increasing HSL lightness. Generate darker shades by decreasing lightness and slightly shifting hue. This tool automates the process.

What is the difference between a shade, tint, and tone?+

A shade is a color mixed with black (darker). A tint is a color mixed with white (lighter). A tone is a color mixed with gray (more muted). Together, these create a complete value scale from lightest to darkest for any hue.

How many shades should a design system have?+

Most modern design systems use 10–11 shades per color (e.g., Tailwind's 50–950 scale). This provides enough granularity for backgrounds (light shades), borders (medium), text (dark), and hover states (adjacent values). Simpler systems can work with 5 shades.

Why do some shade generators produce muddy colors?+

Simple shade generators mix colors with pure black (#000), which shifts the hue toward gray and creates muddy results. Better generators adjust the lightness channel in HSL or LCH color spaces, preserving the hue's vibrancy across the entire shade range.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools