Tints and shades

What are tints and shades?

A tint is a color mixed with white, which makes it lighter, and a shade is a color mixed with black, which makes it darker. Generating them in even steps from one base color gives you a consistent scale, the kind design systems use for things like blue-100 to blue-900, without picking each value by eye. This generator mixes the base color with white and black in steps of 5, 10, 20 or 25 percent, lists every result from the lightest tint to the darkest shade, and lets you copy them as HEX, RGB or HSL.

Examples

Mixing a color with white or black to get the same tints and shades in code:

CSS

/* color-mix() needs Chrome 111+, Firefox 113+, Safari 16.2+ */
--blue-300: color-mix(in srgb, #2563eb 70%, white);
--blue-700: color-mix(in srgb, #2563eb 70%, black);

Sass

$tint: mix(white, #2563eb, 30%);
$shade: mix(black, #2563eb, 30%);

JavaScript

const mix = (a, b, w) => a.map((c, i) => Math.round(c + (b[i] - c) * w));
mix([37, 99, 235], [255, 255, 255], 0.3); // tint 30%
mix([37, 99, 235], [0, 0, 0], 0.3);       // shade 30%

Python

def mix(a, b, w):
    return tuple(round(c + (d - c) * w) for c, d in zip(a, b))

mix((37, 99, 235), (255, 255, 255), 0.3)

Use Cases

Building a design system color scale

Turn a single brand color into a full light-to-dark ramp for backgrounds, borders, hover states and text, all clearly related to each other.

Hover and active states

Pick a shade one or two steps darker than a button color for hover and pressed states, so interactions feel consistent across the interface.

Subtle backgrounds

Use a light tint of an accent color for alert boxes, selected rows or highlighted sections that need to stay readable behind text.

Charts and data visualization

Sequential tints of one hue work well for heatmaps and stacked charts where the values have an order.

Frequently Asked Questions

What's the difference between a tint, a shade and a tone?

A tint adds white, a shade adds black and a tone adds gray. This tool generates tints and shades, which are what most UI color scales are built from.

How is the mix calculated?

Each channel is interpolated linearly in sRGB between the base color and white or black, the same thing Sass's mix() and CSS color-mix(in srgb, ...) do. A 30% tint is 70% base color and 30% white.

Why aren't pure white and black in the list?

Mixing at 100% gives plain white or black for every base color, so they're left out. The list goes from the lightest tint to the darkest shade with the base color in the middle.

Why do the dark shades look a bit dull?

Mixing with black lowers saturation along with lightness. If you want richer darks, take a shade as a starting point and raise its saturation in the Color Converter.

Is my data sent to a server?

No. Every color is calculated in your browser with plain JavaScript. Nothing you enter is transmitted or stored.

Tints and Shades Generator