보색 찾기
어떤 색이든 보색(반대색)과 RGB 반전색, 그리고 그 위에 사용할 읽기 쉬운 텍스트 색상을 찾아드립니다.
조회수 1,310회
작동 방식
두 색은 색상환에서 정확히 반대 지점, 즉 색조(Hue)가 180° 떨어져 있을 때 보색 관계에 있다고 합니다. 수학적으로 이 도구는 입력한 색을 HSL 모델로 변환한 뒤 그 색조 값에 180을 더하고 360으로 나눈 나머지를 취합니다 — 예를 들어 색조 40°(주황색)는 220°(파란색)가 됩니다. 채도와 명도는 그대로 유지되므로, 보색은 임의의 다른 색이 아니라 색상환을 따라 정확히 회전한 색입니다. 나란히 놓으면 보색끼리는 서로를 시각적으로 더욱 돋보이게 하므로, 기준 색상이 주가 되는 디자인에서 눈에 띄어야 하는 강조 요소·버튼·행동 유도 버튼에 보색이 자연스럽게 어울립니다.
이 효과는 인간의 시각 자체에 근거를 두고 있습니다. 채도가 높은 색을 몇 초간 응시한 뒤 흰색 배경을 보면 그 색의 보색에 가까운 색으로 일시적인 잔상이 나타납니다 — 이는 망막의 색을 감지하는 원추세포가 일시적으로 피로해져 생기는 실제 생리적 현상입니다. 보색 쌍이 함께 있을 때 특히 선명하고 "살아 있는" 느낌을 주는 이유도 여기에 있습니다. 눈이 잔상을 만들어내는 것과 같은 메커니즘에 의해 미리 준비되어 있기 때문입니다. 보색과 함께 이 도구는 RGB 반전색(각 채널을 255에서 뺀 값, 이른바 "사진 네거티브")과, 입력한 색의 지각 명도를 기준으로 판단한 읽기 쉬운 텍스트 색상(검정 또는 흰색)도 함께 계산합니다.
알아두어야 할 사항
- 보색과 반전색은 같은 연산이 아닙니다. 완전히 채도가 높은 색에서만 두 결과가 우연히 일치하며, 채도가 낮거나 파스텔 톤, 무채색에서는 두 계산 결과가 눈에 띄게 달라집니다.
- 보색은 아껴서 사용하십시오. 완전한 채도의 보색 두 가지를 동일한 비율로 함께 쓰면 시각적으로 진동하는 듯한 느낌을 주어 눈이 쉽게 피로해집니다. 90 대 10 정도의 비율이 의도적으로 정돈된 느낌을 줍니다.
- 텍스트 색상 제안은 출발점일 뿐 WCAG 기준을 보장하지 않습니다. 본문 텍스트에 사용하기 전에 전용 대비 검사 도구로 실제 대비 비율을 확인하십시오.
- 예시:
#2563EB(중간 톤 파란색, 색조 ≈ 221°)의 경우 보색은 색조 41° 부근(따뜻한 호박/주황색)이 되고 RGB 반전색은#DA9C14입니다. 원본 색이 상당히 채도가 높기 때문에 여기서는 두 결과가 시각적으로 비슷한 영역에 있지만, 채도가 낮은 회청색에서 출발하면 두 방식은 크게 갈라집니다.
자주 묻는 질문
보색과 반전색 — 차이가 무엇인가요?
보색은 채도와 명도는 그대로 두고 색상환에서 색조만 반대로 바꿉니다(+180°). RGB 반전색은 각 채널을 독립적으로 반전시킵니다(255−R, 255−G, 255−B), 마치 사진 네거티브처럼요. 채도가 높은 원색에서는 둘이 비슷해 보일 수 있지만, 중간 회색이나 파스텔 톤에서는 크게 달라집니다 — 중간 회색의 반전색은 여전히 중간 회색이지만, 완전히 채도가 없는 색은 회전시킬 색조 자체가 없으므로 그 "보색"은 기술적으로 정의되지 않습니다.
한 색을 응시하다가 시선을 돌리면 왜 그 보색이 보이나요?
이는 "잔상" 효과입니다. 특정 색을 감지하는 망막의 원추세포는 오래 노출되면 일시적으로 피로해집니다. 그 상태에서 중립적인 흰색 표면을 보면, 피로해진 세포는 반응이 약해지는 반면 다른 세포는 정상적으로 반응하고, 뇌는 이 불균형을 보색을 보는 것으로 해석합니다 — 이는 망막의 화학 작용에 뿌리를 둔 진짜 생리적 현상이며, 착시나 마음의 속임수가 아닙니다.
보색은 언제 사용해야 하나요?
기준 색상이 지배적인 디자인 위에 버튼, 링크, 강조 표시, 배지 같은 작고 의도적인 포인트로 사용하는 것이 좋습니다. 두 색을 최대 채도로 거의 같은 비율로 함께 사용하면 정돈된 느낌보다는 시각적으로 진동하는 듯한 느낌을 주어 눈을 피로하게 만드는 경향이 있습니다. 디자이너들은 보통 둘 중 하나의 채도를 낮추거나 어둡게 만들어 효과를 부드럽게 조절합니다.
읽기 쉬운 텍스트 색상은 어떻게 정해지나요?
색의 지각 명도를 YIQ 공식으로 계산해 정해집니다. 이 공식은 인간의 눈이 각 색에 얼마나 민감한지에 따라 빨강·초록·파랑에 가중치를 둡니다(초록은 파랑보다 지각 밝기에 훨씬 더 크게 기여합니다). 밝은 배경에는 어두운 텍스트를, 어두운 배경에는 밝은 텍스트를 배치하여 한눈에 읽기 쉬운 조합을 유지합니다.
왜 하필 180°이고 다른 각도는 아닌가요?
색상환은 색조를 360° 순환으로 나타내며, 180°는 주어진 어떤 색조로부터도 각도상 최대 거리에 있는 수학적으로 유일한 지점입니다 — 같은 색상환 위에 있으면서 한 색이 다른 색으로부터 가질 수 있는 가장 먼 거리입니다. 이러한 최대 간격이 바로 가장 강한 시각적 대비를 만들어냅니다. 삼각조화에 쓰이는 120°처럼 더 작은 각도는 두 색이 아니라 세 색 사이의 균형을 위해 그 대비의 일부를 양보하는 것입니다.
비슷한 도구
문제 신고하기
보색 찾기
댓글
아직 댓글이 없습니다 — 첫 댓글을 남겨보세요!