Free Tailwind Color Generator & Palette Exporter

Generate 50–950 Tailwind CSS color scales from any hex color with WCAG accessibility scores and multi-platform exports.

Tanbir Ahamed·Founder of ToolWise · Software Engineer

Published August 2026

100% Client-Side Palette Engine

Try Presets:

Base Hex Color

Color Token Name

Base Color: #3B82F6

Generated 50–950 Color Scale

Click any card to copy HEX

Live UI Component Preview

Buttons

Badges & Status

Active StatusNew Feature

Brand Notification

Palette colors render harmoniously across light and dark user interfaces.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
      50: '#F2F6FD',
      100: '#E1EAF9',
      200: '#B6D1FC',
      300: '#85B2F9',
      400: '#5090F7',
      500: '#156BF4',
      600: '#0A58D6',
      700: '#0848AF',
      800: '#063888',
      900: '#0C2A5A',
      950: '#071936',
        },
      },
    },
  },
}

How to Use

1Pick a base brand color using the color picker or choose from one of the design presets.
2Inspect the automatically calculated 50 to 950 shades and review WCAG contrast ratios.
3Test real-world rendering across interactive UI components (Buttons, Badges, Alert Cards).
4Copy the generated Tailwind config, CSS Variables, Swift, Kotlin, or Flutter code with 1 click.

Features

✓Computes complete 11-step harmonic shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)
✓Built-in WCAG 2.1 contrast ratio calculations against white and black backgrounds
✓Live interactive UI preview with buttons, badges, and card components
✓Multi-format code export for Tailwind CSS, CSS Variables, SwiftUI, Jetpack Compose, and Flutter
✓100% private in-browser generator with zero server uploads

Comprehensive Guide & Reference

Comprehensive Guide & Reference: Tailwind CSS Color Scales & Mobile Design Systems

Color tokens form the visual foundation of web and mobile applications. Learn how to architect 11-step harmonic palettes across Tailwind CSS, CSS Custom Properties, Swift, and Kotlin.

1. The 11-Step Tailwind Color Hierarchy

Step	Lightness	Recommended UI Application
50	97%	Subtle card backgrounds, table row hover highlights, badge tints.
100	93%	Badge backgrounds, notification alert containers, border accents.
200–300	85%–75%	Decorative borders, subtle dividers, active toggle backdrops.
400	64%	Secondary iconography, placeholder indicators, dark mode hover accents.
500	52%	Primary Base: Solid buttons, brand logos, primary interactive elements.
600–700	44%–36%	Button hover & active pressed states, high-contrast text on light backgrounds.
800–900	28%–20%	High-contrast text headings, dark mode card containers.
950	12%	Deep dark-mode surface backdrops, code block backgrounds.

2. WCAG 2.1 Contrast Standards for Design Systems

Accessibility compliance ensures your digital products are legible to all users, including individuals with low vision:

WCAG AA (Normal Text): Minimum contrast ratio of 4.5:1 against adjacent background colors.
WCAG AA (Large Text ≥ 18pt / 24px): Minimum contrast ratio of 3.0:1.
WCAG AAA (Enhanced Contrast): Minimum contrast ratio of 7.0:1 for normal body text and 4.5:1 for large headings.

Real example

Worked example: a custom Tailwind color scale

Input: Seed: #10B981 · Scale: 50–950
Output: →11 shades from 50 (lightest) to 950 (darkest) · WCAG contrast badge per shade · exports CSS variables plus Swift and Kotlin code

Check the badge before assigning text colors — the mid shades (300–500) usually pass on dark backgrounds only.

Privacy & data handling

This tool runs entirely in your browser. What you enter is processed on your own device using JavaScript and WebAssembly — it is not uploaded to our servers, and there is no account, no signup and no per-use limit. Read our privacy policy.

Frequently Asked Questions

How does this Tailwind Color Generator compute shades?

The generator analyzes the hue and saturation of your input hex color and calculates an optical 11-step lightness curve (from 50 to 950). It automatically fine-tunes saturation for extreme highlights and deep shadows to match Tailwind CSS's design system aesthetic.

How do I add these generated colors to my tailwind.config.js?

Select the "Tailwind Config" export tab, copy the generated JSON object, and paste it into the theme.extend.colors section of your tailwind.config.js file (or @theme directive in Tailwind v4).

What are the WCAG contrast ratios shown on each shade?

Each color card displays the contrast ratio against pure white (#FFFFFF) and pure black (#000000). A ratio of 4.5:1 or higher passes WCAG AA for normal text, while 7.0:1 meets the stringent WCAG AAA requirement.

Can I export these color palettes for iOS (Swift) and Android (Kotlin)?

Yes. Switch to the Swift (SwiftUI) or Kotlin (Jetpack Compose) tabs to instantly copy ready-to-use native mobile color tokens and Color extensions.

How does Tailwind CSS v4 handle custom color palettes?

In Tailwind v4, you can define colors directly in your main CSS file using the @theme block with CSS variables (e.g., --color-brand-500: #3B82F6), which this tool exports automatically.

What is the difference between shade 500 and 600?

In standard Tailwind conventions, shade 500 represents the primary base brand color, while 600 is the default hover/active interaction state for buttons, links, and focused inputs.

Is this color generator free and completely private?

Yes, 100%. All RGB/HSL mathematical calculations run locally in your browser with zero network requests or analytics tracking.

Can I use CSS variables for dynamic dark mode theming?

Yes. The CSS Variables export generates standard custom properties (--primary-50 to --primary-950) that can be overridden inside a .dark selector or data-theme attribute.