Patrick Roberts Patrick Roberts - 6 months ago 25
CSS Question

What's the difference between CSS3 filter grayscale and saturate?

I am aware that grayscale's range from 0-1 is of course the opposite of saturate's range from 1-0, but other than that do they behave at all differently?

Edit



My question pertains to the behavior of these filters within the range of 1-0 specifically. Do they apply the same algorithm internally or is the manipulation somehow different? I'm not asking for information to simply be quoted from MDN.

Edit 2



Just comparing these with my eyes, they look slightly different but I can't be sure.



@keyframes fadegrayscale {
from {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}

to {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
}

@keyframes fadesaturate {
from {
-webkit-filter: saturate(1);
filter: saturate(1);
}

to {
-webkit-filter: saturate(0);
filter: saturate(0);
}
}

img.grayscale {
animation: fadegrayscale 2s linear alternate infinite;
}

img.saturate {
animation: fadesaturate 2s linear alternate infinite;
}

<img src="http://www.fillmurray.com/200/300" class="grayscale"/>
<img src="http://www.fillmurray.com/200/300" class="saturate"/>




Answer

From MDN

Greyscale

Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

Saturate

Saturates the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If the ‘amount’ parameter is missing, a value of 1 is used.

The range is not 0-1 it's 0 - infinity (effectively).

Yes, functionally, between 0 - 1 (or 0% and 100%) the two are effectively the reverse/inverse of each other but saturate can exceed 100% and add "color" where grayscale cannot.

img {
  -webkit-filter: saturate(300%);
  filter: saturate(300%);
}
<img src="http://www.fillmurray.com/200/300" />

As for EDITED question the answer is "not quite". The effects are managed through manipulation of a color matrix which, I confess, I am not fully to grips with but, per the W3C spec is

Grayscale

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

Saturate

<filter id="saturate">
  <feColorMatrix type="saturate"
             values="(1 - [amount])"/>
</filter>

So it would appear that different calculations are being performed for each.

Comments