CODEWITHSUNDEEP
csscolorscss-filters
mahemoff
mahemoff

Reputation: 46419

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.

Upvotes: 24

Views: 58511

Answers (4)

Michael Mullany
Michael Mullany

Reputation: 31715

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.

Upvotes: 13

danday74
danday74

Reputation: 57026

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!

Upvotes: 12

Mark
Mark

Reputation: 92440

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.

Upvotes: 26

Paul Chamberlain
Paul Chamberlain

Reputation: 199

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

Upvotes: 12

Related Questions