Tailwind expects each color to come as a scale — 50 through 950 — so a single brand color is never quite enough. The good news is that a usable scale can be generated from one HEX value by holding the hue steady and walking the lightness from near-white to near-black.

Start from the middle

Your brand color usually belongs around the 500 or 600 step. From there, the lighter steps trend toward white for backgrounds and subtle fills, while the darker steps trend toward black for text and borders.

The adjustments that matter

A naive linear ramp often produces a muddy middle and washed-out ends. Two small corrections fix most of it:

  • Keep a little saturation at the extremes. Pure-light and pure-dark steps can drift gray; nudging saturation back up keeps them feeling related to the brand.
  • Check the 50 and 950 ends against real UI. The lightest step should sit comfortably behind dark text; the darkest should work as text on a light surface.

Which steps you will actually use

A ten-step scale does not mean ten equally-used colors. In practice each region has a job:

  • 50–100 — page and section backgrounds, subtle hover fills, table stripes. Barely tinted.
  • 200–300 — borders, dividers, disabled surfaces.
  • 400 — the awkward middle. Too light for text on white, too dark for a background. Often used for icons and placeholder states.
  • 500–600 — the brand color proper: buttons, links, active states.
  • 700–800 — hover and pressed states for those buttons, and text in the brand color on a light background.
  • 900–950 — dark-mode surfaces and high-contrast text.

Knowing this shapes how you tune the scale. If your 600 fails contrast as a button background with white text, that is the step to fix — the 50 being marginally off matters far less, because nothing sits on top of it.

Check contrast before you commit the config

A generated scale is arithmetically even, not accessible by default. Two pairs are worth checking every time:

White text on your 500 and 600. This is the primary button, and many brand colors land just under 4.5:1 against white. If yours does, use 600 as the button background rather than 500 and keep 500 for larger or non-text uses.

Your 700 as text on your 50. This is the standard "colored text on tinted background" pattern used in alerts and badges, and it fails more often than people expect.

Both take seconds in the contrast checker, and both are much cheaper to fix now than after fifty components reference the token. Our accessible color guide covers the thresholds in detail.

Neutrals matter as much as the brand scale

Most of a real interface is gray, and Tailwind's default gray scales are perfectly good. But a custom neutral tinted toward your brand hue usually looks better: take your brand hue, drop saturation to somewhere between 3% and 8%, and build the same 50–950 ramp.

The result is a gray scale with a faint cast that quietly belongs to the same family. Against a blue brand the grays lean cool; against a warm brand they lean warm. Nobody consciously notices, and the whole interface feels more deliberate.

Naming and scaling up

Name the scale after its role rather than its color — primary or brand rather than blue — so a rebrand does not leave you with a blue scale full of green. For products that outgrow a handful of colors, our post on naming colors in a design system covers the two-layer token pattern that keeps this manageable.

One scale per meaningful color is usually enough: a brand scale, a neutral scale, and short scales for success, warning and danger. Semantic colors rarely need ten steps — three or four (subtle background, border, solid fill, dark text) covers almost every use.

Generate and paste

The Tailwind color generator builds the full scale from your base color and outputs a config block you can drop straight into tailwind.config.js. Tweak the step lightness values if your brand color is unusually light or dark, then verify the contrast of the steps you will actually use for text.

If you are starting from an image rather than a hex code — a logo, a photograph, a screenshot — pull the base color out with the color detector first, then feed it into the generator. And if you are working in plain CSS rather than Tailwind, the CSS color generator produces the same idea as custom properties.