Design · 4 min read
Building a Tailwind Colour Scale from One Brand Colour
Tailwind's colours come as scales — blue-50 through blue-950 — and good interfaces lean on the whole range, not just one hex code. Turning a single brand colour into a balanced scale is a small design job with a big payoff.
Try it yourself with the related tool.
Generate Tailwind shades →Advertisement
How the scale works
Each colour has eleven shades from 50 (nearly white) to 950 (nearly black), with 500 roughly the base tone. The steps are tuned so the same number has similar lightness across hues — blue-600 and green-600 look about equally strong — which keeps a design consistent.
Generating a scale
Place your brand colour at the step whose lightness matches it, then lighten towards 50 and darken towards 950. Simply mixing with white and black looks washed out; shifting the hue slightly and keeping saturation up in the middle gives livelier results. Perceptual colour spaces such as OKLCH make the steps look evenly spaced.
Where each shade goes
Shades 50–100 work as tinted backgrounds, 200–300 as borders, 500–600 for buttons and links, and 700–900 for text on light backgrounds. In dark mode, the roles roughly flip. Check that the text shades you rely on pass contrast against their backgrounds.
Adding it to Tailwind
In Tailwind v4, define the shades as CSS variables in an @theme block, such as --color-brand-500: #.... In older versions, add them under theme.extend.colors in the config. Utilities like bg-brand-500 and text-brand-700 then work everywhere.