Color Shades Generator

Generate shades and tints of a color

Color Tools

Instant results

Base Color

Steps

Color Scale

#e7effe

#b6d0fc

#85b1f9

#5492f7

#2473f5

#0a5adb

#0846ab

#06327a

#031e49

#010a18

Tints (Lighter)

Shades (Darker)

CSS Variables

--color-100: #e7effe;
--color-200: #b6d0fc;
--color-300: #85b1f9;
--color-400: #5492f7;
--color-500: #2473f5;
--color-600: #0a5adb;
--color-700: #0846ab;
--color-800: #06327a;
--color-900: #031e49;
--color-1000: #010a18;

About Color Shades Generator

Generate a complete color palette from a single base color. Create consistent tints (lighter) and shades (darker) for your design system. Click any color to copy.