Manipulate the Colors of an Image with CSS

❗NEW❗ Image color palette picker

In CSS, there is the filter property, which is still a working draft but already entirely supported by all modern browsers.

The Sample Images

Here you see the original versions of the images on which we apply the filters in this article.

Tree Lake Mountain


The following sample applies a grayscale of 100% to the images.

filter: grayscale(100%)

Tree with grayscale(100%) Lake with grayscale(100%) Mountain with grayscale(100%)


To blur the image, you can use the blur filter. In the below sample, we use the 2px as value.

filter: blur(2px)

Tree with blur(2px) Lake with blur(2px) Mountain with blur(2px)

You can apply all filters in this article also on any other element. One example is to blur some text; of course, you can still copy the text, or remove the filter via the developer console of the browser.

Some blurred text.

Some blurred text.


The brightness can also be reduced or increased with a filter.

filter: brightness(80%)

Tree with brightness(80%) Lake with brightness(80%) Mountain with brightness(80%)


The following sample applies a contrast of 150% to the images. On all filters where we put percentage values, you can also put decimal values.

filter: contrast(150%)


filter: contrast(1.5)

Tree with contrast(150%) Lake with contrast(150%) Mountain with contrast(150%)

Hue Rotate

Rotate the Hue value of an image by passing a positive or negative angle.

filter: hue-rotate(180deg)

Tree with hue-rotate(180deg) Lake with hue-rotate(180deg) Mountain with hue-rotate(180deg)

filter: hue-rotate(90deg)

Tree with hue-rotate(90deg) Lake with hue-rotate(90deg) Mountain with hue-rotate(90deg)

filter: hue-rotate(-90deg)

Tree with hue-rotate(-90deg) Lake with hue-rotate(-90deg) Mountain with hue-rotate(-90deg)


Inverts the original color of the element by X percent.

filter: invert(80%)

Tree with invert(80%) Lake with invert(80%) Mountain with invert(80%)

Other Elements

Like any other filter, you can apply invert to any other element. If you pass no value, then the default of 100% is used.

A Black Text on Yellow Background inverted by 100%
A Black Text on Yellow Background inverted by 100%


Adds transparency to the image.

filter: opacity(50%)

Tree with opacity(50%) Lake with opacity(50%) Mountain with opacity(50%)


The below sample saturates the image by X percent.

filter: saturate(150%)

Tree with saturate(150%) Lake with saturate(150%) Mountain with saturate(150%)


This filter converts the original image to sepia.

filter: sepia(100%)

Tree with sepia(100%) Lake with sepia(100%) Mountain with sepia(100%)

Combine the Filters

You can combine any number of these filters, but you need to be aware of the order. Adding a grayscale(100%) filter at the end will always return you a gray image.

filter: saturate(150%) hue-rotate(270deg)

Tree with saturate(150%) hue-rotate(270deg) Lake with saturate(150%) hue-rotate(270deg) Mountain with saturate(150%) hue-rotate(270deg)

Wrong Order of Filters

Here you see a sample with the wrong order, which gives you the same result as only calling grayscale(100%).

filter: hue-rotate(270deg) grayscale(100%)

Tree with hue-rotate(270deg) grayscale(100%) Lake with hue-rotate(270deg) grayscale(100%) Mountain with hue-rotate(270deg) grayscale(100%)

Converting Colors

Converting Colors allows you to convert between 17 different color formats like RGB, CMYK, HSV, HSL, CIELab, Android, Decimal, and YUV.

Made with πŸ’˜, 🍺 and 🍫. If you have questions send me an email to [email protected]!

Privacy Policy  ·  Imprint