Ch.4 색채 이론
색의 3속성과 색상환
'빨간색'이라고 다 같은 빨강이 아니다
디자이너에게 '빨간색 좀 바꿔주세요'라고 하면 되묻습니다. '채도를 낮출까요? 명도를 올릴까요?' 같은 '빨강'도 속성이 다르면 전혀 다른 느낌이 됩니다.
RGB, HEX, HSB — 왜 색상 표현 방법이 이렇게 많은 거지?
색을 정확하게 소통하려면 속성을 분리해서 이해해야 합니다. 디자이너의 언어를 배워봅시다.
핵심 내용
모든 색은 세 가지 속성의 조합으로 설명됩니다
색상 (Hue)
색상환에서의 위치입니다. 빨강, 주황, 노랑, 초록, 파랑, 보라 — 우리가 '색 이름'이라고 부르는 것이 바로 Hue입니다. 0°~360°의 각도로 표현합니다.
채도 (Saturation)
색의 선명함 정도입니다. 채도 100%는 가장 선명한 원색, 0%는 회색입니다. 채도를 낮추면 색이 '빠져서' 파스텔톤이 되고, 더 낮추면 무채색에 가까워집니다.
명도 (Brightness/Value)
색의 밝기입니다. 명도 100%는 가장 밝은 상태, 0%는 검정입니다. 같은 빨강이라도 명도가 높으면 밝은 빨강, 낮으면 어두운 빨강(와인색)이 됩니다.
색상 = 무슨 색 / 채도 = 얼마나 선명 / 명도 = 얼마나 밝은
같은 색, 다른 표현 방법 — 각각의 쓰임이 다릅니다
실전 팁: 어떤 모델을 쓸까? • 색을 선택·조정할 때 → HSB (직관적) • 코드로 구현할 때 → HEX 또는 RGB • 투명도가 필요할 때 → RGBA (RGB + Alpha) Figma에서 HSB로 색을 잡고, 개발자에게 HEX로 전달하는 것이 일반적인 워크플로입니다.
색상환은 모든 배색 이론의 출발점입니다
색상환(Color Wheel)은 색상(Hue)을 원형으로 배열한 것입니다. 12색상환이 가장 기본적이며, 3가지 레벨로 나뉩니다:
12색상환
색상환에서 마주보는 색은 보색, 인접한 색은 유사색입니다. 다음 레슨에서 이 관계를 활용한 배색 유형을 자세히 다룹니다.
디지털 디자인에서는 빛의 삼원색(RGB) 기반 색상환을 사용합니다. 미술 시간의 물감 색상환(RYB)과는 다릅니다.
Figma에서 색을 직관적으로 조정할 때 가장 적합한 색상 모델은?
채도(Saturation)를 0%로 낮추면 검정색이 된다
핵심 용어
HSB (HSV)
Hue(0-360°) + Saturation(0-100%) + Brightness(0-100%). 디자이너가 색을 '직관적으로' 조작할 때 사용. Figma의 컬러피커가 HSB 기반.
RGB
Red(0-255) + Green(0-255) + Blue(0-255). 빛의 삼원색 혼합. 모니터가 실제로 색을 표현하는 방식. CSS에서 rgb(255, 87, 51) 형태로 사용.
HEX
RGB를 16진수로 압축 표현. #FF5733 = R:FF(255) G:57(87) B:33(51). 웹 개발에서 가장 널리 쓰이는 표기법.
핵심 정리
- 1색의 3속성: 색상(Hue) + 채도(Saturation) + 명도(Brightness)
- 2HSB → 디자인 도구에서 직관적 조정용
- 3RGB/HEX → 코드 구현용, RGBA는 투명도 포함
- 412색상환: 1차색(3) + 2차색(3) + 3차색(6)
- 5디지털 = RGB 기반 색상환, 미술 = RYB 기반
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작