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.

Principle

Answer 1

Here's an online CSS generator to convert to a target color.

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!

Marhtamari

Answer 2

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.

Boatsman

Ah the sepia(100%) was great to get a white image to have color by reducing brightness(0.9) and then applying sepia, the there is a hue for rotating. – Catchings

Why the W3C added something as niche as sepia but not something as mathematically trivial and versatile as a color filter eludes me. – Cavalcade

Answer 3

No need to mess around with the greyscale/sepia hack! You can directly specify a specific color by defining a SVG filter and referencing it from a CSS filter. 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.

Mango

This works. And you can get approximate feColorMatrix color values from RGB here: andresgalante.com/RGBAtoFeColorMatrix – Sinotibetan

I didn't know how to reference the SVG filter, this codepen showed a way: codepen.io/AmeliaBR/pen/JdXpPB – Spermatophyte

fecolormatrix.com also does a nice job and shows a clear code example. – Carmine

Answer 4

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

Toadinthehole