보색 — 빨강의 보색은 청록일까 초록일까, 색상환마다 답이 다른 이유와 HEX 보색 구하는 공식 - Tooly 가이드

2026. 10. 25 작성

보색 — 빨강의 보색은 청록일까 초록일까, 색상환마다 답이 다른 이유와 HEX 보색 구하는 공식

보색은 색상환에서 서로 마주 보는 두 색입니다. 그런데 빨강의 보색은 화면 색(RGB)에서는 청록(시안), 미술 시간의 먼셀 색상환에서도 청록, 물감 색상환(RYB)에서는 초록입니다. 기준으로 삼는 색상환이 달라서입니다. 세 색상환의 보색 짝, 화면 색 코드로 보색을 구하는 두 방법 — 같은 밝기로 마주 보는 색을 주는 공식((가장 큰 값+가장 작은 값)−각 값)과 섞으면 흰색이 되는 짝을 주는 «255에서 빼기» — 이 언제 같고 언제 다른지, 보색끼리 글자를 올리면 왜 잘 안 읽히는지, 분할보색·3색 조화 같은 색조합을 Tooly 색상 선택기 실행값과 코드 계산으로 정리했습니다.


미술 시간에는 빨강의 보색을 청록이라고 배웠는데, 물감을 섞는 설명에서는 초록이라고 하고, 디자인 프로그램에 빨강(#FF0000)을 넣어 보색을 구하면 #00FFFF(시안, 청록)가 나옵니다. 셋 다 틀린 말은 아닙니다. 보색은 «색상환에서 마주 보는 색»이라, 어떤 색상환을 쓰느냐에 따라 보색 관계에 놓이는 색이 달라지기 때문입니다.

색상 휠에서 색 코드 바로 뽑기 →

아래 색 코드의 HSL 값은 Tooly 색상 선택기에 직접 넣어 확인했고, 보색 공식은 프로그램으로 회색을 뺀 1,677만여 가지 색 전부에 대입해 맞춰 봤습니다.

색종이 조각을 둥글게 늘어놓아 만든 색상환

색상환 세 가지, 빨강의 보색은 청록과 초록

기준 화면 RGB 먼셀 물감 RYB
빨강 청록(시안) 청록 초록
노랑 파랑 남색 보라
파랑 노랑 주황 주황
초록 자홍(마젠타) 자주 빨강
팔레트 위의 파랑·청록·노랑 물감 튜브와 짜 놓은 빨강 물감 — 물감 색상환의 기본색
  • 화면 색(RGB): 빛의 삼원색인 빨강·초록·파랑을 섞는 방식입니다. 보색 짝은 빨강–시안, 초록–마젠타, 파랑–노랑이고, 빨강 빛과 시안 빛처럼 보색 두 빛을 최대 세기로 합치면 흰빛이 됩니다(세기가 약하면 회색). 모니터·휴대폰 화면의 색 코드(HEX)가 이 방식입니다.
  • 물감 색상환(RYB): 빨강·노랑·파랑을 기본으로 놓는 전통 화가의 색상환입니다. 보색 짝은 빨강–초록, 노랑–보라, 파랑–주황입니다. 인쇄처럼 시안·마젠타·노랑을 기본으로 보는 방식에서는 화면 색과 같은 짝이 나옵니다(영어판 위키백과 Complementary colors).
  • 먼셀 색상환: 빨강(R)·노랑(Y)·초록(G)·파랑(B)·보라(P) 다섯 색과 그 사이 다섯 색, 주황(YR)·연두(GY)·청록(BG)·남색(PB)·자주(RP)를 둥글게 놓은 10색상환입니다. 먼셀 색체계를 설명한 1921년 책 『A Grammar of Color』에 따르면 빨강에서 원 중심을 지나 직선을 그으면 청록(Blue-Green)에 닿고, 그 색이 보색입니다(먼셀 블로그 보관본).

먼셀 10색상환의 보색 짝은 다섯 쌍입니다: 빨강↔청록, 주황↔파랑, 노랑↔남색, 연두↔보라, 초록↔자주. 한국산업표준(KS)의 색 이름도 먼셀 10색을 기준으로 합니다(한국어 위키백과 색상환). 교과서나 책의 색상환이 먼셀 10색 계열이면 이 짝을, 빨강·노랑·파랑을 기본으로 나눈 12색상환이면 물감 색상환(RYB) 열의 짝을 보면 됩니다. 화면 색을 다룰 때는 RGB 짝을 씁니다.

화면 색(HEX)의 보색 구하는 공식

나란히 놓인 빨강 카드와 청록 카드 — 화면 색의 보색 짝

색 코드(HEX)는 빨강(R)·초록(G)·파랑(B) 세 값을 16진수 두 자리씩(00~FF, 곧 0~255) 적은 것입니다(#4169E1이면 41·69·E1, 곧 65·105·225). 세 값 가운데 가장 큰 값을 최댓값, 가장 작은 값을 최솟값이라 하면, 색상환에서 같은 밝기로 마주 보는 색은 이 공식으로 구합니다.

보색 = (최댓값 + 최솟값) − 각 값

4169E1에서 가장 큰 값은 225, 가장 작은 값은 65라서 합은 290입니다. 290에서 각 값을 빼면 225, 185, 65, 곧 #E1B941입니다. 색상 선택기에 두 코드를 넣어 보니 HSL이 hsl(225, 73%, 57%)와 hsl(45, 73%, 57%)로, 색상(H)만 180° 다르고 채도·밝기는 같았습니다. 이렇게 구한 색은 HSL 색상환에서 색상만 180° 돌린 색, 곧 같은 채도·밝기로 마주 보는 색입니다. CSS 도구 Sass의 color.complement()도 같은 계산입니다(Sass 문서). RGB로 만들 수 있는 색 가운데 회색 256가지를 뺀 16,776,960가지 전부에 대입해 보니, 색상은 정확히 180° 돌아가고 채도·밝기는 그대로였습니다.

«255에서 빼기»는 밝기까지 뒤집는 방식입니다

흔히 쓰는 또 하나의 방법은 각 값을 255에서 빼는 것입니다. 이렇게 하면 원래 색과 섞었을 때 흰색(255, 255, 255)이 되는 짝이 나옵니다. 표준국어대사전이 보색을 «섞여 하양이나 검정이 될 때» 두 빛깔을 이르는 말로 풀이하고(표준국어대사전), 한국어 위키백과가 RGB의 보색으로 드는 식도 이쪽입니다(한국어 위키백과 보색). 이 글에서는 위 공식과 구분하려고 반전색이라고 부르겠습니다.

반전색은 색상뿐 아니라 밝기(L)도 뒤집습니다. 그래서 위 공식의 보색과는 최댓값과 최솟값의 합이 정확히 255일 때(밝기 L이 정확히 50%일 때)만 같고, 이런 색은 전체 1,677만 색 가운데 98,304가지(0.59%)뿐입니다. 반전색은 위 공식의 보색에서 세 값에 똑같이 (255 − 최댓값 − 최솟값)을 더한 색이라, 밝기가 50%에서 멀수록 차이가 커집니다.

원래 색 보색(공식) 반전색(255−값)
#FF0000 · L50% #00FFFF · L50% #00FFFF · L50%
#800000 · L25% #008080 · L25% #7FFFFF · L75%
#0066CC · L40% #CC6600 · L40% #FF9933 · L60%

표의 L은 HSL 밝기입니다. 세 경우 모두 보색과 반전색의 색상은 원래 색의 맞은편으로 같고, 달라지는 건 밝기뿐입니다. 밝기 50%인 빨강(#FF0000)은 둘이 같지만, 어두운 빨강(#800000)의 보색은 같은 밝기의 청록 #008080이고 반전색은 밝은 청록(연한 시안) #7FFFFF입니다. 어두운 색의 반전색은 밝게, 밝은 색의 반전색은 어둡게 나옵니다.

보색끼리 붙이면 선명하지만, 글자는 잘 안 읽힙니다

나란히 놓인 주황 그릇과 파란 그릇 — 보색끼리 붙였을 때의 강한 대비

먼셀 색체계 책은 색상환에서 마주 보는 색을 서로 가장 강하게 대비되는 색으로 설명합니다. 보색 관계인 두 색을 같이 놓으면 서로 더 뚜렷하게 보이는데, 이 현상을 보색대비라고 하고 강조할 때 많이 씁니다. 그런데 보색 배경 위에 보색 글자를 올리면 읽기 어려운 경우가 많습니다. 웹 접근성 지침 WCAG 2.2(성공 기준 1.4.3, AA 등급)는 본문 글자와 배경의 명도 대비를 4.5:1 이상, 큰 글자(18pt 이상, 굵은 글씨는 14pt 이상)는 3:1 이상으로 요구합니다(W3C WCAG 2.2). W3C가 정한 상대 휘도 식으로 보색 쌍의 대비를 계산해 봤습니다.

보색 쌍 명도 대비 본문 글자(4.5:1)
#FF0000 · #00FFFF 3.19:1 미달
#800000 · #008080 2.29:1 미달
#0066CC · #CC6600 1.45:1 미달
#FFD700 · #0028FF 5.45:1 충족

큰 글자 기준(3:1)으로는 #FF0000·#00FFFF(3.19:1)가 겨우 넘습니다. 보색 쌍은 HSL 밝기(L)가 늘 같지만, 글자 대비를 정하는 건 눈이 느끼는 밝기인 상대 휘도입니다. #0066CC·#CC6600처럼 휘도가 비슷한 쌍(0.14와 0.22)은 대비가 1.45:1로 낮고, 노랑(#FFD700, 휘도 0.70)과 파랑(#0028FF, 휘도 0.09)처럼 휘도 차이가 크면 보색이어도 5.45:1이 나옵니다. 보색은 장식이나 강조에 쓰고, 글자는 명도 대비를 계산해 고르는 편이 안전합니다. 명도 대비 기준은 RGB·HEX 색상 코드 글에서도 다룹니다.

보색으로 색조합(배색) 만들기

파랑·노랑·산호색·연두 천 조각이 한 줄로 놓인 모습 — 색상 각도로 만든 색조합

HSL의 색상(H) 각도를 돌리면 보색 말고도 흔히 쓰는 색조합을 만들 수 있습니다. #4169E1(색상 225°)을 기준으로, 채도·밝기는 그대로 두고 색상만 돌린 값입니다.

조합 색상 각도 색 코드
보색 +180° #E1B941
분할보색 +150° · +210° #E16941 · #B9E141
3색 조화 +120° · +240° #E14169 · #69E141
유사색 −30° · +30° #41B9E1 · #6941E1

분할보색은 보색 양옆의 두 색을 쓰는 방법으로, 보색 못지않게 선명한 대비를 주면서 긴장감은 덜하다고 설명됩니다. 유사색은 색상환에서 서로 이웃한 색을 묶는 방법으로, 보통 한 색을 주인공으로 삼고 나머지를 받쳐 씁니다(영어판 위키백과 Color scheme).

무채색에는 보색이 없습니다

흰색에서 검정까지 차례로 놓인 조약돌 사이에 작은 색 구슬 몇 개 — 색상이 없는 무채색

회색·검정·흰색은 색상(H)이 없는 무채색이라 색상환에서 마주 볼 자리가 없고, 색상 기준의 보색은 정해지지 않습니다. 공식에 #808080을 넣으면 가장 큰 값과 가장 작은 값이 같아 그대로 #808080이 나옵니다. 255에서 빼는 반전색은 검정을 흰색으로 바꿉니다. 흰색–검정을 짝으로 부르는 설명도 있지만, 색상이 아니라 밝기를 뒤집은 것입니다.

도구 쓰는 순서

  1. 둥근 색상환 위의 점을 움직여 색상(각도)과 채도(중심에서의 거리)를 고르고, 아래 막대로 밝기(HSV 명도)를 맞춥니다. 표의 HSL 값은 이에 따라 따로 계산돼 나옵니다.
  2. 휠 옆(휴대폰에서는 아래)의 표에서 HEX·RGB·HSL 값을 확인합니다.
  3. 아는 색이 있으면 입력 칸에 HEX 코드를 넣고 Enter를 누르거나 칸 밖을 누릅니다. #FFF처럼 세 자리로 줄인 코드와 # 없이 쓴 4169e1도 받아들였고, 앞뒤에 붙은 빈칸은 지우고 읽었습니다. #GGGGGG 같은 잘못된 코드를 넣으면 입력 칸 아래에 «색 코드로 읽을 수 없습니다» 안내가 나오고 색은 그대로 남습니다.
  4. 보색을 확인하려면 위 공식으로 구한 코드를 다시 넣어, HSL의 색상 숫자가 180 차이 나는지 봅니다(정수로 반올림해 보여 주므로 1 정도 어긋날 수 있습니다).

색 코드 자체의 뜻과 변환은 RGB·HEX 색상 코드 글에 정리돼 있습니다.

자주 묻는 질문

빨강의 보색은 뭔가요?
화면 색과 먼셀 색상환에서는 청록, 물감 색상환에서는 초록입니다. 디자인 작업에서 색 코드로 고른다면 #FF0000의 보색은 #00FFFF입니다.

노랑의 보색은 뭔가요?
화면 색에서는 파랑(#FFFF00 ↔ #0000FF), 먼셀 색상환에서는 남색, 물감 색상환에서는 보라입니다.

보색과 반대색은 같은 말인가요?
표준국어대사전도 반대색을 보색과 같은 말로 풀이합니다. 다만 화면 색 코드에서 «255에서 빼는» 반전색은 색상만이 아니라 밝기까지 뒤집으므로, 같은 밝기로 마주 보는 색과는 대부분 다른 색이 나옵니다.

보색끼리 섞으면 어떻게 되나요?
빛은 보색끼리 최대 세기로 합치면 흰빛, 약하면 회색이 되고, 물감은 섞을수록 탁해져 회색이나 검정 쪽으로 갑니다(물감마다 결과가 다릅니다).

HSL 값은 2026년 10월 25일 Tooly 색상 선택기 실행값, 보색·반전색·명도 대비·색조합은 직접 계산한 값입니다.

목록