• CSS Filters For Adjusting Color
  • By Steven Bradley
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: iceytea
  • Proofreader: LGH757079506, Baddyo

SVG provides a non-destructive way to change certain color properties of an image or graph. Unfortunately, some of these changes are a bit more cumbersome to implement. CSS filters allow you to change certain color properties in a non-destructive way and are simpler than SVG filters.

For the past few weeks, I’ve been talking about CSS filters as an alternative to SVG filters. First, I gave an overview of filters and showed an example of the filter function blur(). I then introduced the URL () and drop-shadow() filter functions and provided examples respectively.

Today I want to take you through four other CSS filter functions that are shortcuts to different types and values of the SVG filter function feColorMatrix.

feColorMatrix

FeColorMatrix can be used as a general method to change the basic properties of some colors in an element. As the name suggests, it uses a value matrix to add different filter effects to elements.

There are four different filter functions in the CSS that replicate the effect created using feColorMatrix. This strongly demonstrates that a single SVG filter is more powerful than any single CSS filter function.

Here are the four CSS filters:

  • grayscale();
  • hue-rotate();
  • saturate();
  • sepia();

Let’s explore these CSS filter functions in turn and use them to change the color of this familiar (if you’ve been following this series of articles) image.

grayscale()

Grayscale () converts the image to a grayscale image.

grayscale() = grayscale( [ <number> | <percentage> ] )
Copy the code

You can determine the ratio of converted images by providing a number between 0.0 and 1.0 or a percentage between 0% and 100%. 100% (or 1.0) converts the image completely to grayscale, 0% (or 0.0) does not convert the image. Values between 0.0 and 1.0 (or 0% to 100%) are linear multipliers of the effect. Negative values are not allowed.

In the first example, I passed the filter function a value of 1 to give the image a 100% grayscale effect.

.strawberry {
 filter: grayscale(1);
}
Copy the code

The original image contains a lot of gray, but I think you can still see the effect of the filter because all the color has now been erased.

For comparison, I have listed below the matrix implementation equivalent to the filter function. To be fair, an easier way to remove the color using the feColorMatrix is to set the Type property to saturate. I’ll let you know later.

<filter id="grayscale">
 <feColorMatrix type="matrix"
    values="(0.2126 + 0.7874 * [1-amount]) (0.7152-0.7152 * [1-amount]) (0.0722-0.0722 * [1-amount]) 0 0 (0.2126-0.2126 * [1-amount]) (0.7152 + 0.2848 * [1-amount]) (0.0722-0.0722 * [1-amount]) 0 0 (0.2126-0.2126 * [1-amount]) (0.7152-0.7152 * [1-amount]) (0.0722 + 0.9278 * [1-amount]) 0 0 0 0 0 1 0"/>
</filter>
Copy the code

Still, this example is a good example of how CSS filters are easier to use. I used this particular matrix only because I saw an example of this method in action on the Web. I don’t need to search for the value 1 in the CSS filter function.

hue-rotate()

Hue -rotate() Changes the hue of each pixel in an element by the specified amount.

hue-rotate() = hue-rotate( <angle> )
Copy the code

The Angle parameter is in degrees, and you need to specify the unit as deg. 0deg keeps the element constant, as does any multiple of 360deg (720deg, 1080deg, 1440px, etc.).

In this example, I rotated the hue 225 degrees.

.strawberry {
 filter: hue-rotate(225deg);
}
Copy the code

This value changes the colors of red and yellow to more pink, purple, and blue.

This is an SVG filter for comparison. By comparison, CSS filters are still simpler, but in this case the difference is small.

<filter id="hue-rotate">
 <feColorMatrix type="hueRotate" values="225"/>
</filter>
Copy the code

saturate()

CSS also provides saturate(), which can be used to saturate or de-saturate elements’ colors.

saturate() = saturate( [ <number> | <percentage> ] )
Copy the code

As with the grayscale function, the parameter values of this function define the scale of the conversion. 0% (or 0.0) completely desaturates the element, and 100% (1.0) leaves the element unchanged. Values between 0 and 100 are linear multipliers of the effect.

In this case, I set the element to 50% saturation.

.strawberry {
 filter: saturate(0.5);
}
Copy the code

This produces the following image effect.

Saturate () doesn’t allow negative values, but you can oversaturate elements with values greater than 100% or 1.0. Here’s the effect of applying 900% saturation to the same image (filter: saturate(9);) .

The SVG filter corresponding to Saturate () is also simple.

<filter id="saturate">
 <feColorMatrix type="saturate" values="0.5"/>
</filter>
Copy the code

I mentioned earlier that an easier way to create grayscale images using the feColorMatrix is to set the Type property to Saturate. All you have to do is set the value to 0 to fully desaturate the image, which is the same as setting it to saturate(100%).

sepia()

Finally, sepia() converts the image to tan.

sepia() = sepia( [ <number> | <percentage> ] )
Copy the code

You should be familiar with this notation by now. The values here define the conversion ratio, where 100% (1.0) is fully tan and 0% (0.0) keeps the image the same. From 0% to 100%, the effect increases linearly.

This function does not allow negative values, you can set values greater than 100% (1.0), but the effect will not increase.

Here I set sepia to 75% :

.strawberry {
 filter: sepia(75%);
}
Copy the code

The following image shows the effect of the filter:

FeColorMatrix does not support tan effect mode. To get the same tan effect, you need to use another model.

<filter id="sepia">
 <feColorMatrix type="matrix"
    values="(0.393 + 0.607 * [1-amount]) (0.769-0.769 * [1-amount]) (0.189-0.189 * [1-amount]) 0 0 (0.349-0.349 * [1 - Amount]) (0.686 + 0.314 * [1-amount]) (0.168-0.168 * [1-amount]) 0 (0.272-0.272 * [1-amount]) (0.534-0.534) * [1-amount]) (0.131 + 0.869 * [1-amount]) 0 0 0 0 0 1 0"/>
</filter>
Copy the code

I think SVG gives you more flexibility and simpler CSS filter functions to achieve the same effect.

conclusion

The four CSS filter functions mentioned above are shortcuts to the feColorMatrix. Two of them (Grayscale () and Sepia ()) replace complex matrices, and the other two replace functions of a specific type.

I hope you realize that these four filter functions are easy to use and understand. However, I am afraid that you will encounter some difficulties when using these functions to adjust graphics parameters.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.