topic★★★★★난이도
색의 3속성과 색상환
색상(Hue), 명도(Value), 채도(Saturation) — 모든 색을 정의하는 세 축과 12색상환.
#색상#명도#채도#HSL#RGB#색상환
왜 배우는가
디자이너가 '이 색을 좀 더 차분하게'라고 말할 때, 실제로는 채도를 낮추거나 명도를 올리는 것이다. 3속성을 알면 색상 조절을 수치로 할 수 있다.
세상의 모든 색은 세 가지 속성으로 분해할 수 있다. 색상(Hue)은 빨강·파랑·노랑처럼 색의 종류를 말한다. 명도(Value)는 밝고 어두운 정도, 채도(Saturation)는 선명하고 탁한 정도다. 이 세 축을 조합하면 인간이 인지하는 모든 색을 표현할 수 있다.
| 속성 | 영어 | 설명 | 조절 효과 |
|---|---|---|---|
| 색상 (Hue) | Hue | 색의 종류 (0°~360°) | 빨강→주황→노랑… 색 자체가 바뀜 |
| 명도 (Value) | Value / Lightness | 밝기 (0%~100%) | 높이면 파스텔, 낮추면 딥톤 |
| 채도 (Saturation) | Saturation / Chroma | 선명도 (0%~100%) | 낮추면 회색에 가까워짐 |
12색상환(Color Wheel)은 1차색(빨강·노랑·파랑), 2차색(주황·초록·보라), 3차색(빨강-주황, 노랑-초록 등)을 원형으로 배열한 것이다. 색상환에서 맞은편에 있는 색이 보색이고, 이웃한 색이 유사색이다. 이 관계가 배색 이론의 출발점이다.
디지털 디자인에서는 RGB(빛의 삼원색)와 HSL(색상·채도·명도)을 함께 쓴다. RGB는 기계가 이해하기 좋고, HSL은 사람이 직관적으로 색을 조절하기 좋다. CSS에서 `hsl(210, 80%, 50%)`처럼 쓰면 '파란 계열, 꽤 선명, 중간 밝기'를 한눈에 읽을 수 있다.
실전 팁 — Figma나 CSS에서 색을 조절할 때는 항상 HSL 모드를 쓰자. Hue만 바꾸면 톤이 유지된 채 색만 바뀌고, Saturation만 낮추면 같은 색조의 뉴트럴 톤을 얻을 수 있다. RGB 숫자를 직접 만지는 것보다 훨씬 예측 가능하다.