Tint and Shade Generator
Color Scale
#ebf3fe90%
#d8e6fd80%
#c4dafc70%
#b1cdfb60%
#9dc1fb50%
#89b4fa40%
#76a8f930%
#629bf820%
#4f8ff710%
#3b82f6base
#3575dd10%
#2f68c520%
#295bac30%
#234e9440%
#1e417b50%
#18346260%
#12274a70%
#0c1a3180%
#060d1990%
How to use
1.
Enter a base color or use the color picker
2.
Browse the 9 tints (mixed with white) and 9 shades (mixed with black)
3.
Click any swatch to copy its hex value
Common uses
▸
Building a complete color scale for a design system or component library
▸
Finding a hover, active, or disabled state color for a UI element
▸
Exploring lighter and darker variants of a brand color