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 … #2E3742 · type #6B829D above to get the same ten values
How the ten steps are calculated
The generator reads your color as HSL and keeps its hue. It then places each step at a fixed HSL lightness: 96% for 50, 92%, 84%, 74%, 64%, 54% for 500, 46%, 38%, 30%, and 22% for 900. Saturation stays the same, except at 50, 100, and 900, where it is multiplied by 0.85 so the lightest and darkest steps do not look neon. Each step is rounded to whole RGB values and shown as HEX.
Input · the default base color
#5B5BD6hsl(240, 60%, 60%)The contrast column uses the WCAG 2.x formula against #FFFFFF. It is our calculation, not a value shown by the tool.
Generated scale · 50 → 900
50 · #F0F0FAL 96% · 1.13:1 on white100 · #E0E0F5L 92% · 1.30:1 on white200 · #BEBEEFL 84% · 1.78:1 on white300 · #9595E4L 74% · 2.73:1 on white400 · #6C6CDAL 64% · 4.38:1 on white500 · #4343D0L 54% · 7.11:1 on white600 · #2F2FBCL 46% · 9.32:1 on white700 · #27279BL 38% · 11.35:1 on white800 · #1F1F7AL 30% · 13.68:1 on white900 · #1B1B55L 22% · 15.74:1 on whiteTwo things follow from this method. First, the lightness of your input is not used, so the input itself may not appear anywhere in the scale: #5B5BD6 sits at 60% lightness, between 400 and 500. Second, the step numbers describe HSL lightness, not visual contrast. With this indigo, 500 and every darker step pass WCAG AA for body text on white (4.5:1), while 400 misses at 4.38:1.
The same step number behaves differently by hue
HSL lightness does not match how light a color looks. Yellows and greens look much lighter than blues and purples at the same number, so a scale built from them needs darker steps for text.
500 · #FFDA141.37:1 on white700 · #C2A3002.46:1 on white800 · #9981003.82:1 on white900 · #6859086.95:1 on whiteThese are steps from the scale this tool generates for gold #FFD700. Only 900 passes for body text on white, and 800 reaches the 3:1 level for large text only. A rule such as “700 is always safe for text” therefore does not hold across hues. Measure each text pair in the Contrast Checker, and if you need perceptually even steps, compare the scale’s OKLCH lightness in the Code Converter and adjust by hand. The generator itself does not use OKLCH.
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 — buttons, links, active states. For a mid-lightness brand color, these two steps sit closest to the input, but neither is guaranteed to equal it.
- 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
- Tints, shades, and tones explained — Learn what changes when you add white, black, or gray to a hue.
- 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.
- Dark mode color palettes — Which steps of the scale a dark theme actually needs, and why light-mode contrast does not transfer.
- Neutral and gray color palettes — How to choose between warm, cool, and true grays and build a usable neutral scale.
Frequently asked questions
Which step should I use for text?
It depends on the hue, so measure the exact pair in the Contrast Checker. On white, the default #5B5BD6 scale passes WCAG AA for body text from 500 (#4343D0, 7.11:1) through 900, while 400 (#6C6CDA, 4.38:1) just misses. A gold scale from #FFD700 passes only at 900 (#685908, 6.95:1). On dark backgrounds, start with the lightest steps and measure again.
Where does my input color land on the scale?
Your exact input is not guaranteed to appear. The generator uses fixed HSL lightness stops, from 96% at 50 to 22% at 900, and ignores the lightness of your input. #5B5BD6 has 60% lightness, so it falls between 400 (64%) and 500 (54%), and neither step equals it. The hue carries through every step. Saturation does too, except at 50, 100, and 900, where it is reduced to 85% of the input. If the exact brand color must be in your tokens, add it separately.
What formats can I export?
Click any step to copy its HEX. Copy CSS vars copies a :root block with --color-50 through --color-900. Copy Tailwind copies a colors block with a brand group keyed 50 to 900; rename brand to fit your configuration. Both use HEX, and nothing is saved in the browser.