Color Tone Generator

A tone is a color mixed with gray. It keeps its hue and becomes more muted, unlike a tint, which is mixed with white, or a shade, which is mixed with black.

The sRGB middle gray #808080, rgb(128 128 128). Light colors therefore get slightly darker and dark colors slightly lighter as they approach it; to mix with another gray, use the Color Mixer with your own gray.

With N steps, row k mixes the color with (k - 1) / N gray, so 10 steps give 0%, 10%, 20% and so on up to 90%. The first row is always your original color, and plain gray is never part of the list.

Lowering HSL saturation keeps the HSL lightness, while mixing with gray also pulls the lightness toward the middle. Tones therefore look like the color seen through a gray filter, which suits muted backgrounds and disabled states.

sRGB mixing averages the gamma-encoded channel values, the classic approach of paint-like tone charts and Sass mix(). OKLab mixing happens in a perceptual space, so chroma falls off more evenly from step to step.

Hex codes with or without #, CSS color names, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() and cmyk(). Enter one color per run.

Between 2 and 20 per run, 10 by default. The count includes the original color in the first row.

For each step, the share of gray, the hex code, rgb(), hsl() and oklch() in modern CSS syntax. RGB channels are whole numbers, HSL percentages have up to two decimals and OKLCH lightness and chroma up to four.

The input alpha is kept for every tone, so hex codes then have 8 digits. Out-of-gamut steps are mapped into sRGB with the CSS Color 4 algorithm in the HEX, RGB and HSL columns, while the OKLCH column keeps the unmapped value.

Copy the hex or oklch() value, or let the browser mix it with color-mix(in oklab, var(--brand) 70%, #808080) for the 30% tone of the OKLab setting. color-mix() works in all current major browsers.