Tints & Shades Generator
Enter any colour to generate lighter tints and darker shades. Click any swatch to copy its hex value.
Enter any 6-digit hex colour
Tints (Lighter)
#1E9BB9
#35A5C0
#4BAFC7
#62B9CE
#78C3D5
#8FCDDC
#A5D7E3
#BCE1EA
#D2EBF1
#E9F5F8
Base Colour
#0891B2
rgb(8, 145, 178) / hsl(192, 100%, 36%)
Shades (Darker)
#0784A2
#077792
#066981
#055C71
#044F61
#044251
#033541
#022831
#011A20
#010D10
Full Scale
| Swatch | Hex | RGB | HSL |
|---|---|---|---|
| #E9F5F8 | 233, 245, 248 | 192, 52%, 94% | |
| #D2EBF1 | 210, 235, 241 | 192, 53%, 88% | |
| #BCE1EA | 188, 225, 234 | 192, 52%, 83% | |
| #A5D7E3 | 165, 215, 227 | 192, 53%, 77% | |
| #8FCDDC | 143, 205, 220 | 192, 52%, 71% | |
| #78C3D5 | 120, 195, 213 | 192, 53%, 65% | |
| #62B9CE | 98, 185, 206 | 192, 52%, 60% | |
| #4BAFC7 | 75, 175, 199 | 192, 53%, 54% | |
| #35A5C0 | 53, 165, 192 | 192, 100%, 48% | |
| #1E9BB9 | 30, 155, 185 | 192, 100%, 42% | |
| #0891B2BASE | 8, 145, 178 | 192, 100%, 36% | |
| #0784A2 | 7, 132, 162 | 192, 100%, 33% | |
| #077792 | 7, 119, 146 | 192, 100%, 30% | |
| #066981 | 6, 105, 129 | 192, 100%, 26% | |
| #055C71 | 5, 92, 113 | 192, 100%, 23% | |
| #044F61 | 4, 79, 97 | 192, 100%, 20% | |
| #044251 | 4, 66, 81 | 192, 100%, 17% | |
| #033541 | 3, 53, 65 | 192, 100%, 13% | |
| #022831 | 2, 40, 49 | 191, 100%, 10% | |
| #011A20 | 1, 26, 32 | 192, 100%, 6% | |
| #010D10 | 1, 13, 16 | 192, 100%, 3% |
Understanding Tints and Shades
A tint is created by mixing a colour with white, making it lighter. A shade is created by mixing a colour with black, making it darker.
Tints and shades are essential for building cohesive colour systems. They let you create hover states, disabled states, backgrounds and borders that all feel connected to your base brand colour.
This tool generates evenly spaced tints and shades (configurable count) by linearly interpolating between your base colour and white (tints) or black (shades).