CSS3 hue-rotate 필터로 이미지에 색조 회전 효과 적용하는 방법

CSS3에서는 filter 속성의 hue-rotate() 값을 사용하여 이미지에 간단하게 색조 회전(Hue Rotation) 효과를 적용할 수 있습니다. 이 필터는 이미지의 색상환을 지정한 각도만큼 회전시켜 전체적인 색조를 변화시킵니다.

기본 문법

filter: hue-rotate(각도);

각도는 deg 단위로 지정하며, 0deg는 원본 색상 그대로를 의미합니다. 예를 들어 45deg를 적용하면 모든 색상이 색상환 기준으로 45도 회전된 결과가 나타납니다.

예제 코드

아래 예제는 동일한 이미지 두 개 중 하나에 hue-rotate 효과를 적용해 차이를 비교한 것입니다.

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    filter: hue-rotate(45deg);
}
</style>
</head>
<body>
<h1>원본 이미지</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>hue-rotate(45deg) 적용 이미지</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

실행 결과

위 코드를 실행하면 첫 번째 이미지는 원본 그대로 출력되고, 두 번째 이미지에는 45도 색조 회전이 적용되어 색상이 변화된 것을 확인할 수 있습니다.

CSS3 hue-rotate 필터로 이미지에 색조 회전 효과 적용하는 방법

참고 사항

hue-rotate 값은 음수(-) 각도도 사용할 수 있으며, 360deg를 적용하면 원본과 동일한 결과가 나옵니다. 또한 grayscale(), saturate() 등 다른 CSS 필터 함수와 함께 조합하여 사용하면 더욱 다양한 시각적 효과를 만들 수 있습니다.