Tints, Tones & Shades
Three different ways to modify a color — learn the difference and generate each from any base color, with interactive visualizations.
The difference, in one sentence each
Lighter and softer. Tints appear airy, clean and calm. Used for backgrounds, disabled states and large surfaces.
Darker and richer. Shades convey depth and gravity. Used for pressed states, borders and dark-mode variants.
Muted and neutral. Tones reduce intensity without changing hue. Used for editorial, vintage and minimalist palettes.
When to use each
| Modifier | Effect | Typical UI uses |
|---|---|---|
| Tint | Increases lightness | Hover states, subtle backgrounds, disabled controls |
| Shade | Decreases lightness | Pressed states, borders, active tabs, dark variants |
| Tone | Reduces saturation | Secondary text, muted icons, illustration accents |
How the generator works
The generator interpolates between the base color and white, black or gray in sRGB space. This is the same math used by CSS color-mix(), so the results match what you would get if you mixed the colors directly in a browser. Alpha is preserved throughout.
Frequently asked questions
Why is a tone not simply a desaturated color?
Because mixing with gray affects both saturation and temperature. In HSL terms, saturation decreases but hue is unchanged; however, gray is not a neutral hue but a specific RGB value, so mixing may pull the color slightly toward gray’s warmth or coolness depending on the source.
Are tints and lighter shades the same?
Not exactly. A tint is specifically a mix with white, which lowers saturation. A lighter shade typically refers to reducing lightness in HSL, which does not reduce saturation. In practice the two terms are often used loosely, but they describe slightly different operations.
How many steps should I use in a scale?
Ten steps (like 50–950) is the most common. Five is enough for compact palettes, and twenty gives you nearly continuous gradation for gradients and detailed illustrations.
Does the tool work offline?
Yes. All calculations are done locally in your browser — no network request is made.