보색이란? 색상환 배색 방법 5가지: 보색·유사색·삼각 배색
이 글은 AI의 도움을 받아 원문을 번역한 글입니다. 전문 용어와 수식은 원문과 함께 확인해 주세요.
보색은 색상환에서 정반대인 180° 위치에 마주 보는 두 색으로, 색상 차이가 가장 크게 나는 조합입니다. 다만 무엇이 ‘반대’인지는 색상환에 따라 달라집니다. 물감 기준의 빨강·노랑·파랑(RYB) 색상환에서는 빨강의 보색이 초록이지만, 화면과 CSS에서 쓰는 RGB/HSL 색상환에서는 빨강(0°)의 보색이 시안(180°)입니다. 보색을 촌스럽지 않게 쓰려면 한 색을 주인공으로 정하고 다른 색은 작은 포인트로만 쓰되, 글자 대비는 따로 확인해야 합니다.
보색이란? 색상환에서 서로 마주 보는 두 색
색상환은 색상(hue)을 원 모양으로 이어 붙여서 두 색이 얼마나 떨어져 있는지 보여 주는 그림입니다. 보색은 이 원에서 가장 멀리 떨어진, 즉 색상 차이가 최대인 두 색입니다. 이 거리 때문에 두 가지 현상이 나타납니다. 나란히 놓으면 서로를 더 선명하게 보이게 하고(파란 화면 위 주황색 버튼이 눈에 띄는 이유입니다), 섞으면 서로를 상쇄해 무채색 쪽으로 향합니다. 물감을 섞으면 회색에, 빛을 섞으면 흰색에 가까워집니다.
이 강한 대비 때문에 보색 배색을 무심코 쓰면 요란해 보이기 쉽습니다. 채도 높은 반대색 두 개를 같은 면적으로 쓰면 서로 시선을 끌려고 다투고, 명도까지 비슷하면 맞닿은 경계가 떨려 보이기도 합니다. 한 색에 주도권을 주고 색상뿐 아니라 명도와 채도도 다르게 가져가는 것이 해결책입니다.
RYB와 RGB 색상환, 보색이 두 가지로 나오는 이유
색상환은 하나가 아닙니다. 미술 시간에 배우는 전통적인 RYB 색상환은 빨강·노랑·파랑 물감을 기본색으로 삼습니다. 화면, CSS, HSL/HSB 색상 선택기의 바탕이 되는 RGB 색상환은 빨강·초록·파랑 빛이 기본색이며, CSS에서는 빨강이 0°, 노랑이 60°, 초록이 120°, 시안이 180°, 파랑이 240°, 마젠타가 300°에 놓입니다. 색상이 원 위에 놓이는 간격이 달라서 ‘정반대’가 가리키는 색도 달라집니다.
| 색 | RYB 색상환(물감)에서의 보색 | RGB/HSL 색상환(화면)에서의 보색 |
|---|---|---|
| 빨강 | 초록 | 시안(180°) |
| 노랑 | 보라 | 파랑(240°) |
| 파랑 | 주황 | 노랑(60°) |
| 초록 | 빨강 | 마젠타(300°) |
| 주황 | 파랑 | 하늘빛 파랑(azure, 210°) |
색을 체계적으로 배열한 표색계까지 보면 세 번째 답이 나옵니다. 10색상으로 구성된 먼셀 색상환에서는 빨강의 맞은편에 청록(blue-green)이 놓입니다. 이 글에서는 RGB의 180°를 시안, 먼셀의 BG를 청록으로 구분합니다.
어느 색상환도 틀린 것은 아니고 쓰임새가 다를 뿐입니다. 물감을 섞을 때는 RYB 도표를, 화면에 쓸 색을 고를 때는 RGB/HSL 색상환을 쓰면 됩니다. 도구마다 기준이 다르다는 점도 알아 두세요. 어도비 직원이 Adobe Color 커뮤니티 포럼에 남긴 답변에 따르면 Adobe Color의 배색 규칙은 RYB 색상환 기반이고, CSS hsl()에서 색상값에 180을 더하면 RGB 색상환 기준의 보색이 나옵니다. LCH나 OKLCH 같은 지각 기반 색 공간은 색상 각도가 또 다릅니다. MDN에 따르면 sRGB의 초록은 sRGB에서 120°이지만 CIELAB에서는 약 134°여서, ‘+180°’를 해도 색 공간마다 보색이 조금씩 달라집니다.
배색 규칙 5가지: 보색·유사색·삼각 배색의 색상 각도
보색은 고전적인 배색 규칙 가운데 하나일 뿐이고, 나머지 규칙도 색상 각도로 정해지는 고정 패턴입니다. 아래 각도는 RGB/HSL 색상환의 빨강(0°)이 기준입니다. 분할 보색(분열 보색)은 보색 대신 그 양옆의 두 색(180°±30°)을, 유사색은 기준색의 양옆으로 한 칸씩(12색 색상환에서 ±30°) 이웃한 색을 씁니다. 이 벌어진 폭은 관례여서 대부분의 팔레트 도구에서 넓히거나 좁힐 수 있습니다.
| 규칙 | 색상 위치(기준 0°) | 특징 | 잘 어울리는 곳 |
|---|---|---|---|
| 보색 | 0°, 180° | 색상 대비 최대. 같은 비율이면 긴장감이 큼 | 눈에 띄어야 하는 포인트 하나 |
| 분할 보색 | 0°, 150°, 210° | 대비는 강하지만 긴장은 덜함 | 대비를 원하는 초보자 |
| 유사색 | 330°, 0°, 30° | 차분하고 통일감이 있음. 대비는 약함 | 배경, 일러스트, 분위기 연출 |
| 삼각 배색(트라이어드) | 0°, 120°, 240° | 활기차고 균형이 잡힘 | 발랄한 디자인, 뚜렷이 구분되는 세 그룹 |
| 사각 배색(테트라드, 정사각형) | 0°, 90°, 180°, 270° | 가장 풍부하지만 균형 잡기가 가장 어려움 | 큰 레이아웃, 경험 많은 디자이너 |
사각 배색은 정사각형뿐 아니라 직사각형도 가능합니다. 간격이 고르지 않은 보색 쌍 두 개를 쓰는 방식으로, 0°, 60°, 180°, 240°가 한 예입니다. MDN의 팔레트 생성 예제도 같은 원리로, 기준 색상에 180°, ±120°, 90° 단위를 더해 보색·삼각·사각 배색 세트를 만듭니다.
보색 배색을 촌스럽지 않게 쓰는 법: 60-30-10 비율
좋은 팔레트는 색마다 역할을 줄 때 나옵니다. 가장 흔한 출발점이 60-30-10 법칙으로, 면적의 약 60%는 주조색(배경처럼 가장 넓은 색), 30%는 보조색, 10%는 강조색(포인트 컬러)으로 나눕니다. 인테리어에서 빌려 온 경험칙일 뿐 엄밀한 법칙은 아니어서, 디자이너들도 출발점으로만 삼습니다.
- 기준 색상 정하기. 콘텐츠, 사진, 브랜드에서 출발점이 될 색을 고릅니다.
- 배색 규칙 고르기. 원하는 규칙을 정하고 색상환에서 짝이 되는 색상을 읽어 냅니다.
- 역할 나누기. 기준색의 옅거나 차분한 버전은 주조색, 더 짙은 버전은 헤더나 패널의 보조색으로 쓰고, 보색은 시선을 끌어야 하는 10%(예: 버튼 하나)에 남겨 둡니다.
- 명도와 채도 달리하기. 주조색이 차분해야 채도 높은 강조색이 다투지 않고 돋보입니다.
- 대비 확인하기. 마무리하기 전에 모든 글자색과 배경색 쌍의 대비를 확인합니다.
그림 3의 카드는 모두 밝은 주조색 배경, 짙은 보조색 헤더, 작은 강조색 하나로 이루어져서 강한 색끼리 같은 자리를 놓고 다투지 않습니다. 예시 팔레트이며, 카드 안 글자색은 모두 대비 4.5:1 이상입니다.
대비 비율과 접근성: 색상 대비는 가독성이 아닙니다
반대 색상이라도 밝기는 거의 같을 수 있는데, 글자를 읽기 쉽게 만드는 것은 색상이 아니라 밝기(명도)의 차이입니다. WCAG 2는 이를 대비 비율 (L1 + 0.05) / (L2 + 0.05)로 계산합니다. L1과 L2는 각각 더 밝은 색과 더 어두운 색의 상대 휘도이고, 결과는 1:1에서 21:1 사이입니다. 성공 기준 1.4.3(레벨 AA)은 일반 텍스트에 4.5:1 이상, 큰 텍스트(18pt 이상 또는 굵은 14pt 이상)에 3:1 이상을 요구합니다. 성공 기준 1.4.11은 사용자 인터페이스 구성 요소와 의미 있는 그래픽 요소에 인접한 색과의 대비 3:1 이상을 요구합니다.
보색 쌍으로 직접 계산해 보면 문제가 분명합니다. 순수 빨강(#FF0000) 글자를 초록(#009900) 배경에 올리면 1.06:1이어서 두 색이 거의 같은 회색으로 보입니다. 주황(#F97316)을 파랑(#2563EB) 위에 올리면 1.84:1, 빨강을 시안(#00FFFF) 위에 올리면 3.19:1로 큰 글자에만 쓸 수 있습니다. 남색(#1E3A8A)을 연한 복숭아색(#FFEDD5) 위에 올리면 9.04:1입니다. 보색은 도형과 포인트에 쓰고, 본문 글자는 팔레트 색 가운데 아주 어둡거나 아주 밝은 버전으로 지정하세요.
색상환 배색에서 자주 하는 실수
- 채도 높은 반대색을 같은 면적으로 쓰기. 한 색이 주도하게 하고 다른 색은 면적을 줄이세요.
- 반대색이면 읽기 쉽다고 생각하기. 모든 글자 쌍이 4.5:1 이상인지 확인하세요.
- 색상환을 혼동하기. RYB 색상환으로 그린 배색표는 HSL 색상 선택기에서 180° 떨어진 짝과 맞지 않습니다.
- 색에만 의존하기. WCAG 성공 기준 1.4.1은 색이 정보를 전달하는 유일한 시각적 수단이어서는 안 된다고 정합니다. 적록 색각 이상이 가장 흔하므로 라벨, 아이콘, 패턴을 함께 쓰세요.
- 60-30-10을 공식처럼 쓰기. 위계를 세우는 데 쓰고, 그다음에는 눈으로 보며 조정하세요.
자주 묻는 질문
파랑의 보색은 무엇인가요?
RYB 색상환에서는 주황입니다. RGB/HSL 색상환에서는 240°의 순수한 파랑이 60°의 노랑과 짝을 이룹니다.
색상 코드(헥스 코드)의 보색은 어떻게 구하나요?
HSL로 바꾼 뒤 채도와 명도는 그대로 두고 색상값에 180을 더합니다. 주황 hsl(30 100% 50%)은 하늘빛 파랑 hsl(210 100% 50%)이 됩니다. 각 RGB 채널을 255에서 빼는 반전도 반대 색상을 주지만 명도까지 뒤집히므로, 어두운 남색이 밝은 황갈색으로 바뀝니다.
보색과 대비색은 같은 말인가요?
엄밀히는 다릅니다. 보색은 색상 차이가 가장 큰 관계이고, 읽기 좋은 대비는 명도 차이에서 나옵니다. RGB 색상환에서는 짙은 파랑과 연한 노랑이 보색이면서 대비도 크지만, RYB 색상환의 순수한 빨강과 중간 밝기의 초록은 보색이어도 밝기가 거의 같습니다.
출처(영문 문서): MDN: CSS <hue> 데이터 타입; MDN: 상대 색상 사용하기(팔레트 예제); W3C: WCAG 2.2 이해하기, 대비(최소); Adobe: 보색 안내서
함께 읽으면 좋은 글
본문의 이해를 돕기 위해 제작한 설명용 삽화입니다.