Color shades generator

A ready-made color scale, not just one color

Modern design systems rarely use a single flat color; they use a scale, a family of lighter and darker versions of the same hue numbered from 50, the palest tint, to 900 or 950, the deepest shade, with 500 usually being the color everyone would call the color's name. Tailwind CSS popularized this numbering, and it is now common in design tools too, because it gives a consistent, predictable set of options for backgrounds, borders, hover states and text on top of one core brand color.

How the scale is built

Your base color becomes step 500. Steps below it, 50 through 400, are mixed progressively toward white to create tints; steps above it, 600 through 950, are mixed progressively toward black to create shades. The hue stays recognizable throughout the scale instead of jumping between unrelated colors, so 100 still clearly relates to 900 even though one is nearly white and the other nearly black.

What each range is good for

• 50 to 200: subtle backgrounds, hover states on light UI, and badge backgrounds.
• 300 to 500: borders, icons, and secondary UI elements, with 500 often the default brand usage.
• 600 to 800: button backgrounds and text that needs to stand out on a light page.
• 900 to 950: body text tinted with the brand hue, or backgrounds in a dark theme.

Using it

Copy the generated CSS variables block directly into a stylesheet, or use the numbers as a reference while typing values into a design tool or a Tailwind configuration. Because it is a mathematical scale, not every step is guaranteed to pass contrast requirements for text; check specific pairs with the contrast checker before relying on them for body copy.

Limits

The scale mixes toward pure white and black in a straight line, which is simple and predictable but not identical to how every commercial design system tunes its own scales, some of which also shift saturation slightly at the extremes. Everything is calculated in your browser.