Colour tones generator
Nearest named colour: seagreen
Calculated in your browser · nothing is uploaded
Generates tones: your colour mixed with a grey of its own lightness, which takes the saturation out and leaves the lightness exactly where it started. That is the difference from a shade, which moves lightness by design.
How to use the colour tones generator
Toning is the least-used and most useful of the three operations. Tints and shades both move lightness, which changes contrast and therefore changes what text can sit on the colour. A tone holds lightness and takes out saturation instead, so it stays close to the original in weight while becoming quieter. That makes tones the right tool for a disabled state or a secondary variant: the same visual weight, less shouting. It is also how most "sophisticated" palettes are built: the colours are toned rather than merely darkened.
The grey being mixed in is the colour’s own lightness, not a fixed mid grey, and that distinction is the whole tool. Mixing toward #808080 drags every input toward 50 per cent lightness: a pastel at 90 comes out near 55 and a near-black at 10 comes out near 45, which is a shade wearing a tone’s name. Matching the grey to the input cancels that term and holds the figure exactly.
One honest limit. Holding HSL lightness is not the same as holding contrast, because the WCAG ratio is computed from relative luminance and luminance weights the three channels by how bright the eye finds them. Taking saturation out of a colour moves its luminance a little even when the lightness figure does not budge — enough to take a pair that was sitting on 4.5:1 below it. For a pair anywhere near a threshold, take the toned step to the contrast checker rather than assuming it inherited the original’s verdict.
What people use it for
- Toning down an accent that shouts next to body text
- Deriving a muted variant for a disabled state
- Getting a chart series that reads as one family
- Softening a brand colour for a large background area
Questions
A colour mixed with grey of its own lightness. Saturation drops step by step and the lightness figure does not move.
Because it keeps the lightness, so the colour holds its visual weight while getting quieter, where a shade darkens it. It is not a promise about contrast: the WCAG ratio comes from luminance rather than from HSL lightness, so a toned step drifts a little against the same text and a pair near a threshold has to be re-checked.
Disabled states, secondary variants, and any palette that should read as considered rather than loud.
Effectively yes; mixing with grey and reducing saturation land in much the same place.
HSL, where the middle figure falls step by step and the third holds, which is the whole point of a tone. Copy in hex once you have picked one.