Color Shades Generator
Generate lighter tints and darker shades from any base color.
How to use the Color Shades Generator
- Enter a base color in HEX or RGB.
- See five lighter tints and five darker shades.
- Copy any HEX value for your design or CSS.
About the Color Shades Generator
Good interfaces use a range of one color rather than a single flat value. Paste a base color as HEX (#137256 or #137) or RGB (rgb(19,114,86)) and this generator returns eleven values: your base, five tints mixed toward white, and five shades mixed toward black. That is usually all you need for hover and active states, borders, dividers, subtle backgrounds and depth in a UI.
The steps are evenly spaced — each tint pushes every RGB channel one sixth further toward 255 than the last, and each shade brings it the same fraction closer to 0. Every result is shown as a HEX code you can copy straight into your CSS, and the base color is previewed as a swatch so you can confirm you typed what you meant.
Worth knowing: this is a straight blend in RGB, not a perceptual color space, so the steps are mathematically even but will not always look evenly spaced to the eye — very saturated or very dark base colors tend to lose definition at the ends of the scale. Output is HEX only. Check any pairing you plan to put text on with the contrast checker, and convert values with the color converter. It all runs in your browser.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is your color mixed with white, making it lighter. A shade is your color mixed with black, making it darker. This tool gives you five of each.
What input formats work?
HEX in three-digit or six-digit form and RGB such as rgb(19,114,86). Results are always given back as HEX.
How are the steps calculated?
Each step is one sixth of the way toward white or black. Tint 1 is one sixth toward white, tint 5 is five sixths of the way there, and shades work the same in the opposite direction.
Can I use these as a CSS theme scale?
Yes. The eleven values make a ready-made scale for buttons, hover states, surfaces and borders. Copy the HEX codes into custom properties and reference them across your stylesheet.
Why do my darkest shades look almost identical?
Because the blend happens in RGB rather than a perceptual space. As channels approach zero the differences between steps become harder to see, which is most noticeable with dark or highly saturated base colors.