Shades, Tints & Tones Generator

How it works

These three terms have precise, distinct meanings in color theory that are frequently mixed up in casual design language: a shade lowers lightness toward black at constant hue and saturation, a tint raises lightness toward white at constant hue and saturation, and a tone reduces saturation toward gray while holding lightness roughly constant — three different single-axis moves through HSL space starting from the same base color. Generating a ladder of each means stepping that one axis at fixed intervals (typically five steps) while holding the other two constant, so each ladder isolates exactly one perceptual dimension. This vocabulary predates digital color entirely and comes from physical pigment mixing — a painter literally adds black pigment to darken a shade, white pigment to lighten a tint, and gray (or a color's own complement, in some traditional mixing methods) to mute a tone, and the HSL-axis version implemented here is a direct digital analogue of that centuries-old studio practice.

Worked example

From a base green at HSL(140°, 60%, 45%): its shade ladder steps lightness down toward 15% (progressively darker, near-black greens at the same hue/saturation); its tint ladder steps lightness up toward 90% (progressively lighter, near-white mint greens); and its tone ladder steps saturation down toward 10% (progressively grayer, muted sage greens at the same lightness) — three genuinely different-looking ladders from one starting color, each isolating a different property. A base that starts already fairly muted shows the tone ladder converging faster: from HSL(210°, 35%, 50%) (a dusty slate blue), the tone ladder only needs to travel from 35% down to 10% saturation, a shorter distance than the green example's 60%-to-10% span, so its five steps look visually closer together — a useful illustration that how dramatic a generated ladder looks depends on how far the base color already sits from gray, not just on the number of steps requested.

When to use this tool

Use this when building a numbered design-token scale for a single brand color and you need to decide whether your secondary/muted variants should stay vivid (a tint/shade approach) or go deliberately gray (a tone approach) — the three ladders make that tradeoff visible side by side rather than requiring you to guess and check manually in a design tool. It's also useful when working from a client's or brand guideline's single specified 'brand color' and needing to build out hover, active, disabled, and background variants from that one value alone — the shade ladder is a fast source for a darker 'pressed' button state, the tint ladder for a pale background-fill variant, and the tone ladder for a muted disabled-state color, all derived consistently from the same anchor hue rather than picked separately by eye.

Precision & accuracy

Each ladder step is computed with floating-point HSL math and only rounded to whole-percent lightness/saturation for the final hex conversion, so the five steps in each ladder are evenly spaced by construction — if you need a specific intermediate lightness value not shown in the default five-step ladder, the Color Mixer can blend your base color with black, white, or gray at any custom ratio to hit an exact target. One real precision caveat: HSL lightness steps that are evenly spaced numerically are not necessarily evenly spaced perceptually — human lightness perception is closer to logarithmic than linear, so the visual jump between a 10% and 20% lightness step often looks larger than the jump between 70% and 80%, even though both are numerically identical 10-point steps; a perceptually even ladder would need to be computed in OKLCH's lightness axis instead, which this tool's HSL-based ladder does not attempt to correct for.

FAQ