BluebirdBluebird
Home/Tailwind Palette Generator

Tailwind Palette Generator

Generate a full 50–950 Tailwind color scale from any base color. Copy the config snippet straight into your project.

  • Runs in your browser
  • No upload on server
  • Free, forever
  1. Pick base color
  2. Name your scale
  3. Copy the tokens

Tailwind config

// tailwind.config.js
module.exports = {
  theme: { extend: { colors: { brand: {
    50: "#c3f5ff",
    100: "#afe7ff",
    200: "#92cfff",
    300: "#6fb0ff",
    400: "#468aff",
    500: "#1b63f2",
    600: "#0549c9",
    700: "#0032a4",
    800: "#001b81",
    900: "#000160",
    950: "#010043",
  } } } }
};
How this works
  • Your color is converted to OKLCH, then a perceptual lightness scale is built so every step looks evenly spaced.
  • The base color sits closest to the 500 step, with tints (50–400) and shades (600–950) generated around it.
  • Click any swatch to copy its hex, or copy the full Tailwind config snippet at the bottom.

Rate Tailwind Palette Generator

One tap. Anonymous. Helps others find the good tools.

No account, no email, no tracking — just a 1–5 number.

Be the first to rate