색상 조화 이론 — 보색·유사색·삼각 배색

색상 가이드 · ← 목록으로

어울리는 색 조합은 감이 아니라 규칙으로 찾을 수 있습니다. 색을 원형으로 늘어놓은 색상환(color wheel)에서 색들이 이루는 각도 관계를 이용하면, 누구나 안정적으로 조화로운 배색을 만들 수 있습니다. 대표적인 다섯 가지를 살펴봅니다.

색상환이란

색상환은 빨강→주황→노랑→초록→파랑→보라가 원을 따라 이어지도록 배치한 도표입니다. HSL의 색조(Hue) 각도(0~360도)가 곧 색상환에서의 위치입니다. 두 색이 환에서 이루는 각도가 배색의 성격을 결정합니다.

하나의 색조를 고른 뒤 명도와 채도만 바꿔 만든 조합입니다. 가장 안전하고 세련된 느낌을 주며 통일감이 뛰어납니다. HSL에서 색조는 고정하고 L·S만 조절하면 됩니다. 단조로워지기 쉬우니 명도 차를 충분히 두세요.

색상환에서 서로 인접한(약 30도 이내) 색들을 모은 조합입니다. 파랑–청록–초록처럼 자연스럽고 편안한 느낌을 줍니다. 자연 풍경에서 흔히 보이는 배색이라 거부감이 적습니다. 한 색을 주인공으로 정하고 나머지는 보조로 두면 균형이 잡힙니다.

색상환에서 정반대(180도)에 있는 두 색입니다. 파랑–주황, 빨강–초록처럼 대비가 강해 서로를 돋보이게 합니다. 강조 요소를 부각시키기 좋지만, 두 색을 같은 비중으로 넓게 쓰면 눈이 피로해집니다. 한 색을 바탕으로 깔고 반대 색은 강조용으로 소량만 쓰세요.

색상환을 정삼각형으로 나눠 120도씩 떨어진 세 색을 쓰는 방식입니다. 화사하고 균형 잡힌 느낌을 주며 활기찬 디자인에 어울립니다. 세 색을 동등하게 쓰기보다 하나를 주색, 둘을 보조로 다루면 산만함을 피할 수 있습니다.

네 색(두 쌍의 보색) 또는 한 색과 그 보색의 양 옆 색을 쓰는 고급 배색입니다. 표현 폭이 넓지만 색이 많아 조율이 어렵습니다. 따뜻한 색과 차가운 색의 균형을 신경 쓰고, 역시 주·보조의 비중을 분명히 하세요.

어떤 배색 규칙을 쓰든, 색을 같은 양으로 쓰면 어수선해집니다. 흔히 쓰는 60-30-10 법칙은 주색 60%, 보조색 30%, 강조색 10%로 면적을 배분하라는 지침입니다. 비율만 잘 지켜도 조합이 훨씬 정돈돼 보입니다.

기준 색을 hsl(210, 70%, 50%)(선명한 파랑)로 정하고, 색조(H) 각도만 더하고 빼서 세 가지 배색을 실제로 계산해 보겠습니다. 채도(S)와 명도(L)는 70%·50%로 고정합니다.

210 + 180 = 390, 360을 넘으므로 360을 빼면 30도. 즉 hsl(30, 70%, 50%)는 따뜻한 주황이 됩니다. 파랑과 주황은 색상환에서 정확히 마주 보는 보색 관계입니다.

210 − 30 = 180도 → hsl(180, 70%, 50%)(청록), 210 + 30 = 240도 → hsl(240, 70%, 50%)(남보라). 기준 파랑과 함께 세 색을 나란히 쓰면 자연스러운 그러데이션이 만들어집니다.

210 + 120 = 330도 → hsl(330, 70%, 50%)(마젠타 핑크), 210 + 240 = 450, 360을 빼면 90도 → hsl(90, 70%, 50%)(라임 그린). 파랑·핑크·라임 세 색이 정삼각형을 이룹니다.

이렇게 각도만 계산하면 어떤 기준 색에서 출발하든 같은 방식으로 조화로운 배색을 뽑을 수 있습니다. 색상 추출 도구로 뽑은 색의 HSL 값에 이 계산을 그대로 적용해 보세요.

배색 규칙 중 어떤 걸 골라야 할지 모르겠어요.: 안정감이 최우선이면 단색이나 유사색, 강조와 대비가 필요하면 보색, 활기차고 다채로운 느낌이 필요하면 삼각 배색을 추천합니다. 브랜드나 서비스의 톤에 맞춰 고르면 됩니다.
채도와 명도는 그대로 두고 색조만 바꿔도 되나요?: 네, 위 예제처럼 채도·명도를 고정하고 색조 각도만 계산하면 됩니다. 다만 실제 디자인에서는 강조색의 명도를 살짝 높이거나 낮춰 위계를 만드는 것이 일반적입니다.
보색 조합이 촌스러워 보일 때는 어떻게 하나요?: 두 색을 같은 채도·명도로 강하게 맞부딪히면 자칫 유치해 보일 수 있습니다. 한쪽의 채도를 낮추거나(톤다운), 한 색을 넓은 배경에 옅게 쓰고 반대색은 좁은 강조 요소에만 진하게 쓰면 훨씬 세련돼 보입니다.
다크 모드에서도 같은 배색 규칙이 통하나요?: 색조 관계(각도)는 동일하게 적용됩니다. 다만 다크 배경에서는 전반적으로 채도를 낮추고 명도를 조정해야 눈부심 없이 자연스럽게 보입니다.

마음에 드는 이미지에서 한 색을 뽑은 뒤 색상환 관계로 짝을 찾아보세요 → 색상 추출 도구. 고른 색을 실제 시스템으로 정리하려면 브랜드 팔레트 만드는 법을 참고하세요.