Tailwind Shade Generator

Generate Tailwind-Style Shades from a Single Color

This tool turns one base color into a full Tailwind-style shade scale with steps:

50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

It’s built for real workflow:

• Pick or paste a base color
• Auto-map the exact color to the closest Tailwind-style step
• Preview the full scale instantly
• Name the palette (auto-generated or custom)
• Export CSS variables in HEX / RGB / HSL / HWB / CMYK
• Copy the result in one click

If you’re building a brand theme, design tokens, or a UI color system, this is one of the fastest ways to get a usable scale without manually tweaking every shade.

---

What This Tool Is Best For

Use it when you need a consistent color scale for:

• App themes (primary, success, warning, info, etc.)
• Brand tokens (one brand color → full UI scale)
• Component libraries (hover/focus/active/disabled states)
• Tailwind projects (custom color families with familiar 50–950 steps)
• CSS variable theming (light/dark themes, brand themes)
• Design systems (shared tokens across web apps, docs, and marketing pages)

---

Quick Start

1. Set your Base Color

Use either:

• the color picker (fast visual selection), or
• the hex input (exact value like #3B82F6)

As soon as you change the color, the tool generates a full Tailwind-style scale.

2. Check where your base color landed

The tool automatically labels your input color as the closest Tailwind-style step based on its lightness.

Example:

• a very bright color might map near 300–400
• a mid-tone brand color often maps near 500–600
• a dark color might map near 700–800

The preview marks the exact input swatch with a Base label.

3. Name your palette

The Palette Name becomes your CSS variable prefix.

• blue → --blue-50, --blue-100, …
• brand-primary → --brand-primary-50, --brand-primary-100, …

The tool can auto-generate a name from the color (converted to kebab-case), and you can switch back to auto-generation if you edited it manually.

4. Choose your output format

Pick the format you want to see/export:

• HEX (great for tokens and CSS)
• RGB (useful for debugging or canvas workflows)
• HSL (easy hue/lightness tuning)
• HWB (whiteness/blackness-based workflows)
• CMYK (rough print-oriented reference)

5. Copy CSS Variables

Click Copy CSS to get a ready-to-paste :root block.

---

Why Tailwind-Style Scales Are So Useful

Tailwind’s numbered steps make color usage more consistent because each shade usually has a role:

• 50–100 → subtle backgrounds / tinted surfaces
• 200–300 → borders / soft UI states
• 400–500 → main accents / badges / icons
• 600–700 → buttons / hover states / stronger UI emphasis
• 800–900 → text on light backgrounds / dark surfaces
• 950 → ultra-dark accents or deep theme surfaces

Even if you’re not using Tailwind directly, this numbering convention helps teams communicate clearly:

• “Use primary-600 for the button”
• “Use success-100 for the alert background”
• “Use slate-900-style contrast for headings”

---

How This Shade Generator Works (Practical Explanation)

This generator creates a Tailwind-style scale from your color by using a lightness-target approach.

Step 1: Read your base color

The tool parses your input color and converts it into a color model it can work with safely.

Step 2: Find the closest shade slot

It checks the base color’s lightness and compares it to target lightness values for the standard Tailwind-style steps (50–950).

That’s how it decides where your exact color belongs (for example, 500 or 700).

Step 3: Preserve your exact input color

Your base color is not modified at its mapped step.

That means the scale is built around your actual chosen color rather than replacing it with an approximation.

Step 4: Generate lighter and darker shades

The tool keeps the same hue and saturation and interpolates lightness upward (toward near-white) and downward (toward near-black) to create the surrounding steps.

This makes the scale feel consistent and predictable, which is ideal for UI tokens.

Important note

Because the algorithm emphasizes a clean, practical scale from your input, the result is Tailwind-style, not a clone of Tailwind’s official palette generation methods.

---

Output Formats (When to Use Each)

HEX

Best for:

• CSS variables
• Tailwind config values
• Design token files
• Figma/dev handoff notes

Example: #3B82F6

RGB

Best for:

• Web graphics APIs / canvas work
• Cases where channel values are easier to reason about
• Debugging color conversions

Example: rgb(59, 130, 246)

HSL

Best for:

• Designers tweaking hue/saturation/lightness manually
• Understanding how a color behaves across the scale
• Creating related palettes systematically

Example: hsl(217, 91%, 60%)

HWB

Best for:

• Whiteness/blackness mental model workflows
• Some modern CSS color experimentation

Example: hwb(217 23% 4%)

CMYK

Best for:

• Rough print-oriented references
• Early handoff estimates

Note: CMYK in browser tools is typically an approximation unless you use print color profiles.

---

Example Export (CSS Variables)

:root {
  --brand-primary-50: #EFF6FF;
  --brand-primary-100: #DBEAFE;
  --brand-primary-200: #BFDBFE;
  --brand-primary-300: #93C5FD;
  --brand-primary-400: #60A5FA;
  --brand-primary-500: #3B82F6;
  --brand-primary-600: #2563EB;
  --brand-primary-700: #1D4ED8;
  --brand-primary-800: #1E40AF;
  --brand-primary-900: #1E3A8A;
  --brand-primary-950: #172554;
}

Use it in:

• :root for a global theme
• .theme-brandA / .theme-brandB classes for theme switching
• token files for component libraries

---

Practical Workflows

1. Build a brand primary scale

• Paste your brand color
• Keep the auto-mapped step (or try a different base color if it lands too bright/dark)
• Name it brand-primary
• Copy CSS variables and paste into your theme tokens

2. Generate semantic UI colors

Repeat the same process for:

• success
• warning
• danger
• info

Result: consistent 50–950 scales for alerts, buttons, badges, and charts.

3. Create light/dark theme roles faster

Use the same color family across states:

• light mode accents → 500–700
• dark mode accents → 300–500
• subtle backgrounds → 50–100

This helps maintain identity while adjusting contrast per theme.

---

Tips for Better Results

Start with a “true brand color” (not too light / not too dark)

Mid-tone colors usually make the most flexible scales because you get usable lighter and darker steps.

If your base is extremely bright or extremely dark, the generated range may bunch up on one side.

Name palettes by role, not just hue

Instead of only blue, consider names like:

• brand-primary
• marketing-accent
• chart-series-a
• success

This makes your tokens easier to use in real products.

Check contrast before shipping

The preview chooses readable black/white text for each swatch, which is helpful for a quick visual pass — but you should still test actual UI combinations (especially text on colored backgrounds).

Use HSL output when tuning

If a scale feels too dull or too intense for your brand system, switch to HSL to inspect how saturation/lightness behave, then adjust your base color and regenerate.

---

Troubleshooting

“My base color mapped to 400 instead of 500”

That’s expected. The tool maps by lightness, not by what you hoped the label would be. If you want it to land darker (e.g., closer to 500/600), pick a slightly darker base color.

“The scale looks too similar between some steps”

Some colors naturally compress visually (especially low-saturation colors). Try a base color with slightly higher saturation or a more central lightness.

“Why doesn’t this match Tailwind’s official blue/emerald/slate exactly?”

Official Tailwind palettes are carefully tuned and not generated from a single universal formula. This tool creates Tailwind-style custom scales centered on your color.

“CMYK values don’t match my printer output”

Browser CMYK conversions are approximate. For production print work, use ICC-profile-based tools in a print workflow.

---

Who This Tool Is Perfect For

• Frontend developers building theme tokens fast
• Designers who want a structured scale from a brand color
• Indie makers shipping UI without handcrafting every shade
• Teams standardizing color roles across products
• Content creators building consistent palette systems for graphics and UI assets

Pick a color → generate a scale → copy CSS → ship.