HWB

“Hue, Whiteness, Blackness”의 약자입니다.

HWB는 세 가지 속성으로 색상을 정의하는 색상 모델입니다. 그래픽 디자이너와 웹 디자이너는 색상환에서 한 지점을 지정한 다음, 흰색이나 검은색을 다양한 양으로 추가해 색상의 밝기와 채도를 조정할 수 있습니다. HSB 및 HSL 모델과 마찬가지로, 개별 RGB 값을 수정하는 것보다 직관적으로 색상을 조정할 수 있습니다.

HWB 모델은 다음 세 가지 속성으로 각 색상을 정의합니다:

• 색상(Hue)은 색상환에서 기본 색상이 위치한 각도를 나타내며, 0°에서 359° 사이의 숫자를 사용합니다. 순수한 빨간색은 색상환 맨 위의 0°에 있고, 그다음으로 60°의 노란색, 녹색, 청록색, 파란색, 자홍색이 이어진 후 다시 빨간색으로 돌아옵니다.
• 흰색 양(Whiteness)은 색상환의 순수한 색상에 흰색이 얼마나 섞였는지를 나타내며, 0에서 100% 사이의 백분율로 표시합니다. 흰색 양이 0%이면 색상이 완전히 채도가 높은 상태가 되고, 100%이면 색상의 채도가 완전히 낮아져 흰색으로 보입니다.
• 검은색 양(Blackness)은 순수한 색상에 검은색이 얼마나 섞였는지를 나타내며, 역시 백분율로 표시합니다. 흰색 양과 마찬가지로 검은색 양이 0%이면 색상이 완전히 채도가 높은 상태가 되고, 100%이면 검은색으로 보입니다.

세 가지 HWB 속성을 혼합하는 방식은 페인트를 서로 섞는 것과 매우 비슷합니다. 색상환의 어느 지점에서든 순수한 기본 색상으로 시작한 다음, 흰색이나 검은색을 섞어 밝기를 조정합니다. 흰색과 검은색을 모두 추가하면 색상의 채도가 낮아지고 회색에 가까워집니다. 흰색과 검은색의 합이 100%를 초과하면 값이 정규화되어 합계가 100%가 되고, 흰색과 검은색의 비율은 그대로 유지한 채 회색 음영이 만들어집니다. 예를 들어 흰색과 검은색 값이 각각 50%, 75%, 100%인 HWB 색상은 모두 같은 회색 음영을 만듭니다.

웹 디자이너는 CSS에서 HWB를 사용해 색상을 지정할 수 있습니다. HWB 숫자를 간단히 조정해 기본 색상을 변경하거나 웹사이트의 색상을 밝게, 어둡게 또는 채도를 낮출 수 있습니다. 예를 들어 웹 디자이너가 CSS 코드 hwb(180, 25%, 0%)를 사용하는 색상에서 시작했다면 W 속성을 늘려 색상을 더 밝게 만들거나, W를 줄여 어둡게 만들거나, B 속성을 늘려 채도를 낮출 수 있습니다. HWB는 2014년에 CSS 사양에 색상 지정 방법으로 처음 추가되었지만, 대부분의 주요 웹 브라우저가 이를 완전히 지원하기 시작한 시점은 2022년이었습니다.

NOTE: HWB를 사용해 표현할 수 있는 색상의 범위는 속성 집합만 다를 뿐 RGB와 같습니다. 디지털 이미지에는 여전히 RGB 값으로 저장된 색상 정보가 포함되며, 소프트웨어를 사용하면 색상 값을 RGB 또는 16진수로 쉽게 변환할 수 있습니다.