CSS saturate() Function

Use the saturate() function to adjust the saturation of an image.

The CSS saturate() function is used with the filter property to adjust the saturation levels in an image.

The saturate() function requires an argument to be passed to it. This argument determines the proportion of the saturation that's applied to the image. The argument can be either a percentage value or a number.

Using Percentages

Here's an example using a percentage value to make an image super-saturated:

<style>
  .filtered {
    filter: saturate(200%);
  }
</style>

<img src="/pix/samples/9m.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/9m.jpg" alt="Sample image">

Here's an example using a percentage value to make an image partially saturated:

<style>
  .filtered {
    filter: saturate(70%);
  }
</style>

<img src="/pix/samples/9m.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/9m.jpg" alt="Sample image">

Using Numbers

Here's an example using a number:

<style>
  .filtered {
    filter: saturate(2.5);
  }
</style>

<img src="/pix/samples/9m.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/9m.jpg" alt="Sample image">

Official Syntax

The official syntax of the saturate() function is as follows:

Possible Values

The saturate() function accepts a number or percentage as its argument. This argument determines the proportion of the conversion.

A value of 100% results in an image that's unchanged. A value of 0% results in an image that's completely un-saturated. Other values apply linear multipliers on the effect.

A saturation value over 100% will result in a super-saturated image.

A number value of 0.5 has the same effect as the percentage value 50%. A value of 1 is the same as 100%.

Negative values are not allowed.

CSS Specifications

The saturate() function is defined in Filter Effects Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.