Simple, fast, and privacy-friendly tools for images, PDFs, developers, colors, QR codes, and more.

Tools

Image Tools
PDF Tools
Developer Tools
Color Tools
QR Code Tools

Tool Not Found | Free Tools

Home/Color Tools/Color Shades Generator

Color Shades Generator

Generate a full 50 to 950 scale of tints and shades from any base color.

Color Shades Generator

Generate an 11-step scale of tints and shades (50 to 950) from any base color.

Base Color

50#ECEFFF

rgb(236, 239, 255) • hsl(231, 100%, 96%)

100#D2DAFE

rgb(210, 218, 254) • hsl(229, 96%, 91%)

200#B0C1FC

rgb(176, 193, 252) • hsl(227, 93%, 84%)

300#8BA8FA

rgb(139, 168, 250) • hsl(224, 92%, 76%)

400#6492F8

rgb(100, 146, 248) • hsl(221, 91%, 68%)

Base

500#3B82F6

rgb(59, 130, 246) • hsl(217, 91%, 60%)

600#3565BB

rgb(53, 101, 187) • hsl(219, 56%, 47%)

700#2D4984

rgb(45, 73, 132) • hsl(221, 49%, 35%)

800#223052

rgb(34, 48, 82) • hsl(223, 41%, 23%)

900#181D2E

rgb(24, 29, 46) • hsl(226, 31%, 14%)

950#11121A

rgb(17, 18, 26) • hsl(233, 21%, 8%)

Export Full Scale

About Color Shades Generator

Create an 11-step perceptual scale of tints (lightened) and shades (darkened) for design systems. Export full scales as Tailwind CSS configurations or CSS custom properties.

Related Color Tools

HEX to RGB Converter RGB to HEX Converter HEX to HSL Converter Color Converter Gradient Generator Contrast Checker