css filter to make elements one color

The following CSS filter:

filter: brightness(0) invert(1);

makes elements all-white (source). Neat, but is there a way to make them another color instead, e.g. blue? This is for situations where there is a transparent background, e.g. an icon. I want to make the icon one arbitrary color.

4 Answers

The hue-rotate() filter affects all colors however so it won't turn a full color image into a one color image. Rather it will move all the colors around the color wheel.

However you can hack a solution by converting to grayscale, adding sepia and then rotating the hue This make an image look like a single hue shaded green:

filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

If you care dealing with vector work like an icon that you will use a lot, you might consider converting it to SVG, then you can color it with plain css. can help with this.

If you reference an SVG filter from your CSS, then you can get a specific color. SVG filter snippet below. For your specific color replace the .7/.4/.5 with the unitized value of your RGB values.

<filter color-interpolation-filters="sRGB"> <feColorMatrix type="matrix" values="0 0 0 0 .7 0 0 0 0 .4 0 0 0 0 .5 0 0 0 1 0"/>
</filter>

hue-rotate() is a very impaired filter since it doesn't operate in HSL space. It's an RGB approximation which tends to clip saturated colors badly.

Adding contrast(0) as the first step will flatten the icon's colors to a uniform gray, which I needed for my purposes. I also needed to fiddle with brightness and saturate to hit my target color.

filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(0.28);

Codepen example

Enter any color at this link and it will return the filters you need:

For example, if you enter #CC0000 it will give you:

filter: invert(8%) sepia(97%) saturate(7488%) hue-rotate(12deg) brightness(92%) contrast(114%);

It will also score the result for accuracy. You can keep trying until you get a perfect score.

I believe it assumes your image is black. If its not, to turn the image black first prepend this:

brightness(0) saturate(100%)

So using the earlier example the final solution (if your image is not black) would be:

filter: brightness(0) saturate(100%) invert(8%) sepia(97%) saturate(7488%) hue-rotate(12deg) brightness(92%) contrast(114%);

Now if only someone would write an npm package to do this for you dynamically!