All Tools
Shade Generator
Generate harmonious tints and shades from a single color to maintain consistency throughout your designs.
Base Color
#
Your color anchors to step 400 based on its lightness — lighter steps mix toward white, darker toward black.
| Step | HEX | RGB | HSL |
|---|---|---|---|
| 50 | 235,242,255 | 219,100,96 | |
| 100 | 204,224,255 | 216,100,90 | |
| 200 | 153,192,255 | 217,100,80 | |
| 300 | 102,161,255 | 217,100,70 | |
| 400 | 58,134,255 | 217,100,61 | |
| 500 | 47,109,208 | 217,63,50 | |
| 600 | 38,87,166 | 217,63,40 | |
| 700 | 28,66,125 | 216,63,30 | |
| 800 | 19,44,83 | 217,63,20 | |
| 900 | 9,22,42 | 216,65,10 | |
| 950 | 5,11,21 | 218,62,5 |
Click any swatch or value to copy it
Ready to upgrade your
brand visual strategy?
Built for designers, creators, and teams who want better visual direction and references.
Join for Free