What stops does Tailwind use?

Tailwind v3 uses: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The generator produces all 11 stops.

How do I add the generated color to my project?

Copy the tailwind.config.js snippet and paste it inside the `theme.extend.colors` object. Then use classes like `bg-brand-500` or `text-brand-200` in your HTML.

Will this break my existing Tailwind colors?

No. The config uses `theme.extend.colors` which adds your new color without replacing any built-in Tailwind colors.

How is the scale generated?

The tool takes your base color's hue and saturation, then maps specific perceptual lightness values (97 for 50 down to 11 for 950) that mirror how Tailwind's own palette is constructed.

Can I use this with Tailwind v4?

Tailwind v4 uses CSS-first configuration. Use the CSS variables output and reference them in your @theme block instead of the JS config.

Tailwind Color Generator — Custom Color Scale (50–950) | Toolivon

Tailwind Color Generator

Generate a full 11-stop Tailwind CSS color scale from any brand color. Outputs tailwind.config.js and CSS variables.

Base Color

Color Name

Used as the Tailwind key: text-brand-500

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f1f5fe',
          100: '#e3ebfc',
          200: '#bed0f9',
          300: '#86a9f4',
          400: '#447aee',
          500: '#1555e0',
          600: '#1147bb',
          700: '#0e3995',
          800: '#0a2b70',
          900: '#071c4b',
          950: '#051433',
        },
      },
    },
  },
};

CSS Variables

:root {
  --color-brand-50: #f1f5fe;
  --color-brand-100: #e3ebfc;
  --color-brand-200: #bed0f9;
  --color-brand-300: #86a9f4;
  --color-brand-400: #447aee;
  --color-brand-500: #1555e0;
  --color-brand-600: #1147bb;
  --color-brand-700: #0e3995;
  --color-brand-800: #0a2b70;
  --color-brand-900: #071c4b;
  --color-brand-950: #051433;
}

brand scale

brand-50#F1F5FE

brand-100#E3EBFC

brand-200#BED0F9

brand-300#86A9F4

brand-400#447AEE

brand-500#1555E0

brand-600#1147BB

brand-700#0E3995

brand-800#0A2B70

brand-900#071C4B

brand-950#051433

Related Color Tools

View all →

Color Picker

Popular

Pick any color and instantly get its HEX, RGB, HSL, and CMYK values

Palette Generator

Popular

Generate beautiful multi-color palettes from a single seed color

Gradient Generator

Popular

Create CSS linear, radial, and conic gradients with live preview and code output

Image Color Extractor

Popular

Upload an image and extract its dominant colors as a palette

How to Use the Tailwind Color Generator

1
Pick your base color
Use the color picker or type a HEX code. This becomes the 500 stop of your scale.
2
Name your color
Enter a name like 'brand', 'primary', or 'coral'. It becomes the Tailwind key, e.g. text-brand-500.
3
Review the scale
See all 11 stops (50–950) with their HEX values shown as a visual strip.
4
Copy the Tailwind config
Click 'Copy Config' to copy the tailwind.config.js extend block. Paste it directly into your config file.
5
Or copy CSS variables
Copy the :root CSS variables block if you prefer using CSS custom properties instead.

Frequently Asked Questions

Loading color tools…

// tailwind.config.js module.exports = { theme: { extend: { colors: { brand: { 50: '#f1f5fe', 100: '#e3ebfc', 200: '#bed0f9', 300: '#86a9f4', 400: '#447aee', 500: '#1555e0', 600: '#1147bb', 700: '#0e3995', 800: '#0a2b70', 900: '#071c4b', 950: '#051433', }, }, }, }, };

:root { --color-brand-50: #f1f5fe; --color-brand-100: #e3ebfc; --color-brand-200: #bed0f9; --color-brand-300: #86a9f4; --color-brand-400: #447aee; --color-brand-500: #1555e0; --color-brand-600: #1147bb; --color-brand-700: #0e3995; --color-brand-800: #0a2b70; --color-brand-900: #071c4b; --color-brand-950: #051433; }

How to Use the Tailwind Color Generator

Pick your base color

Use the color picker or type a HEX code. This becomes the 500 stop of your scale.

Name your color

Enter a name like 'brand', 'primary', or 'coral'. It becomes the Tailwind key, e.g. text-brand-500.

Review the scale

See all 11 stops (50–950) with their HEX values shown as a visual strip.

Copy the Tailwind config

Click 'Copy Config' to copy the tailwind.config.js extend block. Paste it directly into your config file.

Or copy CSS variables

Copy the :root CSS variables block if you prefer using CSS custom properties instead.

Frequently Asked Questions