Free Tailwind Color Shades Generator: One Color to 50–950

Turn one color into a full Tailwind scale, or into tints, shades and tones. Copy the code for Tailwind, CSS or SCSS.

  • 100% free
  • 50–950 scale
  • Tints, shades & tones
  • Contrast built in
1
Pick your colorType a HEX code or choose a color.
Auto finds the best step for your color.
Quick colors
2
Your scaleClick a swatch to copy its HEX.

3
Copy the codeChoose a format.

☕ Support ProFigma

Did this tool save you time? Buy me a coffee.

Hi, I'm Mahesh 👋 I build every ProFigma tool myself and keep them free for designers and developers. If one helped you today, a small coffee keeps new tools and features coming.

  • Keeps every tool free
  • Funds new tools & features
  • Supports an indie creator
Buy Me a CoffeeSecure checkout via Gumroad · Any amount
How it works

Generate a Tailwind color scale in three steps

  1. Enter your colorType a HEX code, use the color picker, or press Random.
  2. Choose a scaleGet a Tailwind-style 50 to 950 scale, or tints, shades and tones.
  3. Copy the codeExport for Tailwind v4, Tailwind v3, CSS variables, SCSS or JSON.
Why this one

Color scales that look right

Even, natural scales

Built in OKLCH, so every step looks evenly spaced instead of muddy or washed out.

Your color stays exact

Your input color is kept as-is at its step. The other steps are built around it.

Contrast built in

See which text color works on each swatch and its contrast ratio.

Every export you need

Tailwind v4 and v3, CSS variables, SCSS, JSON and HEX.

Tips

Tips for better results

  • Start from your brand color. Use the exact HEX from your brand guide, then let the tool fill in the rest.
  • Use 500 or 600 for buttons. Check white text on them first. Darker steps are safer for small text.
  • Use 50 and 100 for backgrounds. Very light steps make clean tinted backgrounds and hover states.
  • Keep neutrals separate. Make one scale for your brand color and another for grays.
FAQ

Tailwind color scale questions

How do I generate a Tailwind color scale from one color?

Enter your brand color and the tool builds the full 50, 100, 200 up to 950 scale. Copy it as Tailwind v4 CSS or a Tailwind v3 config and paste it into your project.

What is the difference between tints, shades and tones?

A tint is your color mixed with white, a shade is mixed with black, and a tone is mixed with gray. Tints are lighter, shades are darker and tones are softer.

How are the shades calculated?

The tool works in the OKLCH color space, which matches how people see lightness. It keeps your hue, steps the lightness from very light to very dark, and eases the saturation at both ends so the scale feels even.

Which shade is my color?

By default the tool finds the step that matches your color's lightness, usually 500 or 600, and keeps your exact color there. You can choose a different step with the selector.

Will the colors pass accessibility checks?

Each swatch shows its contrast ratio with white or black text. A ratio of 4.5 or more passes WCAG AA for normal text. Check your final pairs with the contrast checker.

How do I use the scale in Tailwind CSS v4?

Copy the Tailwind v4 export and paste it into your CSS inside @theme. You can then use classes like bg-brand-500 and text-brand-900.

Can I use it for something other than Tailwind?

Yes. Export CSS variables, SCSS variables, a JSON object or a plain list of HEX codes.

Is anything uploaded?

No. Everything runs in your browser.

Read the guideHow to Create a Custom Tailwind Color PaletteHow the 50 to 950 scale works, and how to use it in Tailwind v4 and v3.Read more →

QR Code Generator

Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.

Case Converter

Switch text between 15+ cases in one click.

Image Compressor

Shrink photos up to 90% right in your browser.

Contrast Checker

WCAG 2.2 AA and AAA checks for any colour pair.

UI Grid Maker

Design Figma and CSS grids with a live calculator.

PNG to JPG Converter

Bulk convert images in three steps.