Don't like ads? Go Ad-Free Today 

Tailwind CSS Color Scale Generator

ColorDeveloper

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

OUTPUT

Client Side

ADVERTISEMENT · REMOVE?

Guide

Tailwind CSS Color Scale Generator

Paste a single hex color and instantly get a full Tailwind-style 50 to 950 palette with perceptually even steps. The scale is built in OKLCH color space, so every stop feels like an even lightness jump to the human eye — not just a linear drop in RGB or HSL.

Copy the result straight into your tailwind.config.js, drop it in as CSS custom properties or SCSS variables, or export it as JSON for your design tokens pipeline.

How to Use

Pick a base color with the color picker, or paste a hex value like #464aff.
Give the palette a name (for example primary, brand, or accent) — this becomes the object key in the exported code.
Choose Tailwind v4 (OKLCH) for modern oklch() CSS, or Tailwind v3 (hex) for classic hex output.
Toggle the 950 stop on or off, and nudge the chroma slider up or down to boost or mute saturation.
Select an export format — Tailwind config, CSS custom properties, SCSS variables, or JSON — then copy or download the generated code.
Click any swatch in the preview to copy its hex value to the clipboard.

Features

OKLCH perceptual math – Interpolates lightness and chroma in the OKLCH color space so every stop in the 50 to 950 range looks like an even step to the human eye.
Full 50 to 950 scale – Generates the complete 11-stop Tailwind palette, with an option to drop the extra-dark 950 stop if you only need the classic 10.
Live swatch preview – See every shade at a glance, click any swatch to copy its hex, and re-tune the scale instantly as you type.
WCAG contrast checker – Each stop is scored against white and black backgrounds with AA and AAA pass or fail badges.
Multiple export targets – Output as tailwind.config.js, :root CSS variables, SCSS variables, or plain JSON design tokens.
Chroma boost control – A single slider scales saturation across all stops, so you can push brighter or tone down the palette without changing the hue.
Gamut safe – Chroma is automatically clamped at each lightness level so the generated hex values always render inside sRGB.

ADVERTISEMENT · REMOVE?

 FAQ

What is OKLCH color space?

OKLCH is a perceptual color space derived from the Oklab model. It represents a color as three values — L (perceived lightness), C (chroma, or colorfulness), and H (hue angle). Unlike HSL, OKLCH is designed so that a given change in L looks like the same amount of lightness change regardless of hue. That makes it ideal for generating color scales where every step needs to feel evenly spaced.
Why is OKLCH better than HSL for color scales?

HSL was designed to be easy to compute, not to match human perception. In HSL, colors with the same L can look dramatically different in brightness — a yellow at 50% lightness reads much brighter than a blue at the same lightness. OKLCH fixes that by modeling how the eye actually perceives lightness, so a scale built in OKLCH produces visually balanced shades that HSL cannot match.
What does perceptual uniformity mean?

A color space is perceptually uniform when equal numerical distances correspond to equal perceived differences. In other words, if you move the lightness value by the same amount twice, the eye should see those two steps as the same size. OKLCH is approximately perceptually uniform, which is why it produces smooth, natural gradients and evenly stepped color scales.
What do the numbers 50 through 950 mean in Tailwind palettes?

Tailwind names each shade in a palette by a number from 50 (the lightest tint) to 950 (the darkest shade), with 500 usually representing the base color. Lower numbers are lighter and higher numbers are darker. The 11-stop scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) gives designers a consistent vocabulary across every color in the system.