Tailwind Palette Builder Online

How to Build a Tailwind Color Palette Online

1. Pick or Paste Your Base Color: Use the color picker, type a hex code (e.g. #3b82f6), or paste an RGB/HSL/OKLCH value. The base sits at the 500 step — the "true" version of your brand color — and every other shade scales from there.
2. Generate the 50–950 Scale: The tool computes the full 11-stop Tailwind ramp: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Chroma is reduced gently at the extremes so dark shades don't go muddy and light shades don't wash to flat white.
3. Preview Each Shade (Optional): Inspect the swatches side-by-side, compare against text-on-background pairs, and check the resulting hex / RGB / OKLCH values per stop before exporting.
4. Copy as Tailwind Config or CSS Variables: Grab the snippet as a v3 tailwind.config.js theme.extend.colors block, or as the v4 CSS-first @theme { --color-* } block. Paste into your project — no sign-up, no account, no watermark.

Why Generate a Tailwind Palette?

Tailwind ships with curated palettes like blue, slate, and emerald, but the moment you have a brand colour that isn't one of those eleven defaults, you need a full 50–950 ramp to drop into utilities like bg-brand-50, text-brand-900, or ring-brand-500. Hand-tuning eleven shades by eye almost always produces uneven lightness steps and unexpected hue drift, which is why generators exist:

• Brand color into a Tailwind utility set — Convert one hex (#7c3aed) into a complete brand-50 through brand-950 scale so designers can use bg-brand-100 and text-brand-700 instead of arbitrary hex values scattered across markup.
• Dark-mode pairs without guesswork — Tailwind's own guidance is that 900/950 typically become the dark-mode background and 50/100 become the light-mode background; a perceptually even ramp means swapping pairs (bg-brand-50 ↔ bg-brand-900) keeps contrast roughly symmetrical.
• Design system handoff — Export to v4's @theme block (CSS-first, OKLCH) so the design tokens live next to the component CSS rather than in a separate JS file, which Tailwind v4 (released January 22, 2025) made the default workflow.
• Marketing site refresh — Generate a secondary accent palette in seconds (accent-50 through accent-950), wire it into utilities, and ship without touching component code.
• WCAG-aware mockups — A clean ramp makes it easy to pick pairings that hit WCAG AA's 4.5:1 contrast ratio for normal text, e.g. dark text (text-brand-900) on a tinted surface (bg-brand-50).
• Drop-in replacement for legacy gray — Build a neutral-50 through neutral-950 set with a slight brand tint instead of using Tailwind's default slate or zinc.

Need to convert a single value first? Use the Color Converter to translate hex into RGB, HSL, or OKLCH before pasting into the generator.

Tailwind v3 vs v4 Color System

Tailwind CSS v4 shipped on January 22, 2025 and re-defined the entire default palette in OKLCH; v3 still ships HSL/RGB-derived shades. Both systems use the same 50–950 numbering, but the underlying math and the configuration surface are different.

Property	Tailwind v3 (3.x)	Tailwind v4 (4.0+)
Default color format	sRGB hex / rgb()	oklch(L C H)
Color space	sRGB	Oklab / Display-P3 wider gamut
Config location	tailwind.config.js (theme.extend.colors)	CSS @theme { --color-* } block (config file optional via @config)
Variable namespace	None by default	Every theme color exposed as --color-{name}-{stop}
950 shade	Added in v3.3 (March 28, 2023)	Present from v4.0 launch
Gradient quality	HSL interpolation often greys at midpoint	OKLCH interpolation stays vivid through the midpoint
Browser support for output	Universal	OKLCH supported in Chrome 111+, Firefox 113+, Safari 15.4+

For projects still on v3.x, copy the tailwind.config.js snippet; for v4 projects, paste the @theme block straight into your CSS entry file (typically app.css or globals.css).

The 11 Tailwind Shade Stops — What Each One Is For

Stop	Typical role	Notes
50	Page or app background, surface tint	Lightest; near-white with a hint of brand hue
100	Card, panel, hover backgrounds	Subtle separation from 50
200	Borders, dividers, disabled fills	Light enough to be quiet, dark enough to read
300	Decorative accents, placeholder text	Often the lightest usable text on white
400	Muted UI text, icons	Generally fails 4.5:1 on white — body-text use only on tinted surfaces
500	Brand color, primary buttons, focus rings	The "true" base — what users perceive as your color
600	Hover state for primary buttons	Slightly darker than 500 — clear interaction cue
700	Pressed/active state, secondary headings	Strong but not heavy
800	Headings on light surfaces, dark UI fills	Reliable 4.5:1+ contrast on 50/100
900	Body text on light surfaces, dark-mode panels	Tailwind's recommended dark-mode background swap target
950	Ultra-dark UI, deep dark-mode backgrounds	Added in v3.3 (March 28, 2023); a tinted near-black

Rule of thumb from Tailwind's own docs: pair text-{color}-900 or text-{color}-950 on bg-{color}-50/100 for light mode, and flip the pair for dark mode.

Frequently Asked Questions

Should I export as OKLCH (v4) or HSL/hex (v3)?

If your project's PostCSS or Vite setup is on Tailwind v4 (4.0+, released January 22, 2025), prefer the OKLCH @theme block — v4's default palette is OKLCH and the new utilities expect that format. If you're on v3.x — the line where many teams still sit, especially behind shadcn/ui — paste the tailwind.config.js snippet with hex values; v3 doesn't understand @theme. You can mix: OKLCH inside @theme in v4, or oklch() values inside a v3 hex config (browsers parse the colors fine, but v3's purger expects strings).

Why was 950 added, and why doesn't 0 exist?

The 950 stop was added in Tailwind v3.3 (March 28, 2023) after years of feature requests from teams building dark UIs — 900 wasn't dark enough for many dark-mode backgrounds, especially in the grays. For colored palettes the 950 is optimized for high-contrast text and tinted control fills; for grays it acts as a "tinted black." Tailwind never added a 0 because that would collide with pure white (no tint, no chroma), which is what bg-white already provides. The ramp is asymmetric on purpose: more usable stops above the base than below it.

How are the shades actually generated — lightness scale or perceptual?

Modern generators (this one included) convert your base color to OKLCH first, then distribute lightness (L) across the 11 steps using non-linear curves so the perceived contrast between, say, 100→200 matches 700→800. Chroma (C) is dampened at the extremes — pure-saturation chroma at 950 would produce a "radioactive" near-black, and the same chroma at 50 would lose the brand tint entirely. HSL-only algorithms (the older approach) often produce hue drift, where a saturated blue at 500 shifts purple-ish by 900; OKLCH keeps the hue locked.

Will my custom palette hit WCAG accessible contrast?

For most base colors, text-{color}-700 or darker on bg-{color}-50/bg-white clears WCAG AA's 4.5:1 normal-text ratio, and text-{color}-900 clears AAA's 7:1. The exact stop depends on the hue — saturated yellows fail at 500 even on white, while deep blues already pass at 600. After you generate the palette, eyeball the swatches and run any pair through a contrast checker before shipping. Tailwind's default colors were re-tuned in v4 to maximise predictable contrast across hues, but custom palettes still need a final check.

Can I define custom stops like 150 or 850?

Yes, in both v3 and v4. In v3, add keys to your tailwind.config.js theme.extend.colors.{name} object: any string key ('150': '#...') generates bg-{name}-150 etc. In v4, add lines to @theme { --color-{name}-150: oklch(...); }. Keep in mind that adding intermediate stops bloats the generated CSS (Tailwind only emits utilities for the keys you define, but every variant — bg, text, border, ring, etc. — multiplies), so prefer the 11 defaults unless a stop is missing for a specific design need.

How do I drop this into tailwind.config.js (v3) vs @theme (v4)?

For v3, paste the exported block under theme.extend.colors:

module.exports = {
  theme: { extend: { colors: { brand: { 50: '#...', 100: '#...', /* ... */ 950: '#...' } } } }
}

That creates utilities like bg-brand-100, text-brand-700, ring-brand-500. For v4, paste the OKLCH block into your CSS entry file:

@import "tailwindcss";
@theme {
  --color-brand-50: oklch(0.98 0.01 250);
  /* ... */
  --color-brand-950: oklch(0.20 0.05 250);
}

The same utility classes (bg-brand-100 etc.) appear automatically — no JS config required.

Does OKLCH work in older browsers?

OKLCH is supported in Chrome 111+ (March 2023), Firefox 113+ (May 2023), and Safari 15.4+ (March 2022). For projects that must support Internet Explorer or pre-2023 Chromium browsers, stick with hex or HSL exports from v3 — those compile to sRGB values universally understood. If you only need to support evergreen browsers (the realistic baseline for any greenfield Tailwind v4 project), OKLCH is safe.

Is anything uploaded — does this run in my browser?

All palette generation happens in your browser session — the base color you pick and the generated ramp never leave the page. No account, no sign-up, no watermark, and no daily generation cap.