Color Shade Generator

Generate tints and shades from any base color. Click any swatch to copy the hex code.

Tints (Lighter)

Base Color

Shades (Darker)

CSS Variables

:root {
  --color-45: #edf4fe;
  --color-91: #dbe8fd;
  --color-136: #caddfd;
  --color-182: #b8d2fc;
  --color-227: #a6c6fb;
  --color-273: #94bbfa;
  --color-318: #82aff9;
  --color-364: #70a4f8;
  --color-409: #5f99f8;
  --color-455: #4d8df7;
  --color-500: #3b82f6;
  --color-545: #3676e0;
  --color-591: #306ac9;
  --color-636: #2b5fb3;
  --color-682: #26539d;
  --color-727: #204786;
  --color-773: #1b3b70;
  --color-818: #152f59;
  --color-864: #102343;
  --color-909: #0b182d;
  --color-955: #050c16;
}

Tailwind Config

colors: {
  custom: {
        45: '#edf4fe',
        91: '#dbe8fd',
        136: '#caddfd',
        182: '#b8d2fc',
        227: '#a6c6fb',
        273: '#94bbfa',
        318: '#82aff9',
        364: '#70a4f8',
        409: '#5f99f8',
        455: '#4d8df7',
        500: '#3b82f6',
        545: '#3676e0',
        591: '#306ac9',
        636: '#2b5fb3',
        682: '#26539d',
        727: '#204786',
        773: '#1b3b70',
        818: '#152f59',
        864: '#102343',
        909: '#0b182d',
        955: '#050c16',
  },
}

About Color Shade Generator

Color Shade Generator creates a full range of tints (lighter) and shades (darker) from any base color, numbered 50 through 950 — the same format used by Tailwind CSS and design systems like Material UI. Pick a brand color and get an instant, ready-to-use color scale.

Export the generated scale as CSS custom properties (--color-500, --color-600, etc.) or as a Tailwind CSS theme configuration object. Both formats are immediately usable in your project.

Creating a consistent color scale by hand takes significant time. This tool generates one from any HEX input in seconds.

Features

✓Generates 10-step color scale (50–950) from any base color
✓Export as CSS custom properties or Tailwind config
✓Live preview of all shades
✓HEX and RGB values for each step
✓Compatible with design system naming conventions

Common Use Cases

→Creating a color system for a new design system or brand
→Generating Tailwind CSS color config from a brand hex code
→Building consistent dark/light state colors for UI components
→Extending Tailwind with custom brand colors