Color Shade Generator
Generate tints, shades, and tones from any color
All processing happens in your browser. No data is sent to any server.
Quick presets
Shade Scale (11 shades)
50
100
200
300
400
500
600
700
800
900
950
50
HEX
#f2f6fc
RGB
rgb(242, 246, 252)
HSL
hsl(217, 64%, 97%)
100
HEX
#e6edf9
RGB
rgb(230, 237, 249)
HSL
hsl(217, 64%, 94%)
200
HEX
#bbd4fc
RGB
rgb(187, 212, 252)
HSL
hsl(217, 91%, 86%)
300
HEX
#8fb8fa
RGB
rgb(143, 184, 250)
HSL
hsl(217, 91%, 77%)
400
HEX
#5996f7
RGB
rgb(89, 150, 247)
HSL
hsl(217, 91%, 66%)
500
HEX
#0b64f4
RGB
rgb(11, 100, 244)
HSL
hsl(217, 91%, 50%)
600
HEX
#0952c8
RGB
rgb(9, 82, 200)
HSL
hsl(217, 91%, 41%)
700
HEX
#0842a1
RGB
rgb(8, 66, 161)
HSL
hsl(217, 91%, 33%)
800
HEX
#063075
RGB
rgb(6, 48, 117)
HSL
hsl(217, 91%, 24%)
900
HEX
#002157
RGB
rgb(0, 33, 87)
HSL
hsl(217, 100%, 17%)
950
HEX
#001433
RGB
rgb(0, 20, 51)
HSL
hsl(217, 100%, 10%)
Why This Tool
Design systems need consistent color palettes with lighter and darker variations of each brand color. Manually calculating tints (adding white) and shades (adding black) is tedious. This tool generates a full palette from any base color, similar to Tailwind CSS color scales.
How It Works
Enter a base color in HEX, RGB, or HSL format. The tool generates a range of tints (lighter) and shades (darker) with consistent spacing. Each swatch shows HEX, RGB, and HSL values. Copy individual colors or the entire palette.