Illustration: Color relationships displayed on a color wheel.
Illustration: Color relationships displayed on a color wheel.
Source colors

Illustrative preview

대화형 색상환 - 어울리는 색상 조화 찾기

보색, 유사, 삼원, 사원, 정사각형 색 구성표를 찾아보세요. HEX, 채도, 밝기를 조정한 다음 계정 없이 일치하는 색상을 무료로 복사하세요.

드래그하여 기본 색상을 선택하세요. 모든 클래식 하모니에 대한 16진수 코드를 복사하세요.

HEX / CSS 색상
조화

컬러 휠 조화 이해하기

보색

보색은 컬러 휠에서 서로 정반대에 위치한 색입니다 — 파란색과 주황색, 빨간색과 초록색처럼요. 가장 강한 대비와 생동감을 만들어내기 때문에 디자인이 활기차게 느껴지고 행동 유도 버튼이 눈에 띄게 됩니다. 시각적 긴장감을 피하려면 한 색을 주색으로 쓰고 보색은 포인트로만 적게 사용하세요.

분할 보색

분할 보색 배색은 기본 색상 하나와 그 보색 양옆에 있는 두 색상을 사용합니다. 보색 배색의 높은 대비는 유지하면서도 긴장감은 한결 누그러뜨려, 실패하기가 훨씬 어려운 조합입니다. 주색 하나에 보조 악센트 두 개로 이루어진, 자연스럽게 균형 잡힌 결과를 얻을 수 있는 훌륭한 입문용 배색입니다.

유사색

유사색 배색은 노랑, 연두, 초록처럼 색상환에서 서로 인접한 세 가지 색을 사용합니다. 인접한 색들은 색조의 바탕이 비슷하기 때문에 노을이나 숲처럼 차분하고 조화로우며 자연스러운 느낌을 줍니다. 한 가지 색을 주색으로 정하고 나머지 인접색은 보조로 활용하며, 대비를 위해 무채색을 하나 더해보세요.

삼색 조화

3색 배색은 빨강, 노랑, 파랑처럼 색상환에서 120도씩 고르게 떨어진 세 가지 색을 선택합니다. 옅거나 채도를 낮춘 버전을 사용해도 생동감이 유지되며, 인접한 색조가 없어 균형이 잘 잡힙니다. 한 가지 색을 주색으로 삼고 나머지 두 가지는 포인트와 하이라이트용으로 남겨두세요.

테트라딕(사각형)

테트라딕(사각형) 배색은 60도 간격으로 배치된 두 쌍의 보색, 총 네 가지 색상을 사용합니다. 클래식 배색 중 가장 다채로운 조합을 만들어낼 수 있지만 그만큼 균형을 맞추기도 가장 어렵습니다 — 주색 하나를 정하고 나머지는 톤을 낮춘 뒤, 따뜻한 색과 차가운 색의 비율을 신중히 살펴보세요.

정사각형

정사각형 배색은 색상환에서 90도 간격으로 네 가지 색을 고르게 배치합니다. 4색조합처럼 두 쌍의 보색을 짝짓지만, 균등한 간격 덕분에 따뜻한 색과 차가운 색이 더 경쾌하고 발랄하게 균형을 이룹니다. 한 가지 색이 확실히 주도하고 나머지는 작은 포인트로 사용할 때 가장 효과적입니다.

컬러 휠로 할 수 있는 일

시작하기 전에 주요 기능을 검토하세요.

  • 보완적이고 유사한 색상 구성을 살펴보세요.
  • 3극, 4극, 정사각형 조화 찾기
  • 일치하는 모든 색상에 대해 16진수 코드 복사
  • 채도와 밝기를 실시간으로 미세 조정
  • 디자인 팔레트의 기본 색상을 선택하세요

설정 참고

컬러 휠에 사용 가능한 제어 기능입니다.

옵션

기본 색상(색조와 채도)색상 선택기
색상환의 아무 곳이나 드래그해 시작 색상을 고르세요. 각도가 색조를, 중심에서의 거리가 채도를 결정합니다.
HEX / CSS 색상텍스트 입력
HEX 코드, rgb(), hsl(), CSS 색 이름을 입력하거나 붙여 넣으면 이미 정해 둔 정확한 색으로 색상환이 곧바로 이동합니다.
채도슬라이더범위: 0–100% · 기본값: 91%
기본 색상의 선명도를 조정합니다. 0%에서는 완전한 회색이 되고, 100%에서는 가장 순수하고 강렬한 색조가 됩니다.
명도슬라이더범위: 0–100% · 기본값: 60%
기준 색상의 밝기를 0%의 검정에서 순수한 색조를 거쳐 100%의 흰색까지 조절합니다. 모든 배색 조합이 여기에 맞춰 함께 바뀝니다.
조화프리셋
색상환에서 강조할 고전 배색 관계를 선택합니다. 짝을 이루는 색에 마커가 표시되어 배색이 어떻게 구성되는지 한눈에 보입니다.옵션: 보색분할 보색유사색삼색 조화테트라딕(사각형)정사각형
무료 이용 · 회원가입 불필요 · 워터마크 없음업로드는 전송 중에 암호화됩니다.보관 정책에 따라 삭제됨

자주 묻는 질문

컬러 휠가 작업을 완수하도록 돕는 방법

비즈니스, 크리에이터, 일상 업무의 실제 문제를 매일 해결합니다. 귀하에게 적합한 사용 사례를 찾아 시작해보세요.

학력

색채 이론 배우기

선택한 기본 색상을 기준으로 모든 클래식 색상 조화를 실시간으로 확인하고, 각 배색이 언제 왜 잘 어울리는지 쉬운 설명으로 알아보세요.

크리에이터용

웹사이트 강조 색상 고르기

브랜드 HEX 코드를 컬러 휠에 입력하고 스플릿 보색 또는 트라이애딕 배색을 활용해 충돌 없이 대비되는 강조 색상을 찾아보세요.

크리에이터용

실제 UI에서 색상 조합 미리 보기

각 배색은 헤더, 본문, 버튼, 도트로 구성된 작은 샘플 카드에 적용되므로, 추상적인 색상 견본이 아니라 실제 맥락 속에서 조합을 판단할 수 있습니다.

크리에이터용

아트 및 일러스트 팔레트

자연스럽고 차분한 장면에는 유사색 조합을, 극적인 포인트를 주고 싶은 곳에는 보색 조합을 사용하고, 정확한 헥스 코드를 그림 도구에 그대로 입력해 보세요.

각 변화를 확인하세요

모든 사진이 원본 그대로 슬래시를 지나 반대편에서 완성된 결과물로 나옵니다.