How the scale is built
The generator places your color at step 500 and builds outward. Lighter steps mix it with white and darker steps mix it with black, at fixed ratios. Fixed ratios mean the scale is reproducible: the same hex code always gives the same eleven values, which matters when a design file and a codebase both need to match.
| Step | Mix |
|---|---|
| 50 | 95% white |
| 100 | 90% white |
| 200 | 75% white |
| 300 | 60% white |
| 400 | 30% white |
| 500 | Your base color |
| 600 | 15% black |
| 700 | 30% black |
| 800 | 45% black |
| 900 | 60% black |
| 950 | 75% black |
Using the scale in a design system
A common convention: 50 and 100 for page and card backgrounds, 200 and 300 for borders and dividers, 400 for disabled states and icons, 500 and 600 for primary buttons and links, and 700 to 950 for text, hover states and dark surfaces. Treat this as a starting point and confirm contrast on the actual pairs you ship.
For text, don't guess. Every row above shows the contrast ratio against white and black text, with the WCAG level it reaches. If you need to test two colors from different scales against each other, use the Color Contrast Checker.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a color mixed with white, which makes it lighter. A shade is a color mixed with black, which makes it darker. A tone is a color mixed with gray. This generator builds tints for steps 50 to 400 and shades for steps 600 to 950, with your base color at 500.
How does this generator build the 50–950 scale?
Your color is placed at 500. Steps 50 to 400 mix it with white at 95, 90, 75, 60 and 30 percent. Steps 600 to 950 mix it with black at 15, 30, 45, 60 and 75 percent. Mixing in sRGB keeps the hue stable and makes every step predictable, so the same input always gives the same scale.
Is this the same as the Tailwind CSS default palette?
No. Tailwind hand-tunes its default palette, and version 4 defines it in OKLCH. This tool uses the same 50–950 naming so the output drops straight into a Tailwind config, but every value is calculated from your own color.
Which steps are safe to use for text?
Check the contrast shown on each step. WCAG AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA needs 7:1. The step that first passes on white depends on the hue: blues and purples pass earlier than yellows and light greens.
My brand color is very light. Why does the scale look uneven?
The base always sits at 500. A very light color such as a pale yellow leaves little room for tints above it and a long run of shades below it. If that happens, treat the generated 300 or 400 as your working brand color and use the darker steps for text and borders.