Shades & Tints
Generate darker shades and lighter tints from any base color. See the full spectrum from near-black to near-white.
Free Online Tool
Color Shades & Tints Generator - Create Color Scales
Generate color shades, tints, and tones from any color. Create Tailwind-style 50-950 scales, CSS variables, and full color systems. Free online color scale generator.
Color Shades
All scales at once
Base
Hue217°
Saturation91%
Lightness60%
on White3.7:1
on Black5.7:1
Primary Colors
Cool Tones
Warm Tones
Neutrals
Click to copy · Tap label for details
Key Features
Powerful features designed for designers and developers
Tailwind-style Scales
Create 50-950 color scales in the same format as Tailwind CSS. Drop in as a custom color in your config.
Tone Variations
Generate saturation-adjusted tones — pure, muted, and desaturated variations of your color.
Adjustable Steps
Choose 5, 7, 9, or 11 steps for your scale. More steps give smoother transitions for complex UI systems.
CSS Export
Export as CSS custom properties (--color-500: #...) or Tailwind config snippet, ready to paste.
Visual Preview
See all shades side by side. Click any swatch to copy its HEX value instantly.
How It Works
Get started in just a few simple steps
- 1
Pick Your Color
Enter a HEX color or use the color picker. This is the base color for your scale.
- 2
Choose Scale Type
Select shades (darker), tints (lighter), tones (desaturated), or a full Tailwind 50-950 scale.
- 3
Adjust Steps
Choose how many steps you need in your scale. More steps = more granular control in your design system.
Export
Copy individual hex values, export as CSS variables, or get a Tailwind config snippet for your project.
Frequently Asked Questions
Everything you need to know
What is the difference between a shade and a tint?
A shade is created by adding black to a color, making it darker. A tint is created by adding white, making it lighter. Tones are created by adding gray, reducing saturation.
How does the Tailwind 50-950 scale work?
The scale generates 11 values from 50 (lightest) to 950 (darkest), matching Tailwind's naming convention. You can use these as drop-in replacements for any Tailwind color.
How many steps should I use for my color scale?
For most UI systems, 9 or 11 steps work well. 5 steps is good for simple components. 11 steps gives you the full Tailwind-compatible range.
Can I export as CSS variables?
Yes! Export your scale as CSS custom properties like `--blue-500: #3B82F6`. These can be used directly in any CSS file or design system.
Does this work with Tailwind v4?
Yes. The exported format works with both Tailwind v3 (theme.extend.colors) and Tailwind v4 (@theme inline) configuration styles.
Related Tools
Explore more color tools
Ready to Get Started?
Color Shades & Tints Generator - Create Color Scales - Free, no signup required
Generate Color Shades