NineClip Free Tools

Color Shades Generator

Generate a full tint-and-shade scale from one base colour — ten steps from near-white to near-black — keeping the same hue. Copy any hex with a click, all in your browser.

Color Tools● Free No upload Instant

Loading Color Shades Generator…

Your browser is preparing the tool. It runs 100% locally.

Quick Answer

Pick a base colour and the tool produces a row of ten tints and shades — the same hue carried from very light to very dark. It works by converting your colour to HSL and stepping the lightness down in even increments while keeping hue and saturation the same. Click any swatch to copy its hex. It is handy for building a UI colour scale, and it runs entirely in your browser.

What the Color Shades Generator Does

Give it one colour and it returns a graded family of that colour — lighter versions (tints) through to darker versions (shades) — laid out as ten swatches from near-white to near-black. Each swatch shows its hex code and copies when clicked.

It is the fast way to turn a single brand or accent colour into a usable scale: backgrounds, hovers, borders, text and shadows that all clearly belong to the same colour but differ in lightness.

How It Works

The tool converts your base colour into HSL — hue, saturation and lightness. Hue is the colour itself (the position on the colour wheel), saturation is how vivid it is, and lightness is how close it is to white or black. The first two are what make a colour recognisable as, say, blue; lightness is the dial this tool turns.

It then holds hue and saturation fixed and walks lightness from 95 percent down to about 14 percent in nine roughly equal steps, producing ten colours. Each HSL value is converted back to a hex code for the swatch. Because only lightness changes, every step is unmistakably the same colour, just lighter or darker.

Generation algorithm

  1. Convert the base to HSL. Translate your colour into hue, saturation and lightness so lightness can be adjusted on its own.
  2. Hold hue and saturation. Keep both fixed for every step, so the whole scale reads as one colour family.
  3. Step the lightness. Walk lightness from 95% down to roughly 14% in nine even increments, giving ten tints and shades.
  4. Convert each step to hex. Turn every HSL value back into a hex code and render it as a click-to-copy swatch.

How each step is built

hue and saturation = fixed (from the base colour) lightness starts at 95% and drops by about 9 points each step steps: 95, 86, 77, 68, 59, 50, 41, 32, 23, 14 (percent lightness) each (hue, saturation, lightness) is converted back to hex
Worked example
base #2563EB → #E8EEFD (lightest) … #1659E9 (mid) … #061941 (darkest)

Tints are the lighter steps (lightness above the base), shades the darker ones. Only lightness changes, so the hue stays constant across all ten.

Standards & references

  • Tints and shades — In colour theory a tint is a colour mixed toward white and a shade is a colour mixed toward black. Varying lightness in HSL is the digital equivalent of both.
  • HSL colour model — HSL describes a colour by hue, saturation and lightness. It makes a tint-and-shade scale straightforward because lightness can be changed without touching the hue.

Accuracy & Limitations

The scale changes lightness only, so the steps are mathematically even in HSL — but HSL lightness is not perceptually even. A jump near the middle can look bigger than the same jump near the ends, because the eye does not see lightness linearly.

Highly saturated colours can look slightly off at the extremes: very light or very dark steps may appear a touch washed out or muddy, since real design scales often nudge saturation as well as lightness to compensate. This tool keeps saturation fixed.

The lightest and darkest steps are clamped near white and near black, so two different bright base colours can end up with very similar top and bottom swatches. The distinctive middle of the scale is where the base colour shows most.

It is a fast starting scale, not a finished design system. Polished palettes (such as the 50-to-900 scales in UI frameworks) are usually hand-tuned for contrast and perceptual evenness on top of a ramp like this.

Real-World Use Cases

Building a UI colour scale

Turn one accent colour into backgrounds, hovers, borders and text shades.

Designing states

Pick lighter and darker steps for hover, active and disabled variants.

Creating depth

Use darker shades for shadows and lighter tints for raised surfaces.

