Darnly
Free tools

Tailwind color shades: a 50–950 scale from one color

Pick or paste your brand color and get an even 50 to 950 shade scale, ready for Tailwind v4, Tailwind v3 or plain CSS. Click any shade to copy it, or hand the whole scale to your AI coding agent.

    Click any shade to copy it.

    Tailwind v4 · paste in your CSS
    Tailwind v3 · tailwind.config
    CSS variables
    More free tools
    How it works
    1. Pick your brand color with the color picker, or paste its hex code (like #0593C6).
    2. We build a full 50 to 950 scale around it. Your exact color keeps its place, marked “Your color”, and the other shades step evenly lighter and darker.
    3. Click a shade to copy it, copy the Tailwind v4 theme, the v3 config or CSS variables, or copy a prompt that tells your AI coding agent to add the scale for you.
    Questions
    Why do these shades look more even than other generators?
    Most generators mix your color with white and black, which makes light shades look washed out and dark shades look muddy. We step through OKLCH, a color space built around how people actually see lightness, and keep the hue steady. That’s the same approach Tailwind v4 uses for its own colors.
    Which shade is my color?
    By default it goes on the shade whose lightness is closest, so a mid blue usually lands on 500 or 600. You can move it with “Your color is shade”. The card for your color is marked, and its hex code is exactly what you entered.
    Which Tailwind version do I have?
    If your CSS file starts with @import "tailwindcss"; and there’s no config file, you’re on v4: use the @theme block. If your project has a tailwind.config.js or tailwind.config.ts file, you’re on v3: use the config snippet. Not sure? Copy the prompt for your AI agent and it will work it out.
    Should I use hex or OKLCH?
    Both look the same. Hex works everywhere. OKLCH is what Tailwind v4 uses for its built-in colors and can show slightly richer colors on newer screens. If you’re unsure, keep hex.
    Which shade should my buttons use?
    A common starting point is 600 for primary buttons, 700 for hover, and 50 or 100 for light backgrounds. White text on 600 is usually easy to read. The AI agent prompt sets these up for you.
    Is anything uploaded?
    No. Everything runs in your browser.