Skip to content
TabBench

Color Palette Generator

Generate 11-step Tailwind color shade scales (50 to 950) with WCAG contrast badges and color harmonies.

Runs in your browser. Nothing you add is uploaded.

What the Color Palette Generator does

Creating a unified design system requires a comprehensive scale of color tints and shades from subtle backgrounds (50) to deep text accents (950). This generator calculates a complete 11-step Tailwind CSS shade scale from any base color, computes real-time WCAG 2.1 accessibility contrast scores, generates harmonious palettes, and exports ready-to-use config snippets.

How to generate Tailwind color palettes

  1. Pick a base brand color using the color picker, type a HEX code, or click Random Color.
  2. View the 11-step shade palette (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950).
  3. Inspect the WCAG accessibility contrast score badges displayed on each shade card.
  4. Explore harmonious color pairings: Complementary, Analogous, and Triadic.
  5. Copy individual shade HEX codes or export the full tailwind.config.js / CSS Custom Properties snippet.

The Color Palette Generator runs entirely in your browser — nothing you enter is uploaded, stored, or logged.

When to use it

Building New Tailwind CSS Design Systems

Generate matching primary, secondary, and neutral color scales that seamlessly integrate with Tailwind's default naming convention.

Auditing UI Accessibility & WCAG Contrast

Verify that body text and buttons meet strict WCAG AA (4.5:1) and AAA (7:1) contrast requirements before launching.

Harmonious Brand Color Selection

Find mathematically balanced complementary and analogous accent colors to pair with primary brand logos.

Good to know

  • Shade 500 is typically used for primary buttons, 50-100 for subtle card backgrounds, and 700-900 for high-contrast text.
  • Click any shade card to copy its exact HEX code directly to your clipboard.
  • Ensure button text uses the recommended high-contrast text color indicated on the shade swatch.

Frequently asked questions

What is the standard WCAG contrast ratio for text?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text.

How do I add these shades to Tailwind CSS?

Copy the generated Tailwind Config snippet into your tailwind.config.js under theme.extend.colors to access classes like bg-brand-500, text-brand-700, etc.

How does the generator calculate shades 50 through 950?

The algorithm converts your base color into HSL (Hue, Saturation, Lightness), adjusts the lightness curve along a perceptual gradient from 96% down to 6%, and preserves hue harmony.

What does a 4.5:1 contrast ratio signify?

WCAG 2.1 Level AA mandates a minimum 4.5:1 contrast ratio between text and its background to ensure readability for users with moderate visual impairments.

Related tools