Tailwind Color Generator

Turn one brand color into a full 50-950 Tailwind shade scale in OKLCH, with per-shade WCAG contrast, right in your browser.

The Tailwind Color Generator runs entirely in your browser. The brand color you enter and the generated shades are computed on your device and are never uploaded to ArrayKit.

Open the CSS Color Converter

About Tailwind Color Generator

The Tailwind Color Generator turns a single brand color into a complete 50, 100, 200 … 900, 950 shade scale you can drop straight into tailwind.config. Instead of guessing hex values, it interpolates lightness in OKLCH — a perceptually uniform space — so every step feels evenly spaced, and it snaps your input to its nearest step so the palette actually contains your exact brand color. Each swatch shows its hex plus the WCAG contrast ratio against black and against white, so you can tell at a glance which shades are safe for text. Copy the whole scale as a theme.colors block or as CSS custom properties. Paste any CSS color — hex, rgb(), hsl(), or a named color like rebeccapurple. Everything is computed on your device; the colors you enter never leave the browser.

Features

How to use the Tailwind Color Generator

  1. Enter or pick your brand color (hex, rgb(), hsl(), or a name)
  2. Set a color name — it becomes the key, e.g. brand or accent
  3. Read the per-shade WCAG contrast badges to spot text-safe steps
  4. Toggle between tailwind.config and CSS variables output
  5. Copy the block, or click a single swatch to grab its hex

Example

Input

#7c3aed  (name: brand)

Output

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

One violet hex expands into an OKLCH-spaced 50-950 scale keyed as brand.

Common errors & troubleshooting

Frequently asked questions

How does the Tailwind Color Generator build the 50-950 scale?
It converts your color to OKLCH, keeps the hue, ramps lightness across the eleven Tailwind steps, and tapers chroma toward the extremes. OKLCH is perceptually uniform, so each step looks evenly spaced rather than clustering in the mids the way plain HSL ramps do.
Why does my brand color land on 400 or 600 instead of 500?
The generator snaps your input to the step whose target lightness is closest to it and preserves your exact color there. A lighter brand color anchors nearer 300-400 and a darker one nearer 600-700, so the scale always contains the color you typed.
What do the contrast numbers on each swatch mean?
They are WCAG 2.x contrast ratios of that shade against pure black and pure white. A green badge is at least 4.5:1 (AA for normal text) and amber is at least 3:1 (AA for large text or UI). Use them to choose text and background pairings.
Can I paste rgb(), hsl(), or a named color instead of hex?
Yes. Any CSS color string works — #7c3aed, rgb(124 58 237), hsl(262 83% 58%), or a name like rebeccapurple. The tool parses it, converts to OKLCH, and builds the scale the same way.
How do I use the output in my project?
Copy the tailwind.config block into theme.extend.colors and reference classes like bg-brand-500 or text-brand-800. Or copy the CSS variables version and use var(--brand-500) anywhere in plain CSS. Rename the key by changing the color name field.
Are the colors I enter sent anywhere?
No. The whole scale — parsing, the OKLCH math, contrast ratios, and both output formats — is computed in your browser. The brand color you type or pick never leaves your device and is not uploaded to ArrayKit.

Related tools

All ArrayKit tools