Tints and Shades Generator
Build lighter and darker steps from one colour.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Generates evenly spaced tints (mixed with white) and shades (mixed with black) of a base colour, ready to use as a design-system scale. Each step shows its HEX code, and the scale can be copied as CSS custom properties.
How to use it
- Pick the base colour.
- Choose how many steps to generate on each side.
- Copy individual codes or the CSS variables.
Frequently asked questions
What is the difference between a tint and a shade?
A tint mixes the colour with white to make it lighter; a shade mixes it with black to make it darker.
Can I use the scale for text colours?
Check each text and background pair with the colour contrast checker first; lighter tints rarely meet WCAG contrast on white.
Keep going
Related tools
Color Palette Generator
Generate harmonious palettes from one base colour.
Color Contrast Checker
Test text and background colours against WCAG 2.2.
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.
CSS Gradient Generator
Build linear and radial gradients with copy-ready CSS.