Color Shades Generator (50–950)

Generate a full 50–950 shade scale from one colour, with CSS variables and Tailwind config.

What are tints and shades?

Tints are lighter versions of a colour and shades are darker versions. A colour scale from 50 (lightest) to 950 (darkest) gives a design system consistent backgrounds, borders, text and hover states from one brand colour.

How the scale is built

Your colour becomes step 500. Lighter steps (50–400) raise the lightness while keeping the hue and saturation; darker steps (600–950) lower it. Click any swatch to copy its HEX code.

Typical uses of each step

Steps	Use
50–100	Page and card backgrounds, subtle highlights
200–300	Borders, dividers, disabled states
400–600	Buttons, links, icons, brand elements
700–950	Hover states, text and dark mode backgrounds

Copy the CSS custom properties or paste the Tailwind block into theme.extend.colors. Check text and background pairs with the Contrast Checker.

Frequently asked questions

Is this the same as Tailwind's palettes?

It uses the same 50–950 naming so it drops into Tailwind, generated from your own colour.

Why is my colour at 500?

500 is the conventional base step; lighter and darker steps are generated around it.

Can I rename the colour?

Yes, the name is used in the CSS variables and Tailwind config.