Shades & Tints Generator
Turn one color into a complete 50–900 scale — light tints for backgrounds, dark shades for text — and copy it as CSS variables or a Tailwind config.
Click any step to copy its HEX code.
From one photo color to a full scale
The cold slate blue of a rainy window, #6B829D, expanded into the 50–900 scale this tool generates — light tints for backgrounds, dark shades for text.
Slate scale · 50 → 900
#F3F5F7 … #2B3540 · copy as CSS variables or Tailwind config
What are shades and tints?
A tint is a color mixed toward white; a shade is the same color mixed toward black. Design systems — Tailwind, Material, Radix — organize every color as a numbered scale from 50 (near-white tint) to 900 (near-black shade), so a single brand color can serve backgrounds, borders, buttons, and text without inventing new colors. This generator keeps your color's hue and saturation character and re-steps its lightness across the standard ten stops.
Mapping the scale to a real interface
The 50–900 convention isn't decoration — each band has a job. A typical mapping for a light UI:
- 50–100 — page and card backgrounds, hover tints on white.
- 200–300 — borders, dividers, disabled states.
- 400–500 — the brand color itself: buttons, links, active states. 500 is usually closest to your input color.
- 600 — hover/pressed versions of 500.
- 700–900 — text on light backgrounds, headings, high-emphasis icons.
For dark mode, don't invent new colors — invert the roles: 900 becomes the background, 100–200 become text, and the brand stays around 400–500. Whatever you pick for text, run the exact pair through the Contrast Checker; which step passes depends on the hue, not just the number.
Why 50–900 became the standard
The numbering comes from Material Design and was cemented by Tailwind CSS. It won because it turns color into vocabulary: "use primary-600 for hover" is unambiguous across a whole team, survives rebrands (the numbers stay, the hues change), and maps cleanly to design tokens and CSS variables. If you export the scale from this tool, you're speaking that same language.
Related tools & guides
- Contrast Checker — Verify which steps of your scale actually pass WCAG for text.
- Color Code Converter — Get any step of the scale in RGB, HSL, CMYK, or OKLCH.
- WCAG contrast ratios explained — AA vs AAA, large text vs body text — the rules your dark steps must pass.
Frequently asked questions
Which step should I use for text?
On light backgrounds, steps 700–900 usually pass WCAG AA for body text; on dark backgrounds use 50–200. Verify the exact pair in the Contrast Checker — the passing step depends on the hue.
Where does my input color land on the scale?
The scale is generated from fixed lightness stops, so your input maps to whichever step is closest to its own lightness — typically 500–600 for a saturated brand color. The hue and saturation carry through the whole scale.
What formats can I export?
Click any step to copy its HEX, or use the buttons to copy the whole scale as CSS custom properties (--color-500: ...) or a Tailwind colors config block.