CSS Generators·free · no signup

Tailwind Config Generator

Generate a tailwind.config color scale (50–950) from any base color — drop it straight into theme.extend.colors.

Base color
#
Color key
-500
tailwind.config.js
tailwind.config.js
colors: {
  brand: {
    50: '#F3F0FF',
    100: '#E2DBFF',
    200: '#C2B3FF',
    300: '#9980FF',
    400: '#6C47FF',
    500: '#3F0FFF',
    600: '#2E00E6',
    700: '#2600BD',
    800: '#1D008F',
    900: '#140066',
    950: '#0C003D',
  },
}

How to use the Tailwind Config Generator

Tailwind expects each color as an object of numbered shades (50 lightest to 950 darkest). The generator anchors your color in that scale and computes the lighter and darker steps around it, then formats the whole thing as the JavaScript object Tailwind’s theme.extend.colors expects.

  1. 1
    Enter your color

    Pick or paste the base color you want a Tailwind scale for.

  2. 2
    Copy the config snippet

    Grab the generated { 50: ..., 100: ..., ..., 950: ... } object.

  3. 3
    Add it to Tailwind

    Paste it under theme.extend.colors in tailwind.config.js and use classes like bg-brand-500.

Frequently asked

What shade numbers does Tailwind use?
Tailwind v3+ uses 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 — from lightest to darkest, with 500 as the typical base.
Where do I paste the generated colors?
Inside theme.extend.colors in tailwind.config.js, for example colors: { brand: { 50: "...", 500: "...", 950: "..." } }.
How do I use the scale in markup?
Reference it with utility classes named after your key and shade, such as bg-brand-500, text-brand-700 or border-brand-200.
Which shade should be my primary color?
500 is the conventional base for a primary color, with 600/700 for hover and active states and 50–100 for tinted backgrounds.

More css generators

CSS Variables Generator
Generate a complete CSS custom-property color system from one base color.