Tones Generator
Generate muted, sophisticated tones of any color. Tones reduce saturation while preserving hue — the exact opposite of the vivid, high-contrast colors used in pop design.
What Are Color Tones?
A tone is a color mixed with gray — reducing its saturation while keeping its hue and lightness intact. Unlike tints (mixed with white) and shades (mixed with black), tones feel more muted, sophisticated, and natural. They are the key ingredient in vintage, editorial, earthy, and muted UI design.
Because tones keep the same hue, a scale of tones produces a visually unified palette that looks intentional. Designers use tone scales for background surfaces, secondary text, borders and shadow colors.
How Tones Are Created
In HSL color space, a tone is created by keeping the H (hue) and L (lightness) values constant while reducing the S (saturation) value toward 0%. At S = 0%, the color becomes a pure gray with the same luminance. The scale runs from the fully saturated original color (S = base S) down to a neutral gray.
For example, the tone scale of OmniColor blue (#155EEF) progresses through softer, dustier blues until it becomes a neutral gray-blue at the end.
When to Use Tones
- Editorial and magazine layouts: Muted tones feel print-like and calm.
- Vintage and retro design: Tones give a faded, nostalgic feel.
- Brand systems: Tones can serve as secondary palette colors that don't overwhelm the primary brand hue.
- Backgrounds: Muted tones provide depth without competing with foreground content.
- Data visualization: Muted tone scales are easier on the eye than rainbow palettes.
- UI interfaces: Tone scales are ideal for disabled states and subtle surfaces.
Difference Between Tones, Tints and Shades
- Tints: Add white — lighter but still saturated.
- Shades: Add black — darker but still saturated.
- Tones: Add gray — same lightness, reduced saturation, more muted.