Color Shades Generator
Generate tints and shades from any color.
Ad
Ad
Frequently Asked Questions
What is the difference between a tint and a shade? +
A tint is a color mixed with white, making it lighter. A shade is a color mixed with black, making it darker. A tone, by contrast, is a color mixed with gray. This tool generates both tints (progressively lighter) and shades (progressively darker) from your base color.
How are the shade percentages calculated? +
Each step blends the base color toward white (for tints) or black (for shades) by a fixed percentage. Step 1 is 10% toward white/black, step 2 is 20%, and so on up to 90%. This produces evenly spaced variations that work well for design systems and UI color scales.
How do I build a color scale for a design system? +
Start with your brand color as the middle value (500), then use the tints for lighter values (100-400) and shades for darker values (600-900). Ensure sufficient contrast between adjacent steps. Most design systems use 9-11 steps per color for maximum flexibility.
Why do some shades look different than expected? +
Simple RGB blending toward black can make colors look muddy because it reduces saturation along with lightness. For more vibrant results, consider adjusting in HSL space by decreasing lightness while maintaining saturation. This tool uses RGB blending for predictable, standard output.
Ad