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.”
Love using our calculator?
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
Related Articles
Dive deeper with our expert guides and tutorials related to Tailwind Color Generator
50–950 ramp · nearest Tailwind default · v4 @theme / v3 config / CSS export · in-browser · Last reviewed: 2026-06