How is this different from Tailwind's first-party palette?

Tailwind ships ~22 hues with carefully tuned 50→950 ramps. This tool gives you the same shape ramp from any custom hue — useful when your brand color doesn't match indigo/blue/etc.

Will the new color match my existing Tailwind shade weights?

Yes — the tool uses the same OKLCH lightness targets that Tailwind v4 uses for each step (~98% lightness for 50, ~14% for 950). Cross-hue pairings (text-brand-700 on bg-gray-100) stay in balance.

How do I add this to my Tailwind config?

Copy the output JSON, paste into tailwind.config.js under theme.extend.colors.brand (or your chosen key). Tailwind class names become bg-brand-500, text-brand-700, etc.

tailwind · 50-950 · 11 shades · config snippet · live

Generate a Tailwind palette

Build the full 50-950 scale from one base color and copy a ready-to-paste tailwind.config.js snippet.

Tailwind Palette Generator

Base

#3B82F6

input

Name

brand

palette key

Shades

50-950

Status

ready

live

input · color

Base HEX

Base swatch

output · preview

50-950 scale

brand: {
  50: "#f2f6fc",
  100: "#e2eaf9",
  200: "#c5d6f2",
  300: "#8ab4fa",
  400: "#5492f7",
  500: "#1f70f5",
  600: "#0a5ce0",
  700: "#094cb9",
  800: "#063889",
  900: "#122b54",
  950: "#0b1a32",
},

Quick Start

How to build a Tailwind palette

HEX in, 11-shade tailwind config snippet out. Drop into theme.extend.colors.

01
Pick base + name
Use a brand color and the key Tailwind will reference (e.g. brand).
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
base · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
Preview the ramp
50 lightest, 950 darkest. 500 is the workhorse mid value.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
scalehex · rgb · hslP3gamut-mappedlive
stops · options11 · live
```
50…500…950
```
options applied · livelive
03
Copy the config
Paste the snippet under extend.colors in tailwind.config.js.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
copyWCAG 2.2APCAAA · AAAcontrast
✓ · convertedconfig · ready
```
brand: { 50: "#…" }
```
converted · liveWCAG-aware
04
Use the classes
Reference as bg-brand-500, text-brand-900, etc.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
bg-brand-500
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to generate a Tailwind palette

Theming, brand setup, custom design tokens.

New project setup

Add a brand color to your Tailwind config in seconds. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Multiple brands

Generate a separate palette for each brand or section. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Design tokens

Mirror the 50-950 scale in your DS docs. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Dark mode

Use 900-950 as background, 50-100 as text. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Rapid prototypes

Spin up a coherent palette quickly. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Pair with Tailwind Color Finder to verify hits. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Why isn't 500 my exact base color?

We map the curve to canonical Tailwind lightness. Your input seeds hue/saturation.

Can I tweak individual shades?

Yes — copy the config and adjust HEX values by hand.

What about colors.* in Tailwind 4?

Tailwind 4 still uses the same numeric scale — config snippet is forward-compatible.

Why does the saturation drop at extremes?

We desaturate at l<25 and l>80 to avoid neon endpoints — matches Tailwind's house style.

Is anything sent to a server?

No — generation runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!