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:
xxxxxxxxxx1
.element {2
filter: saturate(0.0); /* unsaturated */3
4
filter: saturate(0.5); /* half saturation */5
filter: saturate(50%); /* alternative syntax */6
7
filter: saturate(1.0); /* default saturation - no effect */8
filter: saturate(100%); /* alternative syntax */9
10
filter: saturate(2.0); /* double saturation */11
filter: saturate(200%); /* alternative syntax */12
}
In this example, we color all div elements with yellowgreen color and change their saturation by various values.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
background: yellowgreen;8
}9
10
.saturate-0 {11
filter: saturate(0);12
}13
14
.saturate-50 {15
filter: saturate(50%);16
}17
18
.saturate-100 {19
filter: saturate(100%);20
}21
22
.saturate-200 {23
filter: saturate(200%);24
}25
26
</style>27
</head>28
<body>29
<div class="saturate-0">Element's saturation: 0</div>30
<div class="saturate-50">Element's saturation: 50</div>31
<div class="saturate-100">Element's saturation: 100</div>32
<div class="saturate-200">Element's saturation: 200</div>33
</body>34
</html>Note:
You can also use decimal values instead of percents (e.g.
0.5instead of50%).
