Color Tints & Shades

Generate 10 tints and 10 shades from any color. Click a swatch to copy its hex value.

Tints → Base → Shades

100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
base
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Export As

:root {
  --color-100: #ffffff;
  --color-200: #eff0fe;
  --color-300: #e0e0fc;
  --color-400: #d0d1fb;
  --color-500: #c1c2f9;
  --color-600: #b1b3f8;
  --color-700: #a1a3f7;
  --color-800: #9294f5;
  --color-900: #8285f4;
  --color-1000: #7375f2;
  --color-500: #6366f1; /* base */
  --color-600: #595cd9;
  --color-700: #4f52c1;
  --color-800: #4547a9;
  --color-900: #3b3d91;
  --color-1000: #323379;
  --color-1100: #282960;
  --color-1200: #1e1f48;
  --color-1300: #141430;
  --color-1400: #0a0a18;
  --color-1500: #000000;
}