Tint & Shade Generator
Generate tints (lighter) and shades (darker) from any base color. Build a complete color scale for your design system.
About This Tool
The Tint & Shade Generator creates lighter and darker variants from any base color. Tints are made by mixing the base color with white (adding lightness), while shades are made by mixing with black (reducing lightness).
The tool generates up to 5 levels of tints and 5 levels of shades, plus the original base color — giving you an 11-step palette centered on your chosen hue. Each swatch can be clicked to copy its hex code.
How to Use
- Pick a base color using the color picker or type a hex code.
- Use the sample buttons to try preset colors quickly.
- Adjust the number of levels (3–5) to control palette width.
- Click any swatch to copy its hex code. Use Copy All to copy the full scale.
Use Cases
Design systems need a systematic color scale for each brand color. UI designers generate hover, active, and disabled states from a single action color. Frontend developers create consistent button, badge, and card color variants.
FAQ
- What is the difference between a tint and a shade? — A tint mixes the color with white (lighter); a shade mixes with black (darker). A tone mixes with gray and is not generated here.
- How are the levels calculated? — Each level mixes the base color with white or black at 10%, 30%, 50%, 70%, and 90% proportions, giving consistent visual steps.
- Can I get CSS variables from this? — The output is hex codes. You can paste them into your CSS as --color-500, --color-400, etc.