Shades & tints generator
Build shades, tints, tones and CSS variables from one color. Free, no sign-up, works on phones.
CSS variables
How to use the shades & tints generator
What is the difference between shades, tints and tones?
Shades add black, tints add white and tones add gray. Together they give you hover states, backgrounds and borders that match your base color.
How many steps should I use?
Ten steps matches most design-system scales such as 50–900.
More: Color converter · Contrast checker · Palette generator · Gradient generator · Image color picker · Color blindness simulator · Random color
Need a full color system?
We design accessible brand palettes, UI tokens and style guides at a fixed price.