Tints & Shades Generator
Generate light/dark variations.
Overview
The Tints & Shades Generator takes a base colour and produces an even ladder of lighter tints (mixed toward white) and darker shades (mixed toward black). Choose the number of steps and the generator returns a full ramp ready for hover states, surface elevations and tonal palettes.
It is the everyday tool for building per-token shade ramps, generating hover and active state colours for buttons, designing surface elevations in a flat UI, and producing tints for chart backgrounds. The generated values plug straight into CSS variables or a Tailwind config block.
How it works
By default the generator interpolates in OKLab between the base colour and pure white (for tints) and between the base and pure black (for shades). OKLab interpolation gives a smooth perceptual progression — equal numeric steps look like equal visual steps, with no muddy mid-tone.
Alternative modes interpolate in sRGB (the classic "mix with white" formula) or in HSL by scaling the lightness component. The OKLab mode is the recommended default; the other modes are exposed for compatibility with existing design tooling that expects them.
Examples
base #3b82f6
tint 25% → #80aff8 shade 25% → #2c62b9
tint 50% → #b8d2fb shade 50% → #1e417b
tint 75% → #d9e6fd shade 75% → #0f213d
base #f97316
tint 50% → #fdb98a shade 50% → #7d3a0b
FAQ
What is the difference between a tint and a shade?
A tint is the base colour mixed with white (lighter). A shade is the base colour mixed with black (darker). Mixing with grey is sometimes called a "tone".
Why use OKLab interpolation?
It avoids the muddy mid-tones that appear when you naively interpolate in sRGB. Tints and shades in OKLab stay on the same hue and feel evenly spaced.
How many steps should a ramp have?
Five is the minimum for buttons (default + hover + active + disabled + focus). Eleven matches the Tailwind 50–950 convention. Beyond fifteen, neighbouring steps become hard to tell apart.
Will the shades pass WCAG contrast?
Possibly — but each step needs to be checked individually against its expected background. Use the contrast checker to confirm.
Can I generate tints toward a non-white colour?
Yes — the tool can interpolate between the base and any chosen target colour, which is useful for "tinted dark mode" ramps that mix toward a deep navy instead of pure black.