Shades & Tints Generator

Pick one color and get its darker shades, lighter tints and muted tones. Click any step to copy it.

Base color

Indigo · #6366F1

Format:

Shades & tints

From 950, the darkest shade, to 50, the lightest tint. Your color is 500.

Tones

Your color mixed with a gray of the same lightness, from 0% to 100% gray.

About the Shades & Tints Generator

How to make shades, tints and tones of a color, and how to use a color scale in your design.Read the guide

The ColorOverflow Shades & Tints Generator is a free online tool that turns one color into a full color scale. Pick a base color and it creates eleven steps from the darkest shade, 950, to the lightest tint, 50, with your color at 500, plus a row of tones that fade your color toward gray.

Click any step to copy its HEX, RGB or HSL code, copy a whole scale at once, or export it as CSS variables, Tailwind theme colors, JSON and more. It runs in your browser with no sign-up.

How to make shades and tints of a color

Enter your base color. Type or paste a HEX, RGB or HSL code, or click the swatch to pick one.
Choose a color format. Codes are shown and copied as HEX, RGB or HSL, and the choice is remembered on other pages.
Click a step to copy its code, or use Copy all to copy the whole scale.
Export the scale. The Export dialog writes CSS variables, Tailwind theme colors, SCSS, Less, JSON or SVG, with each step named after its number, such as --color-indigo-500, and can also download a PDF.

Shades, tints and tones: what's the difference?

In the shades and tints scale, each step mixes in a little more black toward 950 or a little more white toward 50. In the tones row, each step adds 10% more gray of the same lightness, so the color loses saturation without getting darker or lighter.

A shade is your color mixed with black. Shades are darker and feel deeper and heavier.
A tint is your color mixed with white. Tints are lighter and feel softer and airier.
A tone is your color mixed with gray. Tones are less saturated and feel muted and calm.

How to use a color scale

Use light tints, such as 50 and 100, for page and card backgrounds.
Use 200 and 300 for borders, dividers and subtle highlights.
Use 500 and 600 for buttons and links, and a step darker for their hover states.
Use the darkest shades, 800 to 950, for text and dark mode surfaces.
Use tones when a color feels too loud, such as for large areas or a calmer brand.
Check contrast for every text and background pair you take from the scale.

Frequently asked questions

What do the numbers 50 to 950 mean?: They name each step's place in the scale, from 50, the lightest, to 950, the darkest, with the base color at 500. It's the same naming Tailwind CSS uses, so an exported scale fits straight into a Tailwind theme.
Can I use the scale in Tailwind CSS?: Yes. Export the scale and choose Tailwind. You get an @theme block with one variable per step, such as --color-indigo-500, which gives you classes like bg-indigo-500 and text-indigo-900 in Tailwind v4.
Is my base color always exactly 500?: Yes. The 500 step is your color unchanged, and the other steps are mixed from it, so the scale always matches the color you started with.
How do I get shades and tints for a whole palette?: Open the palette's details page from the generator, the gallery or your wishlist. Its Shades & Tints tab shows the scale of every color in the palette.
Is the shades and tints generator free?: Yes. It's free with no sign-up, and you can use the colors in personal and commercial projects.