Building a tint and shade scale from one colour
A single brand colour rarely covers every part of a design. This guide shows how tints and shades extend it.
What is the Color Shades Generator?
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.
How to use it
- Enter a base hex colour.
- Choose how many steps you want each way.
- Copy the tint and shade hex codes you need.
Worked example
Five tints toward white and five shades toward black, all derived from #3366FF.
How do I make tints and shades?
Blend the base colour toward white for tints and toward black for shades, in even steps.
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.