CSS hwb() 함수

정의 및 사용법

CSS의 hwb() 톤-화이트-검은색 모델(HWB)을 사용하여 색상을 지정할 수 있습니다. 선택 사항으로 투명도 채널을 추가할 수 있습니다.(색상의 투명도를 나타냅니다).

예제

다른 HWB(A) 색상을 정의합니다：

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p2 {background-color:hwb(120 40% 20%);}
#p3 {background-color:hwb(120 40% 20% / 20%);}
#p4 {background-color:hwb(240 40% 20%);}
#p5 {background-color:hwb(240 50% 10%);}
#p6 {background-color:hwb(240 40% 20% / 0.3);}
#p7 {background-color:hwb(300 40% 20% / 0.5);}
#p8 {background-color:hwb(360 40% 20%);}
#p9 {background-color:hwb(360 90% 0%);}

직접 시험해 보세요

CSS 문법

절대적인 값 문법

hwb(hue whiteness blackness / A)
값 설명
hue

필수 사항. 색环상의 각도(0에서 360)를 정의합니다. 0(또는 360)은 빨강, 120는 녹색, 240는 파란색입니다.

none(0deg에 해당)를 사용할 수도 있습니다.
whiteness

필수 사항. 혼합의 백도를 정의합니다. 0%는 백도가 없음, 100%는 완전 백도를 의미합니다.

none(0%에 해당)를 사용할 수도 있습니다.
blackness

필수 사항. 혼합의 어둠을 정의합니다. 0%는 어둠이 없음, 100%는 완전 어둠을 의미합니다.

none(0%에 해당)를 사용할 수도 있습니다.
/ A

선택 사항. 색의 불투명도 채널 값을 나타냅니다. (0%（또는 0）는 완전 투명, 100%（또는 100）는 완전 불투명을 의미합니다).

none(불투명도 채널을 의미)를 사용할 수도 있습니다.

기본 값은 100%입니다.

상대적인 값 문법

hwb(from color whiteness blackness / A)
값 설명
from color

키워드 'from'으로 시작하고 원래 색상을 나타내는 색상 값이 따릅니다.

이는 상대적인 색상이 기반한 원래 색상입니다.
hue

필수 사항. 색环상의 각도(0에서 360)를 정의합니다. 0(또는 360)은 빨강, 120는 녹색, 240는 파란색입니다.

none(0deg에 해당)를 사용할 수도 있습니다.
whiteness

필수 사항. 혼합의 백도를 정의합니다. 0%는 백도가 없음, 100%는 완전 백도를 의미합니다.

none(0%에 해당)를 사용할 수도 있습니다.
blackness

필수 사항. 혼합의 어둠을 정의합니다. 0%는 어둠이 없음, 100%는 완전 어둠을 의미합니다.

none(0%에 해당)를 사용할 수도 있습니다.
/ A

선택 사항. 색의 불투명도 채널 값을 나타냅니다. (0%（또는 0）는 완전 투명, 100%（또는 100）는 완전 불투명을 의미합니다).

none(불투명도 채널을 의미)를 사용할 수도 있습니다.

기본 값은 100%입니다.

기술 세부 사항

버전: CSS Color Module Level 4

브라우저 지원

표에 나타난 숫자는 이 함수를 최초로 완전히 지원한 브라우저 버전입니다.

크롬 에지 파이어폭스 사파리 오페라
hwb()
101 101 96 15 87
파라미터에서 숫자와 백분율을 혼합
121 121 122 지원하지 않음 107

관련 페이지

참조:CSS 색상

참조:CSS hsl() 함수

참조:CSS lab() 함수

참조:CSS lch() 함수

참조:CSS oklab() 함수

참조:CSS oklch() 함수