Search code examples
csscolorscss-filters

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.

Solution

  • 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!