Tailwind Color Generator

Build a Tailwind-style color scale from one base color. Preview shades 50 through 950, inspect contrast indicators and UI examples, then export code for Tailwind CSS v4, Tailwind v3, CSS variables, or JSON.

Features

Generate 50-950 shadesTailwind v3 config supportTailwind v4 @theme syntaxComponent previewWCAG contrast checkerExport multiple formats

Tailwind Color Generator

Configuration

Base Color

Palette Name

Color Format

Generated Palette

custom-50

custom-100

custom-200

custom-300

custom-400

custom-500

custom-600

custom-700

custom-800

custom-900

custom-950

Component Preview

Buttons

Cards

Card 50

This is a sample card using the custom-50 color.

Card 100

This is a sample card using the custom-100 color.

Card 200

This is a sample card using the custom-200 color.

Badges

Badge 50Badge 100Badge 200Badge 300Badge 400Badge 500Badge 600Badge 700Badge 800Badge 900Badge 950

Tailwind v4 Configuration (@theme)

/* Add to your app.css or main CSS file */
@import "tailwindcss";

@theme {
  --color-custom-50: #f5f7f9;
  --color-custom-100: #e8ecf2;
  --color-custom-200: #b6d1fc;
  --color-custom-300: #7bacf9;
  --color-custom-400: #2474f5;
  --color-custom-500: #0a54cd;
  --color-custom-600: #0842a1;
  --color-custom-700: #06347f;
  --color-custom-800: #052861;
  --color-custom-900: #0e213f;
  --color-custom-950: #071121;
}

Tailwind v3 Configuration (tailwind.config.js)

// Add to your tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
  "custom": {
    "50": "#f5f7f9",
    "100": "#e8ecf2",
    "200": "#b6d1fc",
    "300": "#7bacf9",
    "400": "#2474f5",
    "500": "#0a54cd",
    "600": "#0842a1",
    "700": "#06347f",
    "800": "#052861",
    "900": "#0e213f",
    "950": "#071121"
  }
}
    }
  }
}

CSS Variables

/* CSS custom properties for use in any project */
:root {
  --color-custom-50: #f5f7f9;
  --color-custom-100: #e8ecf2;
  --color-custom-200: #b6d1fc;
  --color-custom-300: #7bacf9;
  --color-custom-400: #2474f5;
  --color-custom-500: #0a54cd;
  --color-custom-600: #0842a1;
  --color-custom-700: #06347f;
  --color-custom-800: #052861;
  --color-custom-900: #0e213f;
  --color-custom-950: #071121;
}

How to use the Tailwind Color Generator

1Enter a base color and a name for the palette.
2Choose the displayed color notation and review shades 50 through 950.
3Inspect contrast indicators and the component preview.
4Copy or download the output format that matches your project.

Common uses

Create a custom Tailwind brand color scale.
Compare text contrast across light and dark shades.
Migrate a generated palette into Tailwind v3 or v4 configuration.

Tailwind v3 and v4 output

Tailwind v4 output uses theme variables, while Tailwind v3 output uses a configuration object. CSS variables and JSON are also available for non-Tailwind workflows.

Frequently asked questions

Which shade numbers are generated?

The palette includes 50, every hundred from 100 through 900, and 950.

Does the tool guarantee WCAG compliance?

It provides contrast indicators as guidance. Verify final foreground and background pairs in the full interface before publishing.

Can I export for Tailwind CSS v4?

Yes. Copy or download a Tailwind v4 theme block.

Tailwind Color Generator

Features