Generate a tint-to-shade scale from any colour with hex codes.
Generated locally in your browser.
How do you generate colour shades and tints?
The base colour is converted to HSL and its lightness is stepped evenly from about 92% (lightest tint) down to 12% (darkest shade), keeping hue and saturation constant. A tint mixes a colour toward white; a shade mixes it toward black. For example, a base of #2563eb produces a ramp from pale blue through to deep navy. The result gives cohesive hover, active and surface variants.
Understanding your result
A tint mixes a colour toward white; a shade mixes it toward black. A consistent ramp gives you hover, active and surface variants that feel cohesive.
Formula and method
The base colour is converted to HSL and its lightness is stepped evenly from about 92% (lightest tint) down to 12% (darkest shade), keeping the hue and saturation constant.
Worked example
A base of #2563eb produces a ramp from a pale blue tint through to a deep navy shade.
How to use this tool
- Pick a base colour.
- Choose how many shades to generate.
- Copy the hex codes from the swatches.
Common mistakes to avoid
- Picking too few steps, which leaves big jumps between shades.
About the Colour Shades & Tints Generator
Turn one colour into a full scale of tints and shades for your design system. Pick a base colour and the number of steps, then copy the hex codes.
Explore all Developer Tools tools
Frequently asked questions
What format are the outputs?
Each swatch shows a 6-digit hex code. Copy grabs the whole list, one hex per line.
Are these good for a design system?
Yes. An evenly stepped scale gives consistent shades for backgrounds, borders and states.