What is a color shade?

A shade is a darker version of a color, created by mixing the original with black. Shades retain the hue of the original but become progressively darker and less saturated. They are used for dark backgrounds, borders, and text on light backgrounds.

How many shades does this generator produce?

This generator produces 10 shades plus your base color, giving 11 colors in total from your base to near-black. You can also switch to 5 or 20 steps using the steps selector.

What format are the color values in?

Swatches show hex codes by default. You can switch the copy format to RGB or HSL in the side panel. The copy-all button exports all values in your chosen format.

Is my data sent to a server?

All calculations run in your browser. All processing runs locally.

Color shades generator

Generate a full range of shades (darker variations) from any base color. Enter a hex code or pick with the color picker to see 10 shades progressing from your base color toward black. Click any swatch to copy the hex code instantly. All calculations run locally in your browser.

base

Click any swatch to copy. 21 colors (10 tints + base + 10 shades).

OPTIONS

Steps

Copy format

How it works

Tints are generated by linearly interpolating in RGB space between the base color and white (255, 255, 255). Shades are generated by interpolating between the base color and black (0, 0, 0). For N steps, each tint or shade uses a factor of i/(N+1) for i from 1 to N. All calculations run in JavaScript in your browser.

Processing runs in your browser

All processing happens locally in your browser tab. Our servers are not involved at any point.

Related operations

To build a coordinated multi-colour set from one base, try the colour palette generator. For checking how a tint reads against text, use the contrast checker. To convert any shade between HEX, RGB, and HSL, see the colour converter.

Frequently asked questions

What is a color shade?: A shade is a darker version of a color, created by mixing the original with black. Shades retain the hue of the original but become progressively darker and less saturated. They are used for dark backgrounds, borders, and text on light backgrounds.
How many shades does this generator produce?: This generator produces 10 shades plus your base color, giving 11 colors in total from your base to near-black. You can also switch to 5 or 20 steps using the steps selector.
What format are the color values in?: Swatches show hex codes by default. You can switch the copy format to RGB or HSL in the side panel. The copy-all button exports all values in your chosen format.
Is my data sent to a server?: All calculations run in your browser. All processing runs locally.

Color shades generator

How it works

Processing runs in your browser

Related operations

Frequently asked questions

Related tools