SnapToolsColour Shades & Tints Generator
Runs in your browserGenerate a full ladder of tints and shades from one base colour — the kind of 50-950 scale design systems use for tokens, hover states, and borders.
#dae5fctint 1#b6cbf8tint 2#91b1f5tint 3#6d97f1tint 4#487deetint 5#2563ebBase#134eceshade 1#0f3fa5shade 2#0b2f7cshade 3#081f52shade 4#041029shade 5About this tool
A design system rarely uses just one shade of a colour: buttons need a hover state, cards need a subtle background, and disabled states need something quieter still. This tool takes a single base colour and produces a five-tint, five-shade ladder around it — lightness moved toward white above the base and toward black below it, with the hue and saturation held constant so the whole scale still reads as the same colour.
How to use
- Pick or type a base colour — this becomes the middle of the scale.
- Read the ladder from lightest tint to darkest shade.
- Copy any step's HEX value for use as a design token.
When to use this tool
- Building a 50-900 colour scale for a design system or Tailwind config.
- Finding a hover or active state for a button that's the same colour, just darker.
- Generating a subtle tinted background for cards or badges.
- Creating a disabled-state colour that stays recognisably the same hue.
Tips
- The lightest tints work well as backgrounds; the darkest shades work well as text on a light background.
- Pair the darker shades with white text and the lighter tints with dark text — check both with the Contrast Checker.
FAQ
- How is this different from just adjusting brightness in an image editor?
- This scale holds hue and saturation constant and only moves lightness, which is what keeps every step feeling like the same colour rather than washing out or muddying.
- Is my colour sent anywhere?
- No. The scale is generated in your browser from HSL lightness steps.