Tailwind Color Palette Generator

Generate a complete Tailwind CSS shade scale from any base color. Live preview, copy the config, or export as CSS variables — nothing leaves your browser.

Palette Source

Base color

Hex value

Palette name

11 shades · 500 keeps hue & saturation of #8b5cf6

Shade Scale

Output

Tailwind Config

primary: {
    50: "#f9f7fd",
    100: "#ece5fa",
    200: "#d8caf7",
    300: "#bca4f4",
    400: "#a07cf4",
    500: "#7c47f5",
    600: "#530df2",
    700: "#3f0ab8",
    800: "#2b077e",
    900: "#1b044d",
    950: "#110330",
}

Paste into tailwind.config.js → theme.extend.colors

Palette & Color Science Tips

Get the color-theory shortcuts we use to build accessible, cohesive palettes — contrast ratios, HSL intuition, and design-system patterns.

No spam. Unsubscribe anytime.

Explore Related Tools

Discover more utility-driven tools designed to enhance your workflow and technical excellence.

CSS Gradient Generator

Build linear and radial gradients with unlimited color stops, adjustable angles, and a live preview. Copy production-ready CSS instantly.

CSS & Design

CSS Box Shadow Generator

Create layered box shadows visually — offset, blur, spread, color, inset — with curated presets and copy-ready CSS output.

CSS & Design

Border Radius Generator

Drag each corner to craft pill, blob, and rounded shapes. Generates clean CSS with per-corner values and a live element preview.

CSS & Design