So in this movie, we're going to talk about saturate function in CSS image filters, which allows you to saturate the image. So here's a demo, this is the original image, which have 100% saturation and 100% is a default value of this saturate function. But what happens if you go below hundred percent? Well, in that case, you will go into D saturate that image in this case, this image, this image has a 50% saturation which resulted in a D saturated image. If you go Judo percent, it will completely be saturated. But what happens if you go beyond 100% or over 100%?
Well, you are going to Super saturate the image and this is the demo of it. So this have a 200% saturation. Obviously, we will dig deep into coding in a bit, but first, let me tell you that what kind of value as a parameter, the saturate function except, so here is the saturate function and you can pass number or percentage value As a parameter in this saturate function, so now let me just go to my quatre where I'll show you the saturate function in action. So here we go, I'm on my equator. And we are going to work on these last two images, which is image two and Ms three. So let's go to filter here.
And let's target our image two. And here we're going to use this filter property. And in this case, we're going to make use of this saturate function. Well, what happens if I don't pass any value in this saturate function? Well, if I just do that, and if I go here, you see this image is remain unchanged. Why is that?
Well, because by default, the value of this saturate function is hundred percent, and 100% means original image, because only original images have 100% saturation. So let me just prove you that so our target is image three. And here I'm also gonna just grab this picture, and then saturate function. And here I'm gonna pass hundred percent. And now if I save it, if I go here, you will not see any difference in the second or third image. So hundred percent.
Means the original image. So now what happens if you go below 100%? Well you're going to desaturate the image let me show you if I say here 50% then if I go here and you will see that now this is the saturated even if I go lower than that let's say I want this my tardiness to be have a zero percent saturation. If I go here, you see, it's now turning to complete gray and this is fully unsaturated image. So this image do not have any saturation. So this is zero percent, this is 50%.
And this is the hundred percent which is the origin. So this is what's going to happen if you go below hundred percent, but what happens if you go above hundred percent? Well in that case, you will go into super saturate or ultra saturate these color, let me show you. So if I see 150% which is higher than hundred percent, so let me just go here and you see now you have supersaturated result. Obviously you can go crazy or you can see some like a full 100 or 500. So let me just say 500.
And if I go here, you see this is ultra super saturated, right? Obviously, you do not want that kind of saturation. But that's great for demo, right? So let's make it 200, which is a little bit really elastic. If I go here, well, we can definitely want these kind of situations. Okay, so now these are two kind of values, you can pass as a parameter in this separate function.
The first one is the percent and the second one is the number or you can say decimal number. So now I'm passing this 50% as a percent, but if I want that exact 50% as a number, well I can use your 0.5 so now it's represented 50% It's a decimal number. And now if I go here, you will not see any difference in second and third images, you see, they look exactly same, because we have past exactly the same value, but as a different kind of value. In this case, this is a person and this is number. So if you want to hundred percent situation where it is PC two, and this is going to be 200%. Okay?
And now these both values are same. If I go here, second and 30 minutes look exactly the same. So you can pass to kind of value as a parameter. The first one is a decimal number and the second one is the percent, okay? Now here's the most important thing, saturate function do not accept any negative parameter. So if I see hundred minus two, well, it will not work.
If I go here, you see, it's not working. Now it's back to its original saturation, which is 100%. Okay, so remember, do not pass any negative value because negative value don't work here. So yeah, this is all about saturate function. This is how you can saturate your image using saturate function in senses image filters.