EN
CSS - change color saturation
0
points
In this article, we would like to show you how to change element's color saturation using CSS.
Quick solution:
.element {
filter: saturate(0.0); /* unsaturated */
filter: saturate(0.5); /* half saturation */
filter: saturate(50%); /* alternative syntax */
filter: saturate(1.0); /* default saturation - no effect */
filter: saturate(100%); /* alternative syntax */
filter: saturate(2.0); /* double saturation */
filter: saturate(200%); /* alternative syntax */
}
Practical example
In this example, we color all div elements with yellowgreen color and change their saturation by various values.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
background: yellowgreen;
}
.saturate-0 {
filter: saturate(0);
}
.saturate-50 {
filter: saturate(50%);
}
.saturate-100 {
filter: saturate(100%);
}
.saturate-200 {
filter: saturate(200%);
}
</style>
</head>
<body>
<div class="saturate-0">Element's saturation: 0</div>
<div class="saturate-50">Element's saturation: 50</div>
<div class="saturate-100">Element's saturation: 100</div>
<div class="saturate-200">Element's saturation: 200</div>
</body>
</html>
Note:
You can also use decimal values instead of percents (e.g.
0.5instead of50%).