보색이란? 색상환 180도로 보는 배색 각도 원리

"보색을 쓰면 대비가 강해진다"는 말은 자주 듣지만, 정작 보색이 정확히 무엇을 기준으로 정해지는 색인지 설명해보라고 하면 막히는 경우가 많습니다. 색상환에서 보색은 감이나 취향이 아니라, 정확한 각도 계산으로 정해지는 위치입니다.

색상환은 색을 원 모양으로 늘어놓은 그림이 아니라, 색을 0도에서 360도까지의 숫자로 표현하는 좌표계입니다. 이 각도 하나만 이해하면 보색·유사색·삼각 배색·사각 배색이 전부 같은 원리에서 나온다는 것을 알 수 있습니다.

요약 ① 색상환의 "각도"는 HSL 색상 모델의 H(색상, Hue) 값이며, 0~360도로 표현됩니다. ② 보색은 이 각도에서 정확히 180도 반대편에 있는 색입니다. ③ 유사색·삼각·사각 배색은 채도·명도는 그대로 두고 이 각도만 30도·120도·90도 간격으로 회전시킨 결과입니다.

색상환의 "각도"는 정확히 어디서 나오는 값인가

우리가 흔히 쓰는 HEX 색상 코드(예: #3B82F6)는 빨강·초록·파랑의 양을 나타내는 값이라 그 자체로는 각도가 아닙니다. 각도는 이 HEX 값을 HSL이라는 다른 모델로 바꿨을 때 나오는 세 가지 값 중 하나입니다.

HSL은 색을 색상(H)·채도(S)·명도(L) 세 축으로 나눕니다. 이 중 채도와 명도는 0~100% 범위의 크기 값이지만, 색상(H)만은 원을 한 바퀴 도는 각도, 즉 0도에서 360도까지의 값으로 표현됩니다. 빨강 근처가 0도, 초록 근처가 120도, 파랑 근처가 240도에 위치하고, 360도를 넘어가면 다시 0도로 돌아옵니다.

즉 "색상환에서 각도가 몇 도인 색"이라는 표현은 사실 "HSL로 변환했을 때 H값이 몇인 색"이라는 뜻과 정확히 같습니다.

보색이 정확히 180도인 이유

보색(Complementary)은 이 원 위에서 기준 색의 정반대 지점에 있는 색을 가리킵니다. 원 한 바퀴가 360도이므로, 정반대 지점은 정확히 절반인 180도 떨어진 위치입니다.

계산 방법은 단순합니다. 기준 색의 색상각을 H라고 하면, 보색의 색상각은 (H + 180)을 360으로 나눈 나머지입니다. 예를 들어 기준 색의 H가 40도면 보색은 220도, H가 300도면 보색은 120도가 됩니다. 360을 넘어가거나 음수가 되면 360을 더하거나 빼서 0~360 범위 안으로 맞춰줍니다.

이때 채도와 명도는 건드리지 않습니다. 보색은 "반대 색상"이지 "반대 밝기"나 "반대 채도"가 아니기 때문에, 두 값은 기준 색과 동일하게 유지한 채 색상각만 180도 회전시킵니다.

유사색·삼각·사각 배색도 결국 같은 각도 계산

보색이 원을 반으로 나누는 것이라면, 다른 배색 규칙들은 원을 다른 간격으로 나누는 방식일 뿐입니다.

유사색은 기준 색 바로 옆의 좁은 범위(여기서는 ±30도)만 사용하므로 색상 각도 차이가 가장 작습니다. 삼각 배색은 360도를 정확히 3등분한 0도·120도·240도 위치의 색이고, 사각 배색은 360도를 4등분한 0도·90도·180도·270도 위치의 색입니다. 어느 쪽이든 채도·명도는 그대로 두고 색상각만 정해진 간격으로 회전시킨다는 계산 규칙 자체는 동일합니다.

각도 차이가 클수록 두 색이 원 위에서 멀리 떨어져 있다는 뜻이므로, 보색(180도)이 유사색(30도)보다 색상 차이가 훨씬 크다는 것은 이 각도 구조에서 그대로 확인되는 사실입니다.

손으로 직접 이 각도를 계산하려면

HEX 코드 하나에서 보색이나 삼각 배색을 손으로 구하려면, 우선 그 HEX를 HSL로 바꿔서 H값(색상각)을 읽어야 합니다. 대부분의 운영체제 색상 선택기나 디자인 툴의 색상 피커에는 HSL 슬라이더가 있어 여기서 H값을 바로 확인할 수 있습니다.

H값을 확인한 뒤에는 원하는 배색의 오프셋(보색은 180, 삼각은 120·240, 사각은 90·180·270)을 더한 다음 360으로 나눈 나머지를 구하면 됩니다. 그 결과 각도와 원래의 채도·명도를 다시 HSL 값으로 조합해 HEX로 되돌리면 됩니다.

문제는 이 변환을 오갈 때마다 HEX→RGB→HSL, 다시 HSL→RGB→HEX로 계산을 반복해야 한다는 점입니다. 배색을 하나가 아니라 네 종류(보색·유사색·삼각·사각) 전부 확인하려면 이 계산을 매번 손으로 반복하는 일이 상당히 번거로워집니다.

직접 해보기 →

도구가 이 각도 계산을 대신 처리하는 방식

색상 조화 도구는 기준 색 하나만 HEX로 입력하면(또는 옆의 색상 선택기로 고르면) 내부적으로 그 색을 HSL로 바꿔 색상각(H)을 구합니다. 이후 앞서 설명한 네 가지 오프셋(0·180 / -30·0·30 / 0·120·240 / 0·90·180·270)을 이 색상각에 그대로 적용해, 보색·유사색·삼각 배색·사각 배색을 한 번에 계산해 보여줍니다.

이때도 원리는 손으로 계산할 때와 동일하게, 채도와 명도는 기준 색 그대로 유지한 채 색상각만 회전시킵니다. 별도의 "계산" 버튼은 없고, HEX 입력값을 바꾸는 즉시 네 구역의 결과가 함께 다시 계산되어 화면에 반영됩니다.

각 배색의 색상 칸 아래에는 계산된 HEX 코드가 그대로 표시되고, 칸마다 복사 버튼이 있어 값을 바로 복사할 수 있습니다. 배색 하나를 통째로 복사하고 싶을 때는 각 구역 아래의 전체 복사 버튼을 쓰면 됩니다. 어떤 배색을 실제로 어디에 쓸지는 결과물을 보고 직접 판단할 부분이며, 이 도구는 어떤 배색이 더 낫다고 정하지 않고 계산 결과만 정확하게 보여줍니다.

정리

• 색상환의 "각도"는 HSL 색상 모델의 H(색상)값이며, 0도에서 360도까지 원을 한 바퀴 돕니다.
• 보색은 이 각도에서 정확히 180도, 즉 원의 정반대 위치에 있는 색으로 정의됩니다.
• 유사색(±30도)·삼각 배색(120도 간격 3등분)·사각 배색(90도 간격 4등분)은 모두 같은 원을 서로 다른 간격으로 나누는 방식입니다.
• 어떤 배색이든 채도·명도는 기준 색과 동일하게 유지하고, 색상각만 정해진 만큼 회전시킨다는 계산 규칙은 동일합니다.
• 색상 조화 도구는 HEX 값 하나만 넣으면 이 네 가지 각도 계산을 동시에 수행해 HEX 코드로 바로 보여줍니다.

자주 묻는 질문

보색은 항상 정확히 180도 차이인가요?

예. 보색(Complementary)은 색상환에서 기준 색의 정반대 위치, 즉 색상각 차이가 정확히 180도인 색으로 정의됩니다. 채도나 명도가 얼마이든 이 각도 관계 자체는 달라지지 않습니다.

유사색의 30도라는 간격은 절대적인 기준인가요?

아닙니다. 유사색은 기준 색 바로 옆의 좁은 각도 범위를 쓴다는 원리가 핵심이며, 색상 조화 도구는 이를 -30도·0도·30도로 계산합니다. 인접 색상이라는 개념 자체가 중요한 것이지, 30이라는 숫자가 유일하게 정해진 절대값은 아닙니다.

삼각 배색과 사각 배색은 각각 색이 몇 개 나오나요?

삼각 배색(Triadic)은 0도·120도·240도로 360도를 3등분해 3개의 색이 나오고, 사각 배색(Tetradic)은 0도·90도·180도·270도로 4등분해 4개의 색이 나옵니다. 두 경우 모두 기준 색을 포함한 개수입니다.

배색을 계산해도 채도나 명도가 같이 바뀌는 건 아닌가요?

바뀌지 않습니다. 보색·유사색·삼각·사각 배색 모두 회전은 색상각(H)에만 적용되고, 채도(S)와 명도(L)는 기준 색과 동일한 값으로 유지됩니다. 그래서 같은 톤을 유지한 채 색상만 다른 배색을 얻을 수 있습니다.