css filter to make elements one color

Question

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.

Answer 1

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. https://icomoon.io can help with this.

Answer 2

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 id="colorme" 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.