보색·삼색·분할보색, 각도로 배우는 색상 조화 이론
디자인 툴에서 "보색"이나 "삼색 조합"을 클릭하면 그럴듯한 색상 조합이 뚝딱 나오지만, 그 뒤에서 실제로 벌어지는 계산은 의외로 단순합니다. 색상환이라는 360도짜리 원 위에서 각도를 더하고 빼는 것이 전부입니다. 이 가이드는 컬러 팔레트 생성기가 실제로 사용하는 HSL 각도 연산을 근거로, 왜 이런 각도 배치가 시각적으로 균형 잡혀 보이는지 원리를 설명합니다.
1. 색상환은 360도짜리 원이다 — HSL의 H값
RGB(빨강·초록·파랑)로 색을 표현하면 두 색이 얼마나 "조화로운지" 감을 잡기 어렵습니다. 반면 HSL(Hue·Saturation·Lightness) 색공간은 색상(Hue)을 0도부터 360도까지의 각도로 표현하므로, 색 사이의 관계를 원 위의 거리로 직관적으로 다룰 수 있습니다. 0도는 빨강, 120도는 초록, 240도는 파랑이고 그 사이를 그러데이션으로 채우면 익숙한 색상환이 됩니다. 색상 조화 이론은 결국 "이 원 위에서 몇 도 떨어진 색을 고를 것인가"에 대한 규칙 모음입니다.
2. 보색(Complementary): 180도 회전이 만드는 최대 대비
보색은 기준 색상에서 정확히 180도, 즉 원의 정반대편에 있는 색입니다. 색상환에서 가장 멀리 떨어진 지점이므로 두 색을 나란히 두면 대비가 가장 강하게 느껴집니다. 빨강(0도)의 보색이 청록(180도)인 것이 대표적인 예입니다. 강렬한 임팩트가 필요한 CTA 버튼이나 포인트 컬러를 고를 때 보색 조합이 자주 쓰이는 이유입니다.
3. 삼색(Triadic): 120도씩 균등 분할
삼색 조합은 360도를 정확히 3등분한 120도 간격으로 세 색을 고릅니다. 원 위에 정삼각형을 그리는 것과 같은 배치입니다. 보색만큼 극단적인 대비는 아니지만 세 색 모두가 원 위에서 균등하게 떨어져 있기 때문에 어느 한 색도 튀지 않으면서 생동감 있는 조합이 만들어집니다. 세 가지 이상의 색이 필요한 로고나 일러스트 팔레트에 적합합니다.
4. 분할보색(Split-Complementary): 보색의 양옆 150도·210도
분할보색은 보색(180도)을 그대로 쓰는 대신, 그 양옆의 150도와 210도 지점을 사용합니다. 즉 정반대 색 하나 대신 정반대에 가까운 두 색을 쓰는 방식입니다. 보색만큼 대비가 강하면서도 완전히 반대되는 색 하나에 의존하지 않기 때문에 더 부드럽고 다루기 쉬운 조합이 나옵니다. 보색 조합이 부담스럽게 느껴질 때 대안으로 자주 추천됩니다.
5. 실제 코드: generateScheme() 함수가 각도를 더하는 방식
컬러 팔레트 생성기의 코드를 확인하면 이 이론이 그대로 구현되어 있습니다. hexToHsl()로 기준 색의 H·S·L 값을 뽑아낸 뒤, generateScheme() 함수 안에서 스킴 종류에 따라 H값에 각도를 더하고 360으로 나눈 나머지(모듈로 연산)를 취합니다.
- 보색:
(h+180)%360 - 삼색:
(h+120)%360,(h+240)%360 - 분할보색:
(h+150)%360,(h+210)%360 - 사색조화(Tetradic):
(h+90)%360,(h+180)%360,(h+270)%360— 90도씩 4등분
모듈로 연산을 쓰는 이유는 각도가 360을 넘어가는 경우(예: 기준 색이 300도일 때 +120 = 420도)를 다시 0~360 범위로 접어주기 위해서입니다. 이렇게 계산된 각도를 다시 hslToHex()로 HEX 코드로 변환해 스와치에 표시하는 것이 전체 흐름입니다.
6. 실전 예시: 기준 색상 #c084fc로 계산해보기
컬러 팔레트 생성기의 기본 색상값은 #c084fc입니다(공교롭게도 modoohub 사이트 자체의 CSS 변수 --purple과 동일한 색입니다). 이 색을 hexToHsl()에 넣으면 대략 H≈270도, S≈95%, L≈75%가 나옵니다. 여기에 각 스킴의 각도 연산을 적용하면 다음과 같습니다.
| 스킴 | 연산 | 결과 H(도) |
|---|---|---|
| 기준색 | H | 270도 (보라) |
| 보색 | (270+180) % 360 | 90도 (연두 계열) |
| 삼색 ① | (270+120) % 360 | 30도 (주황 계열) |
| 삼색 ② | (270+240) % 360 | 150도 (초록 계열) |
| 분할보색 ① | (270+150) % 360 | 60도 (노랑 계열) |
| 분할보색 ② | (270+210) % 360 | 120도 (초록 계열) |
같은 보라색 하나를 기준으로도 어떤 스킴을 고르느냐에 따라 전혀 다른 각도의, 전혀 다른 색상 계열이 나온다는 것을 확인할 수 있습니다. 실제 HEX 값과 명도·채도가 반영된 최종 색은 컬러 팔레트 생성기에서 직접 입력해 확인하는 것이 정확합니다.
7. 각도만으로는 부족하다 — 명도·채도와 접근성
색상 조화 이론은 H(색상) 각도만 다루지만, 실제 디자인에서는 S(채도)·L(명도)와 배경 대비도 함께 고려해야 합니다. 각도상으로는 완벽한 보색이라도 명도 차이가 없으면 눈이 피로해질 수 있고, 텍스트와 배경으로 쓸 경우 WCAG 명암비 기준(일반 텍스트 4.5:1 이상)을 충족하는지 별도로 확인해야 합니다. 색을 고른 뒤에는 색상 대비 검사기로 실제 가독성을 점검하는 것을 권장합니다.
자주 묻는 질문
Q. 보색과 분할보색 중 어떤 것을 써야 하나요?
강렬한 대비가 필요하면 보색(180도)을, 대비는 유지하면서 조금 더 부드러운 느낌을 원하면 분할보색(150도·210도)을 선택하세요. 분할보색은 정반대 색 하나에 의존하지 않아 실전에서 다루기 쉬운 편입니다.
Q. 삼색과 사색조화(Tetradic)는 뭐가 다른가요?
삼색은 360도를 3등분(120도 간격)해 세 색을, 사색조화는 4등분(90도 간격)해 네 색을 씁니다. 색 개수가 많아질수록 팔레트는 다채로워지지만 조합의 난이도도 함께 올라갑니다.
Q. HEX 코드에서 바로 각도를 알 수 없는데 어떻게 계산하나요?
HEX(#RRGGBB)를 RGB로 분해한 뒤 RGB를 HSL로 변환하는 공식을 거쳐야 H값(각도)이 나옵니다. 손으로 계산하기보다는 HEX to RGB 변환기나 컬러 팔레트 생성기를 이용하는 것이 빠르고 정확합니다.
Q. 색맹 사용자를 고려하려면 어떤 조합을 피해야 하나요?
가장 흔한 적록색맹(deuteranopia)을 고려하면 빨강-초록만으로 정보를 구분하는 배색은 피하는 것이 좋습니다. 각도 이론상 보색이라도 색맹 시뮬레이션에서는 구분이 안 될 수 있으니 색맹 시뮬레이터로 미리 확인하세요.