Shade & Tint Generator
The Shade and Tint Generator helps create lighter and darker versions of a base color. This is useful when one color is not enough for a real interface.
Need step-by-step help?
Read the full how-to for Shade & Tint Generator
If you want a clearer explanation of what each control does and how to finish a real task with the tool, use the dedicated guide.
When to use this tool
- • building a color scale
- • creating hover and active button states
- • making light backgrounds from a brand color
- • creating darker text or border variants
- • designing badges and alerts
- • building CSS variables or design tokens
Shade vs tint
- A shade is a darker version of a color.
- A tint is a lighter version of a color.
- Shades and tints help turn one brand color into a background, button, border, hover, or text system.
Button states
One base color often needs a darker hover state, a stronger active state, and a lighter tint for focus rings or subtle UI backgrounds.
Alert system
Use a light tint for the alert background, the base color for the icon or border, and a darker shade for the alert text.
Design tokens
A color scale can become reusable CSS variables such as 50, 100, 500, 700, and 900 tokens across a design system.
Common mistakes
Assuming every tint is readable
A light tint may be great as a background but still fail badly as text.
Skipping contrast checks
Even related colors can fail if the chosen steps are too close in value.
Making variations too similar
If each step is barely different, the scale will not create useful hierarchy in real UI states.
Making variations too extreme
If steps jump too much, the scale can feel disconnected from the original color.
What to do after generating shades and tints
- 1. Choose a base color.
- 2. Generate lighter and darker variations.
- 3. Assign roles to the variations instead of treating them as decorative extras.
- 4. Test contrast for text and buttons.
- 5. Copy the final values into CSS or design tokens.
Related links
Use the scale in a real UI system
Contrast Checker
Test the generated scale in text and button combinations.
Open
Color Converter
Translate the chosen tones into CSS-friendly or design-tool-friendly formats.
Open
Color Palette Generator
Use a full palette once your main color scale is stable.
Open
Color Theory Basics
Reconnect shades and tints to hue, saturation, and value.
Open
FAQ
Questions people usually ask next
Are shades and tints the same as opacity?
No. A tint changes the color itself. Opacity makes a color transparent over whatever background is behind it.
Should hover states be darker or lighter?
It depends on the design, but many buttons use a slightly darker shade on hover for stronger feedback.
Can I build a whole design system from one color?
You can start with one color, but most real systems also need neutrals, semantic colors, and accessibility-tested text/background pairs.
Why do some generated tints look washed out?
Very light tints have high lightness or low saturation. They are often better for backgrounds than for important UI elements.