# Tailwind Palette Generator - 50–950 Shades from One Color

> Turn a brand color into a Tailwind-style 50–950 scale on the default palette’s OKLCH curve, with contrast badges and v3, v4, CSS, SCSS and JSON export.

- URL: https://qilingtools.com/en/tailwind-palette
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Design](https://qilingtools.com/en/tags/design), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

Your brand usually has one color, but your components need bg-brand-50 through bg-brand-950. This tool builds the full 11-step scale from a single base color. It works in the perceptually uniform OKLCH space and follows the lightness and chroma distribution of Tailwind v4’s default palette (taken from tailwindcss/theme.css). By default the curve is interpolated between the two built-in palettes closest in hue, so yellows stay bright and violets go deep just like Tailwind’s own colors, and low-chroma grays blend toward the slate and zinc neutral curves. The base color can sit at the step with the closest lightness, or be locked to 500, 600 or any step so that shade is exactly your color. You can add a hue shift toward the ends or follow Tailwind’s own hue drift, and colors outside sRGB keep their hue while chroma is reduced. Every shade shows its WCAG contrast against white and black with AA / AAA badges, and the three nearest built-in Tailwind palettes are shown for comparison. Generate several named colors at once and export a Tailwind v3 tailwind.config.js, a v4 @theme block with oklch() values, CSS variables, SCSS variables and map, or JSON.

## How to use

1. Enter a name and base color (HEX, rgb(), hsl() or oklch()); add more colors if you need them
2. Choose which step holds the base color, the lightness curve and any hue shift, and check each shade’s contrast
3. Pick an export format — Tailwind v4 / v3, CSS variables, SCSS or JSON — and copy or download it

## Features

- 50–950 scale on the OKLCH lightness curve of Tailwind’s default palette
- Hue-matched curves; grays use the neutral curve automatically
- Lock the base color at any step so it stays exact
- Hue shift and optional Tailwind-style hue drift
- WCAG contrast on white and black with AA / AAA badges per shade
- Comparison with the three nearest built-in Tailwind palettes
- Multiple named colors at once
- Export v4 @theme, v3 config, CSS variables, SCSS and JSON

## FAQ

### How close is the result to Tailwind’s own colors?

The curves come straight from Tailwind v4’s default palette data. Feeding Tailwind’s own blue-500 or red-500 back in and locking it at 500 reproduces the original palette with a mean OKLab ΔE of roughly 0.003–0.015, which is practically indistinguishable. Real brand colors differ in chroma and lightness; the generated scale keeps your hue and chroma character while matching Tailwind’s light-to-dark distribution.

### Should my base color be 500 or 600?

On “Auto” the base goes to the step with the closest lightness, which gives the most natural scale. If your design system says primary buttons use brand-600, lock the base at 600 — that step will be exactly your color and the others adjust around it. Very light colors locked at a dark step leave little room above them, so the lightest shades end up close together.

### What’s the difference between the Tailwind v3 and v4 exports?

In v3 you define colors in theme.extend.colors inside tailwind.config.js, and the export uses hex values. In v4 colors are CSS variables such as --color-brand-500 declared in an @theme block, and the official palette uses oklch(), so the v4 export does too. Either way you can then use classes like bg-brand-500 and text-brand-700.

### What do the AA, AA18 and AAA badges mean?

They’re WCAG 2.x text contrast levels: AA means a ratio of at least 4.5 and is fine for body text; AA18 means at least 3, which is only enough for large text (18pt / about 24px, or 14pt bold) and UI elements such as icons; AAA means at least 7. Each swatch shows its contrast with white and with black — a shade with AA on white works as body text on a white background.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: UTF-8 safe, optional URL-safe variant, convert text to Base64 and back in real time. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder with encodeURIComponent and encodeURI modes. Escapes Chinese, spaces and special characters. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free online JWT decoder: decode the header and payload of a JSON Web Token, show expiry and issued-at times, all locally without uploading the token.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free online hash calculator: SHA-1, SHA-256, SHA-384 and SHA-512 of text or any file through the browser crypto API. Files never leave your device.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create RFC 4122 UUID v4 in bulk with a cryptographic RNG. Options for uppercase, no hyphens and braces, with one-click copy.
- [Base Converter](https://qilingtools.com/en/base-convert): Free online number base converter: convert between binary, octal, decimal, hexadecimal and any base 2–36. Uses BigInt for huge integers, computed locally.