Tailwind Color Generator
Turn any color into a full Tailwind 50–950 shade scale — perceptually balanced, named, and ready to paste into your tailwind.config or a @theme block. See its nearest Tailwind default, copy any shade, all in-browser.
brand · 50 to 950
Paste it into your project
@theme {
--color-brand-50: #f0fefa;
--color-brand-100: #e1fff5;
--color-brand-200: #b8ffe7;
--color-brand-300: #85ffd6;
--color-brand-400: #52ffc5;
--color-brand-500: #1fffb4;
--color-brand-600: #00f5a3;
--color-brand-700: #00cc88;
--color-brand-800: #00a36d;
--color-brand-900: #017951;
--color-brand-950: #035339;
}Your scale doing real work
Stop 500 on white = 1.31:1 contrast (use a darker stop for text).
One color isn't enough — you need a scale
A single brand color can't build an interface. The moment you have a button you need a darker shade for its hover state, a lighter one for its disabled state, a faint tint for its focus ring, and a near-white wash for selected rows. That's why design systems — and Tailwind in particular — express every color as a scale of stops from 50 to 950: eleven tones of the same hue, each with a job. This tool takes your one color and generates the whole ramp.
Tailwind's numbering is a lightness map: 50 is a near-white tint, 500 is the saturated mid-tone you usually think of as “the” color, and 950 is a near-black shade. The convention is so widely used that other developers instantly understand bg-brand-100 and text-brand-700 without a legend. Generating a proper scale — rather than just darkening with black, which muddies the hue — keeps the color vivid and consistent across all eleven stops. This ramp varies lightness while holding hue and gently shaping saturation so the mid-tones stay rich.
Knowing the nearest Tailwind default is genuinely useful: if your brand green is essentially emerald, you can lean on Tailwind's battle-tested ramp and only override where you must, or name yours and ship a custom scale that slots in beside the defaults. The tool tells you which built-in family your color is closest to so you can make that call deliberately.
Export in the format your project actually uses — a @theme block for Tailwind v4, a theme.extend.colors object for v3, or plain CSS custom properties for anything else — paste, and you have a complete, named color with shades for every state. Then verify the stops you'll use for text against their backgrounds in the contrast checker, and assemble your full multi-color set in the palette generator.
Built for Tailwind Developers
“Exactly the tool I open every time a client hands me one brand hex. The v4 @theme export pastes straight into my CSS and I have bg-brand-50 through 950 instantly. The nearest-default readout saved an argument — turns out their 'unique' green was basically emerald. Mid-tones stay vivid, not muddy.”
“The base-stop marker and the 500-on-white contrast note are thoughtful touches that other shade generators miss. Naming the scale and getting a clean theme.extend.colors object back is the whole job done. We standardized three product colors with it in an afternoon.”
“I'm not a color expert, so 'enter one color, get a usable 11-stop ramp that looks like Tailwind's own' is perfect. The in-context preview showing 500 as a button and 100 as a chip helped me actually understand which stop does what. Free, no signup, copies clean code.”
“Great for handing devs a real scale instead of a single swatch. The export formats cover v3 and v4 which we both use across projects. I'd love an OKLCH export option, but the linked perceptual scale generator covers that — and the hue stays consistent across all the shades, which is what matters.”
Your rating powers this tool’s public score — new reviews appear right here.
Related color tools
Similar Calculators
More tools in the same category
Color Palette Generator
Press space to generate 5-color schemes, lock the colors you love, adjust hue/saturation/lightness and export HEX, RGB or CSS variables — the Coolors workflow, enhanced.
Image Color Picker
A pixel-accurate eyedropper with a live magnifier — pick exact colors from any photo, point by point. In-browser, never uploaded.
Color Palettes
Browse a curated library of trending color palettes, filter by mood, search by hex, copy any color or open it in the generator.
Color Contrast Checker
Check text/background pairs against WCAG AA/AAA with a live preview at every size, UI badges and a one-click fix to pass.
Multi-Format Color Converter
HEX, RGB, HSL, CMYK, LAB, LCH and OKLCH at once, live — with WCAG contrast, luminance and a tint/shade ramp.
Accessibility Color Checker
Test text/background pairs against WCAG AA/AAA contrast, with a one-click OKLCH fix and color-blind-aware guidance.
Often Used Together
Complementary tools for complete analysis
50–950 ramp · nearest Tailwind default · v4 @theme / v3 config / CSS export · in-browser · Last reviewed: 2026-06