Color Shades and Tints Generator

A tint is a color mixed with white to make it lighter, while a shade is a color mixed with black to make it darker. This tool generates both from a single base color.

Each step is a linear blend in RGB. For shades the base color is mixed toward black in equal amounts, and for tints it is mixed toward white, so the last step is pure black or pure white.

Five tints and five shades is a common choice and gives a balanced scale, but you can pick any number to make a finer or coarser palette.

The Steps each way box accepts 1 to 20, and values outside that range are pulled back to the nearest limit. That produces up to 20 tints and 20 shades, or 41 swatches including the base.

Yes. Three-digit hex like #f00 is expanded automatically, and a leading hash is optional. Anything that is not a valid three or six digit hex shows an error instead of a palette.

The final step mixes the base fully toward the target, so the top tint reaches #ffffff and the bottom shade reaches #000000. Every swatch in between is a proportional blend on the way there.

It blends in linear RGB, which is fast and predictable but can look slightly uneven to the eye, since equal RGB steps are not equal brightness steps. For perceptually smooth ramps, tools built on HSL or OKLCH may suit design systems better.

Copy all writes the Full scale as a comma-separated list running lightest to darkest: the tints reversed so white leads, then the base, then the shades ending in black. It matches the order of the strip shown under the palette.

No. The whole palette is generated in your browser, so your color values never leave your device.