Shades & Tints Generator
Generate shade and tint ramps from one colour.
Shades (toward black)
#22d3ee #1ebcd4 #1aa4b9 #178d9f #137584 #0f5e6a #0b464f #082f35 #04171a #000000 Tints (toward white)
#22d3ee #3bd8f0 #53ddf2 #6ce2f4 #84e7f6 #9debf7 #b5f0f9 #cef5fb #e6fafd #ffffff How to use
- 1 Enter or pick a base HEX colour.
- 2 Choose how many steps each ramp should have.
- 3 Review the shades (darker) and tints (lighter) scales.
- 4 Copy the HEX of any step you need.
About Shades & Tints Generator
The Shades & Tints Generator turns a single base colour into two ordered ramps: shades, which mix the colour progressively toward black, and tints, which mix it toward white.
You pick a starting HEX value and a number of steps, and it produces an evenly-spaced scale you can copy step by step.
This is the everyday work of building a design system.
A button needs a darker shade for its hover and pressed states; a card needs a pale tint for its background; a chart needs a graded sequence that reads as one family.
Eyeballing those values in a colour picker is slow and inconsistent.
By mixing linearly toward black or white, this tool gives you a predictable ramp where each step is the same distance from the last, so the scale feels balanced rather than lopsided.
Every swatch is shown with its HEX code and a copy button, ready to drop into CSS custom properties, Tailwind config or a token file.
The whole thing runs locally in your browser — nothing is uploaded, and the result is deterministic, so the same input always gives the same ramp.
FAQ
What is the difference between a shade and a tint?
A shade mixes the colour with black to darken it; a tint mixes it with white to lighten it. This tool produces both ramps at once.
How are the steps spaced?
Each ramp starts at your base colour and mixes linearly toward black or white in equal increments, so steps are evenly distributed.
Can I change the number of steps?
Yes — set any whole number from 2 upward, and both ramps regenerate instantly.