Skip to content
ToolQivo

Color Shades Generator

Build tints, shades and tones from one colour.

Color Tools Reviews Free · no sign-up

The base colour

The scale 
The shades appear here

Quick Tool Overview

The Color Shades Generator builds the whole family from one colour — tints toward white, shades toward black, tones toward grey — spaced perceptually in OKLab so the steps look even instead of crowding at one end.

What it does
Generates tints, shades and tones of a colour
You give it
One base colour and a step count
You get back
A full ramp with contrast figures per shade
Best for
Hover states, borders and design system scales
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Color Shades Generator

One colour is never enough. A button needs a darker version for its hover state, a background needs a lighter one, a border needs something in between — and picking each of those by hand produces a set that does not look related.

This builds the whole family at once. Tints are your colour mixed toward white, shades toward black, and tones toward grey, each in as many steps as you want, and each with its HEX value and contrast against black and white so you can tell at a glance which ones can carry text.

The steps are spaced in OKLab rather than by adjusting HSL lightness, which matters more than it sounds. HSL steps bunch up at one end and the ramp goes pale too quickly; OKLab steps look even because the space was built for that. There is also a design system mode that produces a numbered scale from 50 to 950 with your colour anchored where it belongs, ready to paste into Tailwind or a set of custom properties.

Key features of the Color Shades Generator

All three families

Tints, shades and tones together — tones being the one people forget, and often the one a muted interface needs.

Perceptually even steps

Mixed in OKLab rather than by moving HSL lightness, which bunches the steps and goes pale too quickly.

Contrast per shade

Each swatch carries its ratio against black and white, so the ones that can hold text are obvious.

Design system mode

A numbered 50–950 scale with your colour anchored where its lightness actually puts it.

Export as variables

The whole scale as CSS custom properties or a plain list of HEX codes.

How to use the Color Shades Generator

  1. 1

    Enter your base colour

    The one you already have — a brand colour, or something from a design.

  2. 2

    Choose tints, shades or tones

    Toward white, toward black, or toward grey. Or see all three at once.

  3. 3

    Set the number of steps

    Five for a simple set, eleven for a full design system scale.

  4. 4

    Copy the scale

    One swatch, or the whole scale as CSS variables.

Frequently asked questions

A tint is the colour mixed with white, a shade is mixed with black, and a tone is mixed with grey. Tones are the ones people forget: they reduce intensity without changing how light the colour is, which is often exactly what a muted interface needs.

Reviews of the Color Shades Generator

What people who use the Color Shades Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Color Shades Generator. It takes half a minute and no account.

Write the first review

More color tools