CSS3 filter 속성으로 이미지 채도 조절하는 방법

CSS3에서는 filter 속성의 saturate() 함수를 사용하면 이미지의 채도(색의 선명한 정도)를 간단하게 조절할 수 있습니다. saturate() 값은 백분율(%)로 지정하며, 100%가 원본 상태이고 값이 커질수록 색상이 더욱 선명해집니다. 반대로 0%로 설정하면 이미지가 흑백으로 표현됩니다.

기본 문법

filter: saturation(값);

예제

아래 예제는 동일한 이미지 두 개 중 하나에 saturation(500%)을 적용하여 채도를 크게 높인 결과를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: saturation(500%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

실행 결과

위 코드를 실행하면 첫 번째 이미지는 원본 그대로 출력되고, demo 클래스가 적용된 두 번째 이미지는 채도가 500%로 증가하여 훨씬 더 선명하고 강렬한 색감으로 표시되는 것을 확인할 수 있습니다.

CSS3 filter 속성으로 이미지 채도 조절하는 방법

참고 사항

saturate() 외에도 grayscale(), brightness(), contrast(), hue-rotate() 등 다양한 필터 함수를 함께 조합하여 사용할 수 있으며, 여러 함수를 나열하면 순서대로 순차적으로 적용됩니다. 또한 transition 속성과 함께 사용하면 마우스 오버 시 채도가 부드럽게 변화는 효과도 쉽게 구현할 수 있습니다.