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.

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.