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?

Clicking a swatch copies its hex code 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.

Why do shades look duller as they get darker?

Each shade scales red, green and blue toward 0 by the same fraction, so the gap between the channels shrinks too and the color loses intensity on its way to near-black. For #3b82f6 the first of 10 shades is #3676e0 and the last is #050c16.

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. 11 colors (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?: Clicking a swatch copies its hex code 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.
Why do shades look duller as they get darker?: Each shade scales red, green and blue toward 0 by the same fraction, so the gap between the channels shrinks too and the color loses intensity on its way to near-black. For #3b82f6 the first of 10 shades is #3676e0 and the last is #050c16.

Last reviewed September 30, 2026

Other pages for this tool

Related tools

Background reading: Complete guide to color tools
Step by step: Build a color system for a design project