[UI 디자인] HSB · RGB · HEX 정리

디자인을 하다 보면 색을 표현하는 방식인 HSB, RGB, HEX 값을 자주 마주하게 됩니다.
피그마(Figma)나 포토샵 같은 도구에서도 이 세 가지를 모두 지원하고 있기 때문에
각 모델의 의미와 차이를 이해해 두면 색을 다루는 데 훨씬 수월해집니다.

 

이번 글에서는 아래 순서대로 색상 모델을 정리해보겠습니다.

 

1. HSB(Hue · Saturation · Brightness)

HSB는 사람이 색을 인지하는 방식에 가까운 색상 모델입니다.
그래서 디자이너들이 실제로 “색을 고르는” 단계에서 가장 많이 사용합니다.

이미지 기준으로 설명하면:

 

1️⃣ Hue (색상)

• 0° ~ 360° 색상환 위에서 색의 종류를 의미
• 빨강(0°), 노랑(60°), 초록(120°), 파랑(240°), 보라(300°) 등
• “어떤 색인가?” 를 결정하는 요소

2️⃣  Saturation (채도)

• 색의 선명함
• 0 → 무채색(회색)
• 100 → 가장 선명한 색
• “얼마나 강한 색인가?”

3️⃣ Brightness (명도)

• 색의 밝기 정도
• 0 → 완전 검정
• 100 → 가장 밝은 상태
• “얼마나 밝은가?”

HSB는 인간의 감각 기반 모델이기 때문에 ‘색을 선택하는 과정’에 매우 적합합니다.

 

 

 

2. RGB(Red · Green · Blue)

RGB는 디지털 디스플레이(모니터, TV, 스마트폰)에 사용되는 광원 기반 색상 모델입니다.
즉, 빛의 세기 조합으로 색을 만드는 방식입니다.

 

1️⃣ 특징

• 0~255의 숫자 조합으로 색을 표현 (예: R 120, G 45, B 200)
• 빛을 더할수록 밝아지며,
  • R+G+B = 흰색
  • 모두 0 = 검정
• 화면에 실제로 출력되는 색상 그대로를 표현

HSB로 색을 선택하고 → RGB로 장치 출력용 색을 확인하는 흐름이 일반적입니다.

 

3. HEX(헥스 코드)

HEX는 보통 웹에서 색을 표현할 때 사용하는 16진수 색상 코드입니다.

예시:

• #FF5733
• #4F46E5

HEX는 RGB 값을 16진수로 변환한 형태이기 때문에
결국 RGB 기반 색상 체계입니다.

 

1️⃣ 특징

• 웹/CSS에서 가장 표준적으로 사용
• 한 줄 코드로 색을 지정하기 편리
• 가벼우면서 명확한 표현 방식

HEX는 결국 RGB를 압축 표현한 방식이기 때문에
정확한 색상 재현 측면에서는 RGB와 동일한 색을 나타냅니다.

 

4. HSB → RGB → HEX 순서가 자연스러운 이유

디자인 작업 과정은 보통 아래 흐름으로 진행됩니다.

 

1️⃣ HSB로 색을 선택한다

– “어떤 색?”, “얼마나 밝게?”, “채도는?” 직관적으로 조절

 

2️⃣ RGB로 장치(모니터·앱)에서 정확한 색을 표현한다

– 실제 출력 색상 확인

 

3️⃣ HEX로 웹 또는 코드에 적용한다

– CSS, HTML, 개발 환경에서 사용

 

즉,
👉 HSB → RGB → HEX
이 순서는 실제 디자인–개발 협업 흐름과 가장 잘 맞는 순서입니다.

 

 

 

정리하면

 

HSB는 색의 감성적 선택,
RGB는 디지털 화면 출력,
HEX는 코드 적용에 최적화된 표기 방식입니다.

 

이 세 가지가 함께 쓰이는 이유는
각 색상 모델이 서로 다른 목적에 최적화되어 있기 때문입니다.