Shade, Tint & Tone Generator
Generate shades, tints, and tones of any color. Build a full color range from dark to light for use in design systems, UI components, and brand guides.
#3B82F6
RGB(59, 130, 246) • HSL(217°, 91%, 60%)
Shades
Created by adding black to the base color, making it darker.
Tints
Created by adding white to the base color, making it lighter.
Tones
Created by adding gray to the base color, reducing saturation.
Shade 1
L:50%
Shade 2
L:40%
Shade 3
L:30%
Shade 4
L:20%
Shade 5
L:10%
Understanding Shades, Tints, and Tones
These three terms describe specific ways to modify a base color:
- Shade: Adding black to darken the color
- Tint: Adding white to lighten the color
- Tone: Adding gray to desaturate the color
This tool generates all three variations from a single base color, giving you a full range of related colors to work with.
How the Generator Works
The tool adjusts the HSL values of your base color:
- Shades decrease lightness (darker)
- Tints increase lightness (lighter)
- Tones decrease saturation (more muted)
You choose how many variations to generate (3-10) and get a complete set of colors that all relate back to your base.
When to Use Each Variation
Shades (Darker)
Use for text colors, borders, hover states, shadows, and depth. Darker shades of your brand color feel related but provide contrast.
Tints (Lighter)
Use for backgrounds, highlights, disabled states, and subtle accents. Light tints create visual hierarchy without introducing new hues.
Tones (Muted)
Use for secondary elements, backgrounds that don't compete with content, and creating sophisticated, less saturated palettes.
Real Use Cases
Button State System
Base color for the default button. A tint for hover. A shade for pressed/active. A muted tone for disabled. All four states feel cohesive.
Card Component Hierarchy
Lightest tint for the card background. Base color for the header. Medium shade for the title. Darkest shade for body text.
Brand Color Expansion
A startup has one brand color. This tool generates 20+ related colors they can use across their website, app, and marketing materials.
Accessible Text Colors
Generate shades until you find one that passes WCAG contrast requirements against your background. No guessing needed.
Exporting Your Variations
The CSS export gives you organized custom properties:
:root {
/* Base */
--base: #3B82F6;
/* Shades (darker) */
--shade-1: #2563EB;
--shade-2: #1D4ED8;
/* Tints (lighter) */
--tint-1: #60A5FA;
--tint-2: #93C5FD;
/* Tones (muted) */
--tone-1: #6B93D6;
--tone-2: #8FA8D8;
}Frequently Asked Questions
How many variations should I generate?
5 is a good starting point — base, 2 shades, 2 tints. For comprehensive systems, generate 8-10 for more granular control.
Why do some tones look muddy?
Heavily desaturated colors can look muddy, especially with certain hues. Try fewer tone variations or adjust the base color's saturation first.
Can I use this for monochromatic palettes?
Yes, shades and tints create a monochromatic palette. For a dedicated monochromatic generator with more control, use the Monochrome Palette Generator.
What's the difference between this and Color Scale Generator?
This tool generates all three types (shade/tint/tone) separately. Color Scale Generator creates a single continuous scale with more customization options.
How do I use these in Tailwind?
Export as CSS variables and use with var(--shade-1) in your CSS. Or copy the hex values into your Tailwind config manually.
Can I adjust the step size between variations?
This tool uses fixed increments. For custom step sizes, use the Color Scale Generator which offers more granular control.
Tips for Better Color Variations
Start with a mid-saturation base. Very saturated colors can become overwhelming when varied. Very desaturated colors don't have much room to mute further.
Test combinations. Not every shade works with every tint. Mix and match to find the best pairs for your use case.
Consider the context. A shade that looks good in isolation might not have enough contrast against your background. Always test in context.
Use tones for backgrounds. Muted tones make excellent backgrounds because they don't compete with content. They provide color without visual noise.
Other Free Color Tools
Color Scale Generator for UI & Charts
Generate stepped color scales between two colors for charts, maps, and UI usage. Export scales for use in data visualization libraries and design systems.
Monochrome Color Palette Generator
Generate a full range of shades, tints, and tones from a single color. Build clean, cohesive monochromatic palettes for minimal design systems.
Gradient Step Color Generator
Generate evenly spaced color steps between two colors. Ideal for building smooth transitions, data visualizations, and gradient-based design tokens.
Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.
Color Harmony Generator
Generate complementary, analogous, triadic, and tetradic color palettes based on color theory. Build harmonious color schemes for any design project.