Shades and Tints Generator

Build a full range from a single colour. Shades are made by mixing the colour with black, tints by mixing it with white and tones by mixing it with mid-grey, in equal steps. The result is a ready-to-use scale for hover states, backgrounds, borders and charts, with every value copyable and exportable as code.

Color & Palette Runs in your browser

Generate Shades and Tints

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

Base colourHEX, rgb(), hsl() or a CSS colour name.

Or pick it

Steps on each side

Also show tones (mixed with grey)

Export as

How to Use the Shades and Tints

Type or pick the base colour.
Choose how many steps you want on each side.
Optionally include tones mixed with grey.
Copy individual codes or export the whole scale.

About This Tool

UI designers creating colour ramps for a design system, developers who need hover and disabled states, and painters planning value studies.

Input: HEX / RGB / HSL colour · Output: HEX / CSS / SCSS / JSON.

Features and Limitations

Features

Shades, tints and optional tones in 2 to 12 equal steps.
Mixing percentages shown under every swatch.
Exports with meaningful names such as tint-20 and shade-40.
Accepts HEX, rgb(), hsl() and CSS names.

Limitations

Mixing is done in standard sRGB, like most design tools; perceptually uniform scales (such as OKLCH) are not generated.
Very light or dark base colours give scales that bunch together at one end.
Results are computed in your browser; nothing you enter is sent to a server.

Example

For #E4572E with 3 steps (25%, 50% and 75%), the 50% tint is #F2AB97 and the 50% shade is #722C17.

Frequently Asked Questions

What is the difference between a shade, a tint and a tone?

A shade adds black, a tint adds white and a tone adds grey. Shades are darker, tints lighter and tones duller versions of the same hue.

How do I use the scale in CSS?

Choose CSS custom properties, paste them into :root and use them with var(--color-tint-20) and similar names.

Why do my tints look slightly washed out?

Mixing with white lowers saturation as well as raising lightness. That is the classic definition of a tint.

Is anything stored?

No. The scale is calculated in your browser and nothing is saved.