What is a 50–950 scale for?
It gives you consistent variants of one color for backgrounds, borders, hover states and text without picking each shade by hand. It keeps the hue and changes the lightness step by step.
How to use it
- Click a palette color to use it as the base.
- Review the scale: 50 to 200 suit backgrounds, 500 and 600 suit actions, and 800 to 950 suit text.
- Copy the CSS variables, or click a shade to copy its HEX.
Frequently asked questions
Is shade 500 my original color?
It is the middle step and sits close to your color, but it is recalculated at a fixed lightness so every scale stays consistent. If you need the exact HEX, use it as is alongside the scale.
How do I use the scale in Tailwind?
Paste the values into theme.extend.colors with the keys 50 to 950. Then use classes such as bg-brand-100 or text-brand-900.