Color Shades & Tints Generator

Generate a full 11-step color scale from any hex color. Export as CSS variables, Tailwind config, SCSS, or JSON.

:root {
  --color-brand-50: #f7f5ff;
  --color-brand-100: #ede8fe;
  --color-brand-200: #dad2fc;
  --color-brand-300: #beb3fa;
  --color-brand-400: #998ff6;
  --color-brand-500: #6366f1;
  --color-brand-600: #4e52bc;
  --color-brand-700: #3c408d;
  --color-brand-800: #2d3269;
  --color-brand-900: #21264a;
  --color-brand-950: #191f38;
}

Frequently Asked Questions

What is a color shade vs a tint?

A shade is a color mixed with black (darker), while a tint is a color mixed with white (lighter). This tool generates both, creating a full scale from near-white to near-black while preserving the hue.

How do I use the exported CSS variables?

Copy the CSS tab output and paste it inside your global CSS file or :root block. Then reference them in your stylesheets with var(--brand-500), var(--brand-100), etc.

Is the scale compatible with Tailwind CSS?

Yes. Switch to the Tailwind tab and copy the colors object. Paste it into your tailwind.config.js under theme.extend.colors to use classes like bg-brand-500 or text-brand-200.