CSS & Design
Color Shades and Tints Generator
Generate a 50-900 shade scale from one colour for design systems.
Free foreverRuns in your browserNo sign-up
50
#EBF1FE100
#CEDCFD200
#9DBAFB300
#6390F8400
#2866F6500
#0A4BE1600
#083EBA700
#063193800
#05246B900
#031744Ten shades from light (50) to dark (900), matching the scale design systems like Tailwind use.
About the Color Shades and Tints Generator
Design systems use a scale of shades - from a light 50 to a dark 900 - built from one base colour.
This tool takes a hex colour and generates ten shades by varying the lightness, ready to drop into a Tailwind config or CSS variables.
It runs entirely in your browser.
Key features
- 50 to 900 shade scale
- Copy a single shade or all
- Consistent lightness steps
- Runs in your browser
How to use
- 1Pick or enter a base hex colour.
- 2Copy the shade you need, or copy all.
- 3Use them as design tokens.
Examples
Blue scale
Input:
#1B5DF5Generates ten blue shades from a light 50 to a dark 900.
Frequently asked questions
- How are the shades made?
- The base colour is converted to HSL and the lightness is stepped from light to dark to create ten shades that share the same hue.
- Does this match Tailwind exactly?
- It follows the same 50-900 naming and feel, but Tailwind's palette is hand-tuned, so treat these as a fast, close starting point.
- Can I use these as CSS variables?
- Yes. Copy the hex values into custom properties like --color-500 and reference them across your styles.