Exploring a colour

See a colour across its whole lightness range at a glance.

When to use it — and when not to

Good for

  • Generating tints and shades of one colour
  • A quick UI scale from an accent colour
  • Picking hover and active variants
  • Learning how lightness changes a colour

Not the best choice for

  • A perceptually even, production design scale
  • Multi-hue palettes or colour harmonies
  • Guaranteeing accessible contrast between steps
  • Adjusting saturation alongside lightness

For a perceptually-even scale, build it in a space like OKLCH or use a dedicated palette tool that tunes each step. For a multi-colour scheme rather than one hue, use a colour palette generator; for contrast between two steps, check them in a contrast checker.

Frequently Asked Questions

What is the difference between a tint and a shade?
A tint is your colour moved toward white (lighter); a shade is it moved toward black (darker). This tool produces both — the steps above the base are tints, the steps below are shades.
How many shades does it generate?
Ten, evenly spaced in lightness from about 95 percent down to about 14 percent, all sharing the base colour's hue and saturation.
Why do the steps not look evenly spaced to my eye?
They are even in HSL lightness, but human vision is not linear in lightness. Mid-range steps can look like bigger jumps than the same numeric step near white or black. A perceptual space like OKLCH spaces them more evenly.
Does the hue change across the scale?
No. Hue and saturation stay fixed; only lightness moves. That is what makes every swatch read as the same colour, just lighter or darker.
How do I copy a colour?
Click the swatch you want and its hex code is copied to your clipboard, ready to paste into your CSS or design tool.
Can I use these as a 50-to-900 design scale?
As a starting point, yes — map the lightest steps to the low numbers and the darkest to the high ones. For production you will usually fine-tune contrast and saturation, since a pure lightness ramp is not perceptually perfect.
Will lighter and darker steps always be readable on each other?
Not guaranteed. Two nearby steps may not have enough contrast for text. Check any text-on-background pair in a contrast checker against the WCAG ratios before relying on it.
Why do very light and very dark steps look washed out?
Near white and near black, a fixed saturation has less room to show, so the colour reads as paler or muddier. Design systems often raise saturation at the extremes to keep the colour lively; this tool keeps it constant.
Can I change the number of steps or the range?
The scale is fixed at ten steps across the full lightness range. For a custom number of stops or a narrower range, a dedicated palette tool or a manual HSL adjustment gives more control.
Does it work with any colour?
Yes — any colour you pick is converted to HSL and ramped. Near-greys (very low saturation) produce a scale that runs through greys, since there is little hue to carry.
Is the colour data sent anywhere?
No. The whole scale is generated in your browser; nothing about your colour is uploaded.
What is the difference between a shade and a tone?
A shade adds black, a tint adds white, and a tone adds grey (reducing saturation). This tool varies lightness, so it produces tints and shades; for tones you would also lower the saturation.

References

Builds the scale by stepping HSL lightness from 95% down to about 14% while holding hue and saturation fixed; honest that this is a lightness ramp, not a perceptually-tuned design scale.

PopularHot

Color Picker

Use Color Picker to choose and convert color precisely — instant and free.

ColorOpen Tool
Popular

HEX to RGB Converter

Use HEX to RGB Converter to choose and convert color precisely — instant and free.

ColorOpen Tool
Trending

Color Palette Generator

Use Color Palette Generator to choose and convert color precisely — instant and free.

ColorOpen Tool
Trending

Gradient Generator

Use Gradient Generator to choose and convert color precisely — instant and free.

ColorOpen Tool
Editor's Pick

Contrast Checker

Use Contrast Checker to choose and convert color precisely — instant and free.

ColorOpen Tool

RGB to HEX Converter

RGB to HEX Converter with copy-ready values for design and front-end work.

ColorOpen Tool

Ready to try the Color Shades Generator?

It is free, private and runs entirely in your browser — no sign-up, no uploads, no limits.

Use the tool now Explore Color Tools