SVG Saturation Filter

feColorMatrix with type="saturate" adjusts color intensity, letting SVG content appear more vibrant or more muted on demand.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Adjusting Saturation with a Single Value

Setting feColorMatrix's type to saturate along with a values attribute between 0 and higher numbers controls color intensity directly — a value of 0 produces full grayscale, 1 leaves colors unchanged, and values above 1 boost saturation beyond the original, all through one simple numeric parameter.

A single numeric value controls the entire saturation adjustment
0 produces full grayscale, 1 is unchanged, higher values boost saturation
Simpler single-parameter alternative to a full custom color matrix

Practical Uses for Adjustable Saturation

Reduced saturation is popular for a muted, professional aesthetic on background decorative illustrations, while boosted saturation suits attention-grabbing call-to-action icons, and both directions are commonly toggled based on hover, disabled, or selected states without needing separate pre-adjusted image assets.

Reduced saturation suits muted, professional background decorative elements
Boosted saturation suits attention-grabbing call-to-action icon styling
Commonly toggled by interaction state without separate pre-adjusted assets

Frequently Asked Questions

What's the difference between saturate and grayscale color matrix types?

Grayscale is effectively saturate set to exactly 0 — the saturate type gives you the full adjustable range from fully desaturated through unchanged to boosted, rather than only the fully grayscale endpoint.

Can saturation adjustments be combined with other color filters in one chain?

Yes, multiple feColorMatrix primitives (or a combination with feGaussianBlur, feColorMatrix hueRotate, and others) can be chained together within one filter element for a combined, layered visual effect.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG