보색 찾기이란?

보색 찾기는 입력한 색상에 대해 색상환에서 반대편 색상을 계산합니다. 유사색, 삼색 조화, 분할 보색도 함께 표시되어 통일감 있는 팔레트를 만들 수 있습니다.

내부에서는 chroma-js의 HSL 연산을 사용해 색상환을 정해진 각도로 회전시켜 여섯 가지 배색을 만들어 줍니다. 보색(180°), 유사색(±30°), 삼색조(120°와 240°), 분할 보색(150°와 210°), 사각 배색/스퀘어(90°, 180°, 270°), 그리고 단색조(기본 색상의 명도 변화)입니다. 각 스와치에는 HEX, RGB, HSL 값이 모두 표시되고 어느 형식이든 한 번의 클릭으로 복사할 수 있어 Figma, Tailwind 설정, CSS 규칙에 바로 붙여 넣을 수 있습니다.

사용 방법

1. 1단계 — 기본 색상을 HEX(#FF6600) 또는 RGB(255 102 0) 형식으로 입력하거나 색상 선택기로 고르세요.
2. 2단계 — 보색(색상환에서 180° 반대)과 해당 색상 코드를 즉시 확인하세요.
3. 3단계 — 추가 하모니(유사색, 삼색 조화, 분할 보색)를 탐색하고 원하는 색상 값을 복사하세요.

사용 시기

• 기존 메인 컬러를 기준으로 Adobe Color를 열지 않고 브랜드 팔레트를 잡아 볼 때.
• 페이지 배경 위에서도 도드라지는 CTA 버튼 색상을 고를 때.
• 이웃해서 배치되어도 가독성이 유지되는 차트 시리즈 색을 선택할 때.

결과

브랜드 디자이너가 기본 오렌지 #FF8C00을 입력하면 보색 블루 #0073FF와 함께 유사 난색 계열 #FF4400, #FFB800을 받아 통일감 있는 팔레트를 완성합니다.

자주 묻는 질문

보색과 분할 보색은 어떻게 다른가요?

보색은 색상환에서 정반대에 위치한 한 색(180°)입니다. 분할 보색은 그 반대 색을 양옆에서 감싸는 두 색(150°와 210°)을 가져옵니다. 분할 버전이 한층 부드럽고 전체 UI에 적용해도 충돌이 덜한 편입니다.

매우 어둡거나 아주 옅은 베이스 컬러에서도 조합이 잘 나오나요?

색상 기반 배색(보색, 유사색, 삼색조, 분할 보색, 사각 배색)은 색상만 회전시키고 채도와 명도는 그대로 둡니다. 옅은 베이스에서는 옅은 짝이, 어두운 베이스에서는 어두운 짝이 나옵니다. 단색조는 의도적으로 베이스 색상의 명도를 바꿉니다. 색상 기반 짝이 흐릿하게 느껴진다면 베이스의 채도를 올린 뒤 다시 생성하세요.

미술용 색상환(RYB)인가요, 화면용 색상환(RGB)인가요?

화면용 색상환입니다. 여기서 빨강(#FF0000)의 보색은 시안(#00FFFF)이고, 유화 이론에서 말하는 초록이 아닙니다. 디지털 작업에는 이 모델이 맞고, 실제 물감을 섞는 데 적용하면 어색하게 느껴집니다.

베이스에 따라 보색이 베이스와 거의 같아 보이는 이유가 뭔가요?

순수한 회색은 색상이 정의되지 않아 회전 중심이 없고 같은 회색이 그대로 반환됩니다. 베이스에 5% 정도라도 채도를 더해 주면 보색이 제대로 떨어져 나갑니다.

팔레트 전체를 한 번에 내보낼 수 있나요?

네, 네 가지 방법이 있습니다. 「팔레트 다운로드」는 각 스와치와 HEX 값을 일반 텍스트 파일로 저장합니다. 「CSS 다운로드」는 팔레트를 바로 쓸 수 있는 CSS 사용자 정의 속성(예: --color-complementary-1: #0099FF;)으로 내보냅니다. 「Tailwind 설정」은 tailwind.config.js에 붙여 넣을 수 있는 색상 객체를 만들어 줍니다. 「PNG 이미지」는 팔레트 전체를 라벨이 달린 이미지로 저장해 디자인 리뷰에 유용합니다.

관련 도구