보색·배색 팔레트
어울리는 색 조합 생성.
설명
기준 색을 바탕으로 보색·유사색·삼색(삼각) 배색 조합을 생성합니다. 색을 클릭하면 HEX 코드가 복사됩니다. 디자인 색 조합에 활용하세요.
관련 도구
디자인 작업에서 색상 조합을 직접 정하다 보면 어색하거나 충돌하는 색을 고르기 쉽습니다. 보색·배색 팔레트 도구는 기준 색 하나를 입력하면 보색, 유사색, 삼색(트라이어드), 사색(테트라드) 조합을 즉시 생성해 줍니다. 색채 이론에 익숙하지 않아도 조화로운 팔레트를 빠르게 찾을 수 있어 웹 디자인, 브랜드 컬러 기획, 일러스트 작업 등 다양한 상황에서 유용합니다.
사용 방법
색상 입력창에 HEX 코드(예: #3A86FF)를 직접 입력하거나 색상 피커로 원하는 색을 선택합니다. 선택 즉시 보색(Complementary), 유사색(Analogous), 삼색 조합(Triadic), 사색 조합(Tetradic) 등 여러 배색 규칙에 따른 팔레트가 자동으로 표시됩니다. 각 색상 칩을 클릭하면 HEX 값을 복사할 수 있어 디자인 툴에 바로 붙여넣기 할 수 있습니다. 기준 색을 조금씩 바꿔가며 어떤 배색이 작업 의도에 맞는지 빠르게 비교해 보세요.
배색 조합 유형별 활용 사례
보색 조합은 강한 대비가 필요한 CTA 버튼이나 포스터에 적합하며, 파란색 기반 브랜드라면 주황 계열 강조색으로 시선을 집중시킬 수 있습니다. 유사색 조합은 부드럽고 통일감 있는 느낌을 주므로 블로그 배경, 제품 상세 페이지처럼 오래 머무는 콘텐츠에 잘 어울립니다. 삼색 조합은 세 가지 색이 고르게 눈에 띄어 인포그래픽이나 데이터 시각화 차트에서 각 항목을 명확히 구분할 때 효과적입니다. 사색 조합은 채도를 낮춰 사용하면 세련된 다색 브랜드 팔레트를 만들 수 있습니다.
알아두면 좋은 점
색채 이론의 보색은 색상환(Hue wheel) 기준 180도 반대편 색입니다. 채도나 명도를 그대로 유지한 보색끼리는 진동 현상(vibration)이 생겨 오히려 눈이 피로할 수 있으니, 한쪽 채도를 낮추거나 명도 차이를 두는 것이 실용적입니다. 또한 생성된 팔레트가 웹 접근성 기준(WCAG 2.1)을 만족하는지, 특히 텍스트 색과 배경 색 조합이 명도 대비 4.5:1 이상인지 별도로 확인하는 습관을 갖는 것이 좋습니다.
자주 묻는 질문
보색과 반대색은 같은 개념인가요?
생성된 HEX 코드를 Figma나 Photoshop에 바로 쓸 수 있나요?
삼색 조합이 왜 세 가지 색이 고르게 눈에 띄나요?
브랜드 기본 컬러가 정해져 있을 때 어떻게 활용하면 좋을까요?
모바일 화면에서도 팔레트 색상 칩을 복사할 수 있나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
이 도구는 무엇을 계산하나
보색·배색 팔레트 도구는 기준 색 하나를 입력하면 색상환(color wheel)의 각도를 기준으로 배색 조합을 자동으로 만들어 줍니다. 내부적으로는 입력한 색을 HSL(색상·채도·명도) 값으로 변환한 뒤, 색상(Hue) 각도만 일정하게 돌려서 조합 색을 뽑아냅니다. 예를 들어 기준 색의 Hue가 210도(파랑)라면, 보색은 정반대인 30도, 삼색 배색(Triadic)은 330도와 90도처럼 120도씩 떨어진 지점을 계산합니다. 채도와 명도는 그대로 두고 색상만 회전시키기 때문에, 원래 색의 밝기·선명함을 유지한 채 균형 잡힌 조합이 나옵니다.
배색 유형별 각도
이 도구가 만드는 조합은 색상환에서 서로 떨어진 각도로 정의됩니다. 각 유형이 몇 도씩 떨어진 색을 뽑는지 정리하면 다음과 같습니다.
| 배색 유형 | 기준에서의 색상 각도 | 느낌 |
|---|---|---|
| 보색(Complementary) | +180도 | 대비가 가장 강하고 눈에 띔 |
| 유사색(Analogous) | ±30도 | 부드럽고 자연스러운 조화 |
| 삼색(Triadic) | +120도, +240도 | 선명하면서도 균형이 잡힘 |
| 분할 보색(Split-Complementary) | +150도, +210도 | 보색보다 덜 부담스러운 대비 |
| 사각(Tetradic) | +90도, +180도, +270도 | 색이 많아 강약 조절 필요 |
사용 방법
먼저 색상 선택기나 HEX 코드(예: #2A7DE1)로 기준 색을 넣습니다. 그러면 각 배색 유형별 결과가 색상 견본과 함께 표시되고, 각 색의 HEX·RGB 값을 확인해 복사할 수 있습니다. 브랜드 로고나 사진에서 마음에 드는 색을 스포이드로 뽑아 기준으로 삼으면, 그 색과 어울리는 포인트 컬러를 빠르게 찾을 수 있습니다. 유사색은 배경·본문처럼 넓은 면적에, 보색은 버튼·강조 텍스트 같은 좁은 포인트에 쓰는 식으로 역할을 나누면 결과가 안정적입니다.
활용 상황과 팁
웹사이트 색 조합, 발표 슬라이드, 포스터, 인테리어 무드보드, 브랜드 컬러 후보 정하기 등에 쓸 수 있습니다. 실무 팁 하나는 "60-30-10 비율"입니다. 주색 60%, 보조색 30%, 강조색(보색) 10% 정도로 면적을 배분하면 보색의 강한 대비가 과하지 않게 정리됩니다. 또한 순수한 보색끼리 같은 채도로 맞붙이면 경계가 지글거려 보이는 현상이 생길 수 있으니, 강조색은 채도나 명도를 살짝 낮춰 쓰는 편이 눈에 편합니다. 색만으로 정보를 구분하면 색각 이상이 있는 사용자가 구별하기 어려울 수 있으므로, 중요한 구분에는 명도 차이나 아이콘·라벨을 함께 두는 것이 좋습니다.
자주 묻는 질문
보색을 썼는데 왜 예상보다 강하거나 촌스러워 보이나요?
보색은 색상환에서 180도 떨어진 가장 대비가 큰 조합이라, 두 색을 같은 면적·같은 채도로 나란히 두면 부담스러워 보이기 쉽습니다. 한쪽을 넓은 배경, 다른 쪽을 좁은 포인트로 쓰거나 강조색의 채도를 낮추면 훨씬 정돈됩니다.
이 도구가 뽑은 색이 항상 정답인가요?
아닙니다. 색상환 각도는 조화로운 조합을 찾는 출발점일 뿐, 절대적인 규칙이 아닙니다. 브랜드 성격이나 용도에 따라 규칙을 벗어난 조합이 더 나을 수도 있으니 후보로 참고하고 눈으로 최종 판단하세요.
같은 색을 넣었는데 유사색과 삼색 결과가 왜 다른가요?
유사색은 기준에서 약 30도만 떨어진 이웃 색이라 톤이 비슷하고, 삼색은 120도씩 벌어져 세 색이 뚜렷이 구분됩니다. 각도 차이가 클수록 색끼리의 대비도 커집니다.
회색이나 검정·흰색을 넣으면 왜 조합이 잘 안 나오나요?
무채색은 채도가 0이라 색상(Hue) 각도가 의미를 갖지 못합니다. 색상을 돌려도 여전히 무채색이 나오므로, 채도가 있는 유채색을 기준으로 넣어야 배색 조합이 제대로 만들어집니다.