Skip to main content
WebColorTools

Tailwind Scale Generator

Generate a full Tailwind 50–950 color scale from one HEX. OKLCH-based shades — copy tailwind.config.js instantly. Free, in your browser.

Instant 100% Private Free Forever
Tailwind CSS Color Scale Design Tokens OKLCH Shades

or press Space

Your color anchors to the closest Tailwind step; other shades are generated in OKLCH with fixed lightness targets.

Optional scales

Click a row to copy HEX

Preview

Export Tailwind scale

Copy a tailwind.config.js colors block or export via the palette modal.

Name

How to use the Tailwind Scale Generator

Four steps from one brand color to an eleven-step Tailwind palette.

  1. 1

    Pick your base color

    Use the swatch picker or type a HEX code. This is the color you want to build a Tailwind-style scale from — often a brand primary.

  2. 2

    Review the 11-step scale

    Swatches update instantly from 50 (lightest) to 950 (darkest). The anchored base step is marked with a badge — your input color unchanged.

  3. 3

    Copy individual shades

    Click any swatch to copy its HEX value to the clipboard for quick use in Figma, CSS, or design tokens.

  4. 4

    Export tailwind.config.js

    Set your color name (default brand), then copy the ready-made colors block or open Export for CSS variables, SCSS, and JSON formats.

What is a Tailwind color generator?

A Tailwind color generator turns one brand HEX into the full 50–950 shade ladder Tailwind CSS expects — light tints for backgrounds, mid tones for buttons, deep shades for text and dark mode. Instead of manually lightening and darkening in RGB (which shifts hue and produces muddy grays), this tool builds each step in OKLCH: perceptual lightness targets matched to Tailwind’s scale, constant hue, and chroma tapered at the extremes so 50 and 950 stay usable.

WebColorTools finds the step closest to your input lightness and anchors your exact color there — marked as base in the UI — then fills the other ten steps algorithmically. Click any swatch to copy HEX, or use Copy tailwind.config.js for a paste-ready theme.extend.colors block. Rename brand to primary, accent, or whatever matches your design system. The export modal also supports CSS variables, SCSS, JSON, and plain lists — the same pipeline as our Palette Generator.

Who needs Tailwind shades from one color? Developers extending Tailwind v3/v4 themes without guessing stop values; product designers tokenizing a rebrand; agencies delivering config-ready palettes to engineering. Search terms like tailwind color generator, tailwind shades from hex, generate tailwind palette, and 50 950 color scale describe this workflow. Pair output with our Contrast Checker before using 400/500 text on 50 backgrounds, or the Color Converter for OKLCH and RGB details on any step.

Everything runs locally in your browser — no upload, no account. Whether you are shipping a SaaS dashboard or documenting design tokens, a Tailwind shade generator gives you eleven harmonious stops from a single anchor color in seconds.

Frequently asked questions

How do I generate a Tailwind color palette from one color?
Pick your brand or primary color with the swatch picker or HEX field. WebColorTools converts it to OKLCH, finds the closest Tailwind step (50–950), anchors your exact input on that step, then generates the other ten shades with fixed OKLCH lightness targets and tapered chroma so lights and darks stay clean — not muddy.
What are the 50–950 steps in Tailwind CSS?
Tailwind color scales use eleven stops: 50 (lightest tint) through 950 (darkest shade), with 500 as the mid “base” in most default palettes. Lower numbers are backgrounds and subtle borders; 500–600 often drive buttons; 700–950 work for text and dark UI. This tool outputs all eleven as copy-ready HEX values.
Why generate scales in OKLCH instead of RGB?
Simple RGB lightening and darkening shifts hue and saturation unpredictably — blues can turn gray or purple. OKLCH separates lightness, chroma, and hue, so each step hits a perceptual lightness target while keeping hue locked. That matches how modern Tailwind v4 and CSS oklch() workflows think about color.
How do I use the tailwind.config.js export?
Click Copy tailwind.config.js, then paste the colors block into your Tailwind config under theme.extend. Rename the default brand key to match your design token (e.g. primary). Use classes like bg-primary-500 after extending the theme.
Will my input color appear exactly on the scale?
Yes. The step whose target lightness is closest to your color becomes the base step and keeps your exact HEX — you always see your brand color land on the scale. Other steps interpolate around it using the Tailwind lightness curve.

Related tools

More free tools — all run in your browser.

Palette Generator

Generate beautiful color palettes instantly. Lock colors, explore schemes, export to CSS.

Color Wheel

Explore color harmonies on an interactive wheel. Complementary, triadic, analogous, and more — export to CSS.

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.

Gradient Generator

Create beautiful CSS gradients visually. Linear, radial, conic — copy the code instantly. Free, in your browser.