Color Tool

Tint & Shade Generator

Enter a base hex color and instantly generate a Tailwind-compatible 11-stop scale — ready to copy as CSS variables or a Tailwind config object.

50#eff0fe

100#e0e0fc

200#c1c2f9

300#a1a3f7

400#8285f4

500base#6366f1

600#5457cd

700#4547a9

800#323379

900#1e1f48

950#141430

Export

:root {
  --color-50: #eff0fe;
  --color-100: #e0e0fc;
  --color-200: #c1c2f9;
  --color-300: #a1a3f7;
  --color-400: #8285f4;
  --color-500: #6366f1;
  --color-600: #5457cd;
  --color-700: #4547a9;
  --color-800: #323379;
  --color-900: #1e1f48;
  --color-950: #141430;
}

How the scale is calculated

Each stop is computed by linearly blending the base color with pure white (for tints) or pure black (for shades). Stop 500 is the base color itself. Lighter stops mix more white; darker stops mix more black.

The scale mirrors Tailwind CSS naming conventions, making it a drop-in replacement for custom color tokens in any Tailwind project.