Color Shades and Tints: How to Build a 50–950 Scale from One Base Color

A brand handoff almost never arrives as a finished palette. You get one blue — say #3b82f6 — and a deadline. But Tailwind, Radix, and nearly every modern token file expect eleven steps per color: 50, 100, 200, all the way to 900 and 950. Multiply that by your brand color, a success green, a danger red, and a couple of neutrals, and you are suddenly responsible for hand-tuning fifty-plus hex values that all have to feel like they belong to the same family.

This guide walks through what tints, shades, and tones actually are, how the 50–950 convention maps to real UI roles, and how to generate a usable scale in seconds with the Color Shades Generator instead of nudging lightness by eye in a color picker.

Tints, Shades, and Tones: The Difference That Trips Everyone Up

The three words get used interchangeably, but they mean precise things in color theory, and the distinction explains why a naive "lighten by 10%" loop produces an ugly ramp.

A tint is your base color mixed with white. Tints are lighter, softer, and lower in chroma at the extreme end. In a 50–950 scale these are the small numbers: 50, 100, 200.
A shade is your base color mixed with black. Shades are darker and, if you are not careful, quickly turn muddy. These are the large numbers: 800, 900, 950.
A tone is your base color mixed with gray — it pulls saturation down without changing lightness much. Tones rarely get their own step; instead, good ramps fold a little de-saturation into the lightest tints and a little extra saturation into the darkest shades.

That last point matters. The Tailwind palette and most hand-tuned ramps nudge saturation up toward the dark end, which is the documented trick for avoiding the "gray sludge" look that plain black-mixing gives you. The generator does the same: it interpolates lightness along an HSL curve with perceptual easing and tilts saturation at the dark end, so the 50–200 tints stay distinct instead of collapsing into identical near-whites, and the 700–950 shades keep enough separation to be usable for text, borders, and pressed states.

Why 50–950, and What Each Step Is For

The 50–950 numbering is not arbitrary; it encodes a rough usage convention that the Tailwind and Radix ecosystems converged on. Here is the working map I reach for:

50–100 — page and card backgrounds.
200–300 — subtle borders and hover fills.
400–500 — the primary brand color, icons, accents.
600–700 — buttons and links.
800–900 — body and heading text.
950 — the darkest text, or dark-mode surfaces.

The reason the scale starts at 50 and not 0 is that 50 is the lightest usable near-white, not pure white — you still want it to read as "tinted." And the reason 500 sits in the middle is that most brand colors are mid-tones, so 500 is where your input usually lands.

A common mistake is treating step 50 as "almost the base color." It is not. If your brand blue looks nothing like the 50 step, that is exactly right — 50 is a background tint, and your real color anchored somewhere around 400–600.

A Real Worked Example: `#3b82f6` Becomes a Ramp

Let me show what this looks like in practice. I pasted #3b82f6 — the same blue Tailwind ships as blue-500 — into the tool. The base anchored to step 500 and rendered exactly as the hex I typed, which is the behavior you want: your precise brand value is preserved at its natural position, and the other ten steps are derived around it.

The scale it produced reads roughly like this from light to dark:

50   #eff6ff   (page background)
100  #dbeafe
200  #bfdbfe   (borders, hover)
300  #93c5fd
400  #60a5fa
500  #3b82f6   ← my base color
600  #2563eb   (buttons, links)
700  #1d4ed8
800  #1e40af   (body text)
900  #1e3a8a
950  #172554   (deepest text / dark surfaces)

Every row also carries a WCAG 2.2 contrast badge against both white and black. That is the part that saves me from shipping bugs: I could see immediately that 300 and 400 fail AA contrast (the ≥4.5 threshold) on a white background, while 700 and darker pass. So when I needed readable text on a white card, I grabbed 700, not the prettier-but-illegible 400. One click copied that single step; one click exported the entire ramp as a Tailwind colors block ready to paste under colors.brand in tailwind.config.js.

Wiring the Scale Into a Design System

Once you have the ramp, the export tab is where it pays off. The Tailwind export is a ready-to-paste object keyed by step number — name it brand and bg-brand-500 resolves instantly. The CSS export gives you --color-50 through --color-950 custom properties for runtime theming. SCSS and JSON exports cover Sass pipelines and token tooling like Style Dictionary.

For dark mode, you reuse the same hue with inverted roles: the 900–950 steps become your surfaces, and the 50–200 steps become your text. The catch is contrast — verify your light text steps clear AA against the dark surface step you chose, not against white. Because both themes come from one family, light and dark feel like the same brand rather than two unrelated palettes.

One workflow note from experience: instead of pasting a lone hex into Slack and saying "make it a bit lighter for hover," generate the full ramp and share the URL — the base color rides in the query string, so the developer opens the exact scale you saw and there is zero ambiguity about whether "lighter" meant step 400 or step 500.

If you are still picking the hues themselves rather than expanding one into steps — choosing complementary or analogous brand colors — that is a different job, and the Color Contrast Checker is the companion tool for validating each pair you settle on before you commit it to tokens.

Where a Shades Scale Fits in Your Workflow

A scale generator sits at one specific point: you have already chosen a hue, and you need to expand it into the eleven-step token ramp a design system consumes. Feed it a mid-tone base (lightness roughly 45–60%) for the most evenly spread result — a base that is already near-white or near-black leaves the matching end with nowhere to go, and the steps bunch up. From there, you can hand the named ramp to engineering, fill the missing in-between steps of an inherited palette, or pick a contrast-safe text shade for a colored background, all without inventing #5a93f0-ish guesses by eye that slowly drift from the brand.

Made by Toolora · Updated 2026-06-13