Choose a color

11
95%
77%
Used as brand in the exported code.

Your palette

11 shades
50
100
200
300
400
500
600
700
800
900
950

Select a hex value to copy it. Scroll sideways to see every shade.

Export your palette

app.css
@theme {
  --color-brand-50: #f5f7fe;
  --color-brand-100: #e4eafc;
  --color-brand-200: #c7d2f7;
  --color-brand-300: #a5b5f0;
  --color-brand-400: #7d93e7;
  --color-brand-500: #5266d9;
  --color-brand-600: #4353b4;
  --color-brand-700: #323f8b;
  --color-brand-800: #1f295f;
  --color-brand-900: #0f1537;
  --color-brand-950: #030517;
}
Free browser tool

Free Tailwind CSS Color Palette Generator

Turn any HEX color into a custom 4–20 shade scale. Adjust the lightest and darkest stops, name your palette, and copy ready-to-use Tailwind CSS v4, Tailwind v3, or CSS variables. You can also download the palette as a PNG for Figma, Adobe Express, and design documentation—free, with no sign-up.

  • Generate 4–20 custom shades
  • Export Tailwind v4, v3, and CSS variables
  • Download a shareable PNG
  • Free and no sign-up required

Generate Tailwind CSS shades from any HEX color

Creating a complete color scale from one brand color can take considerable trial and error. This generator turns a single HEX color into a customizable set of light and dark shades that can be used across websites, applications, design systems, and component libraries.

Choose between 4 and 20 shades depending on the level of control your project needs. You can adjust the lightest and darkest ends of the scale while keeping the selected base color at the center of the palette. Every generated shade includes a HEX value that can be copied individually.

How to create a custom Tailwind color palette

  1. Enter a HEX color or choose one using the color picker.
  2. Select how many shades you want to generate, from 4 to 20.
  3. Adjust the lightest shade to control how close the beginning of the scale is to white.
  4. Adjust the darkest shade to control how deep the final colors become.
  5. Enter a name such as brand, primary, ocean, or indigo for the exported variables.
  6. Copy the Tailwind or CSS output, or download the palette as a PNG.

For a traditional Tailwind-style color scale, use 11 shades representing the familiar 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 stops. Smaller palettes work well for simple brand systems, while larger palettes provide more control for complex interfaces and data visualizations.

Export for Tailwind CSS v4, v3, or vanilla CSS

Tailwind CSS v4

Use the Tailwind v4 output when your project defines design tokens with the @theme directive. The generated --color-* variables become available to Tailwind utilities such as background, text, border, ring, fill, and stroke colors.

See the Tailwind CSS theme-variable documentation.

Tailwind CSS v3

Use the Tailwind v3 configuration output for projects that still define custom colors inside tailwind.config.js or tailwind.config.ts. Copy the generated named color object into the appropriate theme extension in the project configuration.

CSS variables

The CSS-variable output can be used without Tailwind. Add the generated variables to a :root block or another relevant selector and reference them with var(--color-name-shade) in stylesheets, CSS modules, components, or design-system files.

How many color shades should you generate?

The right number of shades depends on how the palette will be used:

  • 4–6 shades work well for small brand palettes, marketing pages, and simple projects.
  • 7–11 shades are suitable for most application interfaces and design systems.
  • 11 shades match the familiar Tailwind 50–950 structure.
  • 12–20 shades provide finer control for data visualization, detailed interaction states, and large design systems.

More shades do not automatically create a better palette. Choose enough values to cover backgrounds, borders, text, hover states, active states, and emphasis without introducing unnecessary design tokens.

Download a PNG palette for design tools

Download the generated color palette as a PNG when you need to share it with designers, clients, or other team members. The image can be placed in Figma, Adobe Express, project documentation, presentations, mood boards, or lightweight brand guidelines.

The PNG export provides a visual reference, while the Tailwind and CSS exports provide the exact values developers need during implementation.

Who is this Tailwind CSS color palette generator for?

This tool is designed for frontend developers, UI designers, product teams, freelancers, and anyone building a consistent visual system. It is especially useful when converting an existing logo or brand HEX color into reusable Tailwind utilities and CSS design tokens.

No account is required, so users can generate, copy, and download a palette directly from the browser.

Tailwind Color Palette Generator FAQ

What is a Tailwind color palette generator?

A Tailwind color palette generator converts a base color into a scale of lighter and darker shades. These shades can be assigned familiar values such as 50 through 950 and used for backgrounds, text, borders, hover states, focus states, and other interface elements.

How do I generate Tailwind shades from a HEX color?

Enter or select a HEX color, choose the number of shades, and adjust the lightest and darkest values. The palette updates automatically, and you can copy the generated Tailwind v4, Tailwind v3, or CSS-variable output.

What do Tailwind shade numbers from 50 to 950 mean?

The numbers identify positions in a color scale. A shade such as 50 is normally very light, 500 is commonly used as a central or base value, and 950 is the darkest value. The numbers are design-token labels rather than literal brightness percentages.

Does the generator support Tailwind CSS v4?

Yes. The Tailwind v4 export creates CSS theme variables that can be placed inside Tailwind’s @theme directive. These variables generate corresponding color utilities in the project.

Can I use the generated palette with Tailwind CSS v3?

Yes. Select the v3 configuration output and copy the named color object into the appropriate section of tailwind.config.js or tailwind.config.ts.

Can I use the generated colors without Tailwind?

Yes. Select the CSS variables output to use the generated colors in standard CSS, CSS modules, component styles, or another frontend framework.

How many shades can I generate?

You can generate between 4 and 20 shades. Use 11 shades when you want the familiar Tailwind-style 50–950 color scale.

Can I download the color palette as an image?

Yes. Select Download PNG to save a visual version of the generated palette. The image can be shared with a team or used as a color reference in Figma, Adobe Express, presentations, and design documentation.

Are the generated colors automatically WCAG accessible?

No color scale is automatically accessible in every context. Accessibility depends on the foreground and background colors used together, as well as text size and weight. Users should test important color combinations with a WCAG contrast checker before using them in production.

Try next
Create a gradient from your color palette Extract colors from an image