How to Change the Color of an Image using CSS?

The easiest way in CSS to change the color of an image is to use the filter property. The filter property is used to add visual and graphical effects to the images.

Some examples of these visual effects are color shifting, blur effect, saturation, contrast adjustment, brightness adjustment, and a lot more others.

To change the color of an image the filter property takes the help of some built-in functions. Each of these functions is designed to perform a certain task.

Before going into detail, let’s take a quick example that will change the saturation level of the image and of course will change the image color.

To change the saturation level of images, we use the saturate(%) function with the filter property. This function accepts the saturation in %.

100% is the default which represents the original image. 0% makes the image completely unsaturated. Values higher than 100% add a higher level of saturation to the images which result in a color shift of the image.

See the following example where we have changed the color of an image by setting its saturation to 500%:

Example:

img.saturate{
    filter: saturate(500%);
}

There are several such filter functions available which can help you change the image color. Some of the most commonly used are listed below:

• brightness(%) – Adjusts image brightness
• contrast(%) – Adjusts image contrast
• grayscale(%) – Changes image to gray color
• hue-rotate(deg) – Rotates image color on color circle
• invert(%) – Inverts the color of samples in an image
• saturate(%) – Adjusts the saturation level
• sepia(%) – Adds sepia color to an image

You can read more about these functions and their implementation here – > CSS filter property

In the following example, we have used each of these filter functions individually to change the color of the image. You can try it out to see how each function performs:

Example:

img.saturate{
    filter: saturate(300%);
}
img.grayscale{
    filter: grayscale(100%);
}
img.sepia{
    filter: sepia(100%);
}
img.invert{
    filter: invert(100%);
}
img.hue-rotate{
    filter: hue-rotate(120deg);
}
img.contrast{
    filter: contrast(200%);
}
img.brightness{
    filter: brightness(150%);
}