Colour Scales

Colour tones generator

Nearest named colour: seagreen

Format

Calculated in your browser · nothing is uploaded

Local · lightness held, saturation lowered
Advertisement
320 × 100

Generates tones. Your colour mixed with grey, which lowers saturation while leaving lightness roughly where it was.

How to use the colour tones generator

1 Set your colour; use the picker, or type a hex value or a CSS colour name.
2 Switch the format if you need RGB, HSL or OKLCH rather than hex.
3 Tap any swatch to copy it, or copy the whole set at once.

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 leaves lightness broadly alone and takes out saturation, so it stays usable in the same places 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.

Questions

A colour mixed with grey. Saturation drops while lightness stays roughly the same.

MDN, CSS color values
Advertisement
300 × 250
Was this tool any good?
Internal signal only · I use it to find the tools worth rebuilding