Generate a Tailwind Color Scale, 50 to 950

A Tailwind color scale turns one brand color into eleven balanced shades, from a pale 50 to a near-black 950, so you have the right tone for every job. In this guide I will show you what that 50 to 950 ladder is, how to generate one in OKLCH, how to lock your exact brand color to a shade, and how to drop the result into your tailwind.config. By the end you will have a production-ready palette.

This is for designers and front-end developers who use Tailwind, or who simply want the same predictable scale structure Tailwind made popular. No deep color science is required. I will keep the math light and lean on real swatches and a finished shade table you can copy. Let us build a scale that looks even and passes contrast.

What you'll learn

• What the 50 to 950 scale is and what each step does
• Why OKLCH makes the steps look even
• How to generate a full scale from one brand color
• How to lock your brand hex to a specific shade
• How to export the scale to tailwind.config

What the 50 to 950 scale is

Tailwind popularized a naming convention where each color has eleven shades labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The 50 step is almost white, the 950 step is almost black, and 500 sits in the middle as the core color.

The point of the scale is to give every shade a job. You do not pick colors at random anymore. You reach for a known step because the whole team knows what it is for.

Why OKLCH makes the steps even

A good scale steps evenly, so no two shades crowd together and no gap feels too big. The challenge is that older color models do not make even steps look even. The math and your eye disagree.

OKLCH solves this. It is a perceptual color model where the lightness value matches how bright a color looks to you. Step the lightness evenly and the shades feel evenly spaced. This is exactly why Tailwind v4 ships its default palette in OKLCH.

So the recipe for a clean scale is simple. Hold the hue steady, keep chroma sensible, and walk lightness from high at 50 to low at 950 in even steps. Our what is OKLCH guide explains the model, and the Tailwind colors docs show the v4 defaults.

Generating a Tailwind color scale from one brand color

Here is the process to turn a single hex into a full 50 to 950 scale. You can do it by hand, but a generator does the perceptual math for you.

1. Start with your brand color. We will use indigo #5b5bd6, which is about oklch(54% 0.19 277).
2. Decide where it sits. A vivid mid color usually lands at the 500 step, sometimes 600.
3. Set the light end. Make 50 a pale tint near 97 percent lightness, keeping the same hue.
4. Set the dark end. Make 950 a deep shade near 20 percent lightness, same hue.
5. Step lightness evenly across the eleven stops between those ends.
6. Ease chroma down at the lightest and darkest stops, since extreme shades cannot hold high chroma in sRGB.
7. Check the scale against the contrast grid so your text pairings pass.

Locking your brand color to a shade

Here is a detail teams miss. When a generator builds a scale, it might produce a 500 that is slightly off from your exact brand hex. That is a problem, because your logo and assets use the precise color.

The fix is to lock your brand color to a specific shade. You pin #5b5bd6 to the 500 step, and the generator builds the rest of the scale around that fixed anchor. Your exact brand color stays untouched while the other ten shades adapt to it.

In the Zepixo Colors workspace you lock a shade with one click, and the scale rebuilds around it instantly. This keeps brand fidelity while still giving you the full ladder. See the roles docs for how locking works across every role.

Want this done for you? Open the Zepixo Colors workspace, paste your brand hex, lock it to a shade, and get a full OKLCH scale you can export.

Exporting to tailwind.config

Once your scale looks right and passes contrast, you put it where Tailwind can use it. In Tailwind you define colors under the theme, and each shade becomes a utility class like bg-brand-500 or text-brand-800.

A finished scale slots into your config as a nested object keyed by shade. Here is the shape, using our indigo as the brand color. You can write the values as hex or as OKLCH, since Tailwind v4 supports both.

Drop that object under colors in your Tailwind theme keyed as brand, and every shade becomes a class. Zepixo exports this config for you, along with CSS variables, JSON, and SCSS, so you copy and paste rather than hand-type. See the export reference and our color design tokens guide for token tips.

Generating your other roles too

A real product needs more than one scale. You want a secondary color, plus status colors for success, warning, and error. Each one should be its own 50 to 950 scale built the same way.

The trick is to build them all in the same model so they feel like a family. When every role steps evenly in OKLCH, your success green and your brand indigo share the same rhythm of lightness. That consistency is what makes a palette feel designed rather than assembled. Our accessible color system guide walks through the full set of roles.

Using the scale in light and dark mode

A well-built scale already contains everything you need for both themes. In light mode you lean on the low numbers for surfaces and the high numbers for text. In dark mode you flip that, using the high numbers for surfaces and the low numbers for text.

For example, a light surface might use brand 50 with brand 800 text, while the dark version uses brand 950 with brand 200 text. Because the scale steps evenly, finding a matching pair on the opposite end is quick. Just remember to re-check each dark pairing in the contrast grid, since a pair that passes in light mode does not automatically pass in dark.

This is why a full 50 to 950 scale is worth the small effort to build. One scale serves both themes, and the even steps make the opposite-end pairs easy to find. Our dark mode color palette guide goes deeper on surface ladders.

Common mistakes to avoid

A few habits quietly break a scale. The first is placing a vivid brand color too high or too low on the ladder, which leaves you without enough light tints or deep shades. Put a vivid mid color at 500 or 600 so the ladder stays balanced.

The second is letting chroma stay high at the extremes, which causes shades to clip or look muddy. Ease chroma down at 50 and 950. The third is skipping the contrast check, so a pretty scale ships text pairings that fail. Always run the grid before you export.

Frequently asked questions

What is a Tailwind color scale?

A Tailwind color scale is a set of eleven shades for one color, labeled 50 through 950. The 50 step is nearly white and 950 is nearly black, with 500 as the core color. Each shade has a job, from tints and borders to buttons and text.

How do I generate a Tailwind color scale?

Start with your brand hex, place it at a step like 500, then step lightness evenly toward a pale 50 and a deep 950 while holding the hue. Doing this in OKLCH keeps the steps even to the eye. A generator like the Zepixo Colors workspace does the perceptual math automatically.

Why use OKLCH for a Tailwind scale?

OKLCH lightness is perceptual, so even numeric steps look even to your eye. That produces a balanced scale with no crowded or gapped shades. Tailwind v4 ships its default palette in OKLCH for exactly this reason.

How do I keep my exact brand color in the scale?

Lock your brand hex to a specific shade, usually 500, so the generator builds the other ten shades around that fixed anchor. Your precise brand color stays untouched while the rest of the ladder adapts. Zepixo lets you lock a shade with one click.

How do I add the scale to tailwind.config?

Add a nested object under colors in your theme, keyed by shade from 50 to 950, using hex or OKLCH values. Each shade then becomes a utility class like bg-brand-500. Zepixo exports a ready-made config so you can paste it straight in.

Should I build scales for status colors too?

Yes. Build success, warning, error, and any secondary colors as their own 50 to 950 scales in the same OKLCH model. Building them the same way makes the whole palette feel like one family. It also gives you accessible text and background pairs for each status.

Build one scale well and the pattern repeats for every color you need. Lock your brand hex, let OKLCH even out the steps, and export a palette your whole stack can use.