23

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 4

23

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.

2
  • 1
    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.
    – OG Sean
    Apr 13, 2021 at 2:44
  • 3
    Why the W3C added something as niche as sepia but not something as mathematically trivial and versatile as a color filter eludes me. May 20, 2022 at 0:55
12

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.

3
11

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

8

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!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.