Uwarp

Help Us Improve

—

(—)

Tailwind color palette generator

Generate a Tailwind 50–950 color scale from a seed hex. Copy CSS variables or config. No signup.

What is a Tailwind color palette generator?

A Tailwind color palette generator builds a 50–950 scale from a seed hex so you can extend theme colors. This page exports CSS variables and a tailwind.config snippet in the browser.

Tailwind palette features

A named 50–950 scale from one hex.

  • 50 to 950 steps

    Light tints through dark shades around the seed hue.

  • Custom token name

    Export as brand, accent, or any CSS-safe name.

  • CSS variables and config

    Copy :root variables plus a theme.extend.colors block.

  • Local-first

    The scale is computed in the tab. No upload.

How to generate a Tailwind palette

Three steps from a seed hex to a Tailwind color key.

  1. Pick a seed

    Paste the brand hex or use the picker.

  2. Name the token

    Use brand, accent, or another lowercase key.

  3. Copy the export

    Paste CSS variables, then the config colors block.

Great for

Tailwind theme extension.

  • Brand scales

    Turn a single hex into a 50–950 key for buttons and badges.

  • CSS variable themes

    Keep hex values in :root and point Tailwind at var().

  • Quick prototypes

    Try a hue without editing every shade by hand.

Why use this generator

A free Tailwind scale in the browser.

  • Free to use

    No signup. The scale updates with the seed.

  • Config-ready

    You get both CSS variables and a colors object.

  • Local-first

    Nothing leaves the browser.

Technical details

How the 50–950 scale is built.
Interpolation
HSL lightness steps from about 97% (50) to 11% (950) on the seed hue.
Not official Tailwind colors
This is a generated scale, not a copy of Tailwind’s default blue/red palettes.
Export
CSS custom properties plus a theme.extend.colors snippet.

Sources & References

Tailwind theme and CSS custom property references.
  • “You can customize the default color palette by editing your tailwind.config.js file.”
    — Tailwind CSS — Customizing Colors

    Tailwind CSS — Customizing colors: The config snippet follows the theme.extend.colors shape documented there. v3.tailwindcss.com/docs/customizing-colors

  • “Custom properties (sometimes referred to as CSS variables) are defined with two dashes.”
    — MDN Web Docs — Using CSS custom properties

    MDN — Using CSS custom properties: The exported :root block is standard custom properties you can reference from Tailwind or CSS. developer.mozilla.org/en-US/docs/Web/CSS/Guides/Using_CSS_custom_properties

Frequently Asked Questions

Quick answers about this tool—open a question to read more.