Color Shades Generator
Build lighter tints and darker shades from one base colour.
Quick answer: enter your details below and click Generate shades — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Image & Design
Enter your details below.
How to use
- Enter a base hex colour.
- Choose how many steps you want each way.
- Copy the tint and shade hex codes you need.
About this tool
Enter a base colour and a step count, and this tool blends it toward white for tints and toward black for shades. The result is a simple scale you can use for buttons, backgrounds and hover states.
Frequently asked questions
What is the difference between a tint and a shade?
A tint mixes a colour with white, while a shade mixes it with black.
How many steps should I use?
Five each way gives a flexible scale without too many near-identical colours.