색상 회전

색상 회전 (Filter Hue Rotate)

요소의 색조(hue)를 각도로 회전시키는 유틸리티예요. 색의 톤을 통째로 돌려서 전혀 다른 느낌의 컬러 팔레트를 만들어낼 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

hue-rotate-<number> filter: hue-rotate(<number>deg);

-hue-rotate-<number> filter: hue-rotate(calc(<number>deg * -1));

hue-rotate-(<custom-property>) filter: hue-rotate(var(<custom-property>));

hue-rotate-[<value>] filter: hue-rotate(<value>);

기본 예제 (Basic example)

hue-rotate-90, hue-rotate-180 같은 유틸리티를 사용해 요소의 색조를 각도 단위로 회전시킬 수 있어요.

hue-rotate-15 hue-rotate-90 hue-rotate-180 hue-rotate-270

<img class="hue-rotate-15" src="/img/mountains.jpg" /><img class="hue-rotate-90" src="/img/mountains.jpg" /><img class="hue-rotate-180" src="/img/mountains.jpg" /><img class="hue-rotate-270" src="/img/mountains.jpg" />

음수 값 사용하기 (Using negative values)

-hue-rotate-15, -hue-rotate-45 같은 유틸리티를 사용하면 음수의 색조 회전 값을 설정할 수 있어요.

-hue-rotate-15 -hue-rotate-45 -hue-rotate-90

<img class="-hue-rotate-15" src="/img/mountains.jpg" /><img class="-hue-rotate-45" src="/img/mountains.jpg" /><img class="-hue-rotate-90" src="/img/mountains.jpg" />

커스텀 값 사용하기 (Using a custom value)

hue-rotate-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 색조 회전을 설정할 수 있어요.

<img class="hue-rotate-[3.142rad] ..." src="/img/mountains.jpg" />

CSS 변수를 쓸 때는 hue-rotate-(<custom-property>) 문법을 사용할 수도 있어요.

<img class="hue-rotate-(--my-hue-rotate) ..." src="/img/mountains.jpg" />

이것은 hue-rotate-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

filter: hue-rotate() 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<img class="hue-rotate-60 md:hue-rotate-0 ..." src="/img/mountains.jpg" />

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.