Color Palettes

Color shades generator

Pick a color and instantly get its full range, from the lightest shade to the darkest. Tap any shade to copy its HEX code.

Scale from 50 to 950

Eleven shades of the same color family, numbered like Tailwind. Your color is marked on the step that fits it best.

Tints (with white)

Tap a shade to copy its HEX.

Shades (with black)

Tones (with gray)

Export the scale

Open in the palette generator →

What is a color scale

It is the series of shades that come from one color: from an almost white version to an almost black one. They all share the same base hue, so they always go together.

Tints, shades and tones

A tint is the color mixed with white: lighter and softer. A shade is the color mixed with black: darker and deeper. A tone is the color mixed with gray: more muted and elegant.

How to use a scale in your design

Use the light steps (50 to 200) for backgrounds, the middle ones (400 to 600) for buttons and links, and the dark ones (700 to 950) for text and borders. One scale gives you a clean, consistent interface.

Frequently asked questions

How is the scale calculated?

We use the OKLCH color space, which follows how the eye perceives lightness. That keeps the steps between shades even, with no sudden jumps.

What do the numbers 50 to 950 mean?

It is the scale used by Tailwind CSS and many design systems: 50 is the lightest shade and 950 the darkest. Your color lands on the number that fits it best.

Can I use the scale in Tailwind or CSS?

Yes. Type a name, choose the format and copy the code: CSS variables ready to paste or the colors block for your Tailwind config.

What is the difference between a color scale and a palette?

A scale is shades of one color. A palette combines different colors that work together. Many palettes use a scale for backgrounds and text, plus one or two accent colors.

More guides and tools

Color mixerInteractive color wheelPalette generatorNamed colorsTailwind, Material Design and Bootstrap palettes