Colour Shades Generator
Turn one colour into a full palette of tints and shades.
- 100% free
- Exports CSS variables
Last reviewed by the OnlineToolPro team
5
Your palette
- 100
#dae9e3 - 200
#b4d3c7 - 300
#8fbdac - 400
#6aa690 - 500
#449074 - Base
#1f7a58 - 700
#1a6649 - 800
#15513b - 900
#103d2c - 1000
#0a291d - 1100
#05140f
What is the Colour Shades Generator?
Get lighter tints and darker shades of any colour, arranged from lightest to darkest like a design-system scale, with the HEX code of each and ready-to-paste CSS variables.
How it works
How to use the Colour Shades Generator
3 simple steps. No experience needed.
What can you use it for?
- Build hover and background colours from a brand colour.
- Create a colour scale for a design system.
- Find a lighter version of a colour for backgrounds.
FAQ
Frequently asked questions
How are tints and shades made?
Tints mix the colour with white; shades mix it with black, in even steps.
Related tools
Other tools you might find useful next.
More Colour Tools
Convert, check and build colour palettes. 3 free tools.