Image Color Saturation

CSS can be used to alter the color saturation of an image. The filter:saturate() declaration is used to do that.

Saturation 100% is the natural color of the original image. The natural color is the color embedded within the image file. Saturation 0% removes all color and you end up with a grayscale image. Saturation 200% saturates the image with twice the color of the original image.

Here are three prints of an image. The left has its natural colors. The middle's colors are lessened by half. The right has all its color removed.

The left image uses CSS to specify filter:saturate(100%) for 100% saturation. This is the default saturation when the browser publishes an image.

The middle image is desaturated to half the amount of the original image colors. The CSS filter:saturate(50%) declaration is used.

The image on the right has all its color removed. CSS filter:saturate(0%) makes a grayscale image.

Here is the source code for those 3 images.

<img style="filter:saturate(100%); max-width:30%;" src="https://www.willmaster.com/possibilities/images/dessertSceneInJarOnAShelf.jpg" alt="colorful image">
<img style="filter:saturate(50%); max-width:30%;" src="https://www.willmaster.com/possibilities/images/dessertSceneInJarOnAShelf.jpg" alt="colorful image">
<img style="filter:saturate(0%); max-width:30%;" src="https://www.willmaster.com/possibilities/images/dessertSceneInJarOnAShelf.jpg" alt="colorful image">

Now you know how to lessen color saturation of an image.

Here is how to enhance image color saturation.

As stated before, saturation 200% doubles the saturation of colors in an image. It stands to reason, then, that saturation 400% quadruples the color saturation.

Here are three prints of the same image. The left has its natural colors, as the earlier set of three did. The middle's color saturation is doubled. The right's saturation is quadrupled.

The left image is the default image. It uses the default filter:saturate(100%) for 100% saturation.

The middle image is saturated to double the amount of the original image colors. The CSS filter:saturate(200%) declaration is used.

The image on the right, now, has its color saturation quadrupled. CSS filter:saturate(400%) does the trick.

With the above example images, notice that hue and lightness can shift when filter:saturate() is used to specify a saturation above 100%. If that is a concern for the image you are manipulating, then it may be prudent to use professional image software to adjust the saturation.

Here is the source code for that last set of 3 images.

<img style="filter:saturate(100%); max-width:30%;" src="https://www.willmaster.com/possibilities/images/dessertSceneInJarOnAShelf.jpg" alt="colorful image">
<img style="filter:saturate(200%); max-width:30%;" src="https://www.willmaster.com/possibilities/images/dessertSceneInJarOnAShelf.jpg" alt="colorful image">
<img style="filter:saturate(400%); max-width:30%;" src="https://www.willmaster.com/possibilities/images/dessertSceneInJarOnAShelf.jpg" alt="colorful image">

Knowing how to use CSS to quickly adjust the color saturation of images can be a nice skill.

Of course, it generally is better to polish the original image. But sometimes that is impossible either because of time constraints or because the image file is not available.

Whatever the reason, you now have the ability to adjust the color saturation of images when they are published on web pages. Probably, you already see possibilities.

(This content first appeared in Possibilities newsletter.)

Will Bontrager