How many shades are produced?

Ten, ordered from just below the base colour through to a near-black at the darkest end. The base itself is not one of the ten.

Does shading change the hue?

No. Lightness is reduced while hue and chroma are held, which keeps the ramp recognisably the same colour rather than drifting toward grey.

How is it different from a tint?

A shade moves toward black by reducing lightness, a tint moves toward white by increasing it, and a tone reduces chroma at the same lightness. All three vary one hue in different directions.

Are the darkest steps usable as accents?

They can look flatter than expected, because a saturated colour held at low lightness can fall outside what a screen can display and get clamped. They usually work better as surfaces.

Does the strip include the base colour?

No. The ladder is ten darker versions of the base, and the base itself is not one of them: each step divides the base lightness by eleven, so the strip starts a little below the original and stops at roughly a tenth of its lightness. Hue and chroma stay put, which is what keeps the ramp reading as one colour.

Color Shades Generator

Color

#2970e2

#155ecf

#004cbc

#003aa9

#002696

#000e83

#000071

#05005f

#0d004d

#0f003c

You Might Also Need

Color Tints Generator

Generate lighter tints of a color

CSS HEX Color Generator

Generate CSS HEX color values

Pastel Color Generator

Generate soft pastel colors

Random Color Generator

Generate beautiful random colors

The color shades generator takes one color and returns ten progressively darker versions of it, each shown with its hex value and a copy button.

What is Color Shades Generator?

The color shades generator builds a darker ramp from a single colour. Choose a base and the tool produces ten steps, arranged lightest to darkest, each rendered as a swatch carrying its own hex value and a copy button. The base colour itself is deliberately absent from the strip: every entry is a shade of it, the first only slightly deeper and the last approaching black. That is the whole tool, and its simplicity is the point — you get a usable ramp for a single colour without deciding anything except which colour to start from.

What the strip contains are shades of a color in the literal sense: darker versions of one hue, with hue and colourfulness left untouched so that the ramp still reads as a single colour.
The construction is worth describing because it explains how the ramp behaves.
Shading works by reducing perceptual lightness while leaving hue and chroma exactly as they were.
The ten steps are spaced evenly as fractions of the base lightness, so the first swatch sits at roughly nine tenths of the original brightness, the middle lands near half, and the final entry is under a tenth.
Because the spacing is proportional rather than absolute, a very light base produces a ramp with tighter steps and a dark base produces larger ones, which mirrors how lightness is actually perceived.

Holding chroma constant is what keeps the ramp feeling like one colour rather than a set of related greys.
It does introduce a limit worth knowing: as lightness falls, a saturated colour can travel outside the range the screen can display, and those extremes get clamped when they are written as hex.
The practical symptom is that the darkest two or three entries can look slightly flatter or more muted than the arithmetic suggests.
That is normal for a lightness-only ramp, not a fault, and it is the reason the very darkest steps are usually used as near-neutral surfaces rather than as accent colours.

The obvious use is interface work. Almost every design system needs a base colour plus several darker states for presses, borders, dark surfaces and text, and generating them together from one value keeps the relationships consistent across the whole palette instead of leaving a set of greys that were each chosen by eye and do not quite belong to the same family. Because each swatch carries a copy button, moving the ramp into a stylesheet is a matter of copying values in sequence, and the strip's ordering makes it obvious where a token name such as a numbered scale should land.

It also works well as a comparison device. Two different base colours produce two ramps, and laying them side by side shows immediately whether their dark ends are equally usable, which is the kind of question that is difficult to answer from a single swatch. If the darkest steps are too close together for your taste, the answer is not a setting here: a ramp built by mixing toward a specific dark colour, or a hand-tuned scale, gives finer control.

Two nearby tools complete the picture, and the distinction is worth holding on to. Shades darken a colour by reducing lightness; tints lighten one by raising it toward white; tones mute one by draining chroma while holding lightness. Together those three cover the classic ways a single hue is varied, and the shade ramp is the one you reach for whenever a css shade ramp of darker states is needed for a flat base colour. Which is exactly the reason to generate darker shades of a hex color here rather than pick them by hand. In practice the workflow is one decision and no configuration, and what you get is a complete darker ramp with the values already on screen.

How to use Color Shades Generator

Set the base colour with the picker.
Read the strip of ten darker steps — hue and chroma are held, only lightness falls.
Copy the hex of the step that fits the job.
Reach for the tint or tone generator when the ramp should get lighter or duller instead.

When to use Color Shades Generator vs related tools

Use this generator when you need a darker ramp from one base color — pressed and hover states, borders or dark surfaces. Use the tint generator to lighten a color instead, and the tone generator to mute one without changing its lightness. The tints and tones generators complete the strip — lighter and duller versions of the same base — and the palette importer is the route in when the base arrives as a list.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.