Image saturation — make colours more vivid or more muted

Choose a photo and set saturation as a percentage; 100% leaves it as it is, higher values make colours stronger, lower values fade them toward grey.

Live demo · real result from this tool

Drop images here

or paste with Ctrl+V · nothing is uploaded

Your result appears here — processed on your device.

Processed on your device — nothing is uploaded.

How to use Image Saturation

  1. Choose one or more images.
  2. Set Saturation from 0% to 300%. The default is 140%, a visible but natural boost.
  3. Pick Save as and, for lossy formats, a Quality.
  4. Press Apply and download the result.

What it does and when to use it

Saturation is the strength of colour. Raise it to bring life back to a dull, overcast photo, a faded print scan or product shots that look grey next to a competitor’s. Lower it for a calm, muted, film-like look, to stop a loud background from pulling the eye, or to make text over a photo easier to read.

If the photo also looks flat, try Image Contrast first, because contrast alone makes colours look richer. To change which colours appear rather than how strong they are, use Image Hue Rotate. For a single colour wash over the whole picture, use Image Tint.

How it works

The tool applies the colour matrix defined for CSS saturate() in the W3C Filter Effects specification. With s as the slider value divided by 100:

  • new R = (0.213 + 0.787s)·R + (0.715 − 0.715s)·G + (0.072 − 0.072s)·B
  • new G = (0.213 − 0.213s)·R + (0.715 + 0.285s)·G + (0.072 − 0.072s)·B
  • new B = (0.213 − 0.213s)·R + (0.715 − 0.715s)·G + (0.072 + 0.928s)·B

At s = 1 these give back the original. At s = 0 each channel equals the weighted brightness, so the pixel turns grey. Above 1 each channel is pushed away from that grey. Results are clipped to 0–255, and alpha is unchanged. Everything runs in a background worker on your device; nothing is uploaded.

Worked examples

These values come from the tool’s own function.

Pixel 0% 50% 140% (default)
Warm brown (200, 100, 50) (118, 118, 118) (159, 109, 84) (233, 93, 23)
Sky blue (100, 150, 200) (143, 143, 143) (121, 146, 171) (83, 153, 223)
Middle grey (128, 128, 128) unchanged unchanged unchanged
  • Reviving a dull landscape at 140%. The sky-blue pixel moves from (100, 150, 200) to (83, 153, 223): the blue grows and the red falls, so the sky looks deeper.
  • A muted background at 50%. The warm brown becomes (159, 109, 84), still brown but much softer.

Limits and tips

  • Pure greys, black and white never change.
  • Strong boosts also strengthen JPEG blocks and colour noise. Start low.
  • The same setting applies to every colour; there is no per-colour control.

Frequently asked questions

What does 0% do?
It removes all colour. Each pixel becomes a grey of similar brightness, so 0% works as a quick black-and-white conversion. Image Grayscale does the same job with a slightly different weighting and an amount slider.
Why do skin tones look orange after a boost?
Saturation lifts every colour, and skin is already warm. Strong boosts push it toward orange. Use a smaller boost for portraits than for landscapes.
Why did some colours stop changing?
Channels cannot go above 255 or below 0. A colour that is already pure, such as bright red (255, 0, 0), has nowhere to go, so higher settings leave it the same while duller colours keep catching up.
Does it change brightness?
Only a little. The formula keeps the overall brightness weights of red, green and blue, so a picture should not get much lighter or darker, though clipped channels can shift it slightly.

Written by the ToolsRift team · Last updated

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close