Boneyard Tools

Color Shades and Tints Generator

Pick a base hex color and get a scale of tints (mixed toward white) and shades (mixed toward black) in equal steps. Choose how many steps you want, then copy any swatch. Everything runs in your browser.

How to generate color shades

  1. Pick a base color with the swatch or type a hex code.
  2. Set how many tints and shades you want in each direction.
  3. Copy any tint or shade hex straight into your CSS or design tool.

Examples

Shades of red

#ff0000 with 4 shades
#bf0000, #800000, #400000, #000000

Tints of red

#ff0000 with 4 tints
#ff4040, #ff8080, #ffbfbf, #ffffff

Frequently asked questions

What is the difference between a tint and a shade?

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.

How are the steps calculated?

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.

How many shades should I use?

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.

Can I use shorthand hex codes?

Yes. Three-digit hex like #f00 is expanded automatically, and a leading hash is optional.

Is my color sent to a server?

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

Related tools