Color Shades Generator

It takes one base colour and creates a full range of lighter and darker versions of it, such as a 50–950 scale like the ones used in Tailwind CSS, so you can build a consistent colour system for a website or app.

Yes — it is completely free, with no signup and unlimited use. All calculations happen in your browser.

A tint is a colour mixed with white (lighter), a shade is mixed with black (darker) and a tone is mixed with grey (less saturated). The tool also has a combined Tints & Shades mode.

It is an 11-step scale (50, 100, 200 … 900, 950) from very light to very dark. 50 is almost white, 500 is the mid tone and 950 is almost black. This is the same naming used by Tailwind CSS.

OKLCH is a perceptual colour space, so each step changes lightness evenly to the human eye. This avoids the muddy dark steps and washed-out light steps you get when simply mixing with black or white.

In Auto mode, your colour is placed at the step that best matches its lightness, so it stays exactly as you entered it. You can also force it to be step 500.

HEX (with or without #), rgb(), hsl(), oklch() and CSS colour names such as tomato or rebeccapurple. You can also use the colour picker, pick a colour from your screen in supported browsers, or press Random.

CSS custom properties, SCSS variables, Tailwind CSS v3 config, Tailwind CSS v4 @theme tokens, JSON and a plain array. You can also download the palette as a PNG image.

Yes. Every swatch shows its WCAG contrast ratio against white and black with an AA, AA Large or AAA rating, so you can quickly pick readable text and background pairs.

It shows how your palette looks to people with protanopia, deuteranopia, tritanopia or achromatopsia, so you can check that your colours are still distinguishable.

Yes. Adjust saturation from 0 to 200% and add a hue shift that makes light steps warmer and dark steps cooler, which gives a more natural, professional-looking palette.

Yes. The colours you generate are yours to use in personal and commercial projects with no attribution required.