HWB 색 모델

정의

HWB 색 모델은 색을 Hue(색상), Whiteness(흰색 비율), Blackness(검정 비율) 세 가지 요소로 표현하는 색 공간이다. 기존의 HSV(Hue‑Saturation‑Value) 모델을 보완하여 색상의 직관적인 조작을 가능하게 하며, 특히 색상 선택 인터페이스에서 사용자가 색을 더 쉽게 조정할 수 있도록 설계되었다.

역사·배경

• 제안 연도: 2014년, W3C의 CSS Color Module Level 4 사양에서 공식적으로 소개되었다.
• 목적: 색상 선택 시 “흰색”과 “검정” 비율을 직접 제어함으로써 색상의 밝기와 명암을 보다 직관적으로 조절하고, HSV에 비해 색상 변환이 간단하도록 하기 위함이다.

구성 요소

제약: W와 B의 합이 1을 초과할 경우, 두 값은 동일 비율로 축소되어 W + B = 1이 되도록 보정된다.

HWB ↔ RGB 변환

HWB → RGB (표준 알고리즘)

1. Hue → RGB 기본 색
   • Hue 값을 0°~360° 구간으로 나누어 6개의 색 구간(R, Y, G, C, B, M) 중 하나를 선택하고, 선형 보간으로 기본 RGB 값을 얻는다.
2. Whiteness와 Blackness 적용
   • 기본 RGB에 흰색 비율 W를 더하고, 검정 비율 B를 뺀다.
   • 각 채널에 대해 R' = (1‑B)·R + W, G' = (1‑B)·G + W, B' = (1‑B)·B + W 로 계산한다.
3. 클리핑
   • 최종값이 0~1 범위를 벗어나면 0 또는 1로 클리핑한다.

RGB → HWB (역변환)

1. Hue 계산
   • RGB를 HSV 변환 과정에서 구한 Hue 값을 그대로 사용한다.
2. Whiteness와 Blackness 구하기
   • W = min(R, G, B) (가장 작은 채널값)
   • B = 1 – max(R, G, B) (가장 큰 채널값을 1에서 뺀 값)
   • W와 B가 겹치는 경우, W' = W / (W + B) , B' = B / (W + B) 로 정규화한다(단, W + B = 0이면 둘 다 0).

장점

• 직관성: 색상의 “밝기”(Whiteness)와 “어두움”(Blackness)을 직접 제어하므로 UI 디자인에서 색상 선택이 직관적이다.
• 간단한 연산: HSV 대비 색상 변환 과정이 비교적 간단하고, 색상 보간 시 부드러운 결과를 얻는다.
• CSS 지원: 최신 웹 브라우저(Chrome, Edge, Firefox 등)에서 CSS hwb() 함수를 통해 직접 사용 가능하다.

단점·제한

• 채도 표현 부재: HSV와 달리 채도(Saturation) 개념이 명시적으로 존재하지 않으며, Whiteness와 Blackness가 채도에 간접적인 영향을 미친다.
• 색상 정확도: 색상의 미세한 차이를 표현할 때 HSV·HSB에 비해 덜 정밀할 수 있다.
• 산업 표준 부재: 그래픽·인쇄 분야에서는 아직 HSV/HSB, CIELAB 등 기존 색 모델이 주류를 이루고 있다.

주요 활용 사례

• 웹 디자인: CSS hwb()를 이용한 색상 선언, 색상 팔레트 생성, 다크 모드/라이트 모드 전환 시 색상 밝기 조절.
• 색상 선택 툴: 포토샵·일러스트레이터 등 일부 그래픽 툴에서 HWB 기반 색상 피커 제공.
• 데이터 시각화: 색상 대비를 손쉽게 조절해 가독성을 높이는 차트·맵 제작.

참고 문서·표준

• W3C CSS Color Module Level 4 – https://www.w3.org/TR/css-color-4/#the-hwb-notation
• “HWB Color Model” – Mozilla Developer Network (MDN) Documentation
• “A Better Way to Represent Colors” – Chris Lilley, 2014 (W3C Working Draft)

이 항목은 백과사전 수준의 정보를 제공하고 있으며, 현재까지 확인된 최신 사양과 구현 사례를 반영했습니다.