To change the color of an image in CSS, we can take the help of the filter property. The filter property allows you to add visual effects to images such as color shifting, saturation, brightness and contrast change etc.
The filter property takes the help of several built-in functions that allows you to control various visual effect.
To change the color of an image to blue, we have to combine the below three functions with the filter property:
- sepia(%) – Adds sepia color to the image
- hue-rotate(%) – Rotates the image hue on the color circle
- saturate(%) – Adjusts the saturation level
Each of these functions accepts a value in % and by manipulating their values we can add any desired color to the image.
See the following example where we have converted a normal image to its blue version:
Example:
img{
filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}
By adjusting the level of saturation you can achieve different shades of the blue color. So, if you set the saturation to a higher value such as 900%, you will get dark blue color. And if you set the saturation to lower value such as 500%, you will get a light blue color.
However, this depeneds on the original color of your image. This means, setting the saturation to a much higher value might result in an unexpected color or a perfect blue color as well.
So long story short, you should experiment with different levels of the saturation and choose the one whichever suits you the best.
See the following example where we have set the saturation to 900% which adds more blue than 500%:
Example:
img{
filter: sepia(100%) hue-rotate(190deg) saturate(900%);
}
While applying the filter property it is to be remembered that the order of the filter functions does also matter.
This means if you change the order of the sepia(100%), hue-rotate(190deg) and saturate(900%) functions to hue-rotate(190deg), sepia(100%) and saturate(900%), it will make your image sepia instead of blue.
See this example:
Example:
img {
filter: hue-rotate(190deg) sepia(100%) saturate(900%);
}
