색상 조합 도구 — 보색 찾기 · 팔레트 생성기

사용 방법

1. 기본 색상을 선택합니다.
2. 보색, 유사색, 삼원색 등 원하는 색상 조합 유형을 선택합니다.
3. 생성된 팔레트에서 각 색상의 HEX 코드를 복사하여 활용합니다.

언제 사용하나요

화면에 쓸 색을 처음부터 정해야 하거나, 이미 정한 메인 색에 어울리는 보조 색을 찾아야 할 때 사용합니다. 색상환에서 일정한 각도로 떨어진 색을 자동으로 계산해 주므로, 감으로 색을 고르다 톤이 따로 노는 상황을 줄일 수 있습니다. 브랜드 컬러를 정하거나 슬라이드·웹 화면의 색 체계를 잡는 출발점으로 활용하기 좋습니다.

색의 역할 나누기

팔레트를 만들 때는 색 개수보다 각 색의 역할을 정하는 것이 먼저입니다. 보통 다음처럼 나눕니다.

• 메인 컬러: 브랜드를 대표하고 가장 넓게 쓰이는 색
• 보조 컬러: 메인을 받쳐 주는 유사색·인접색
• 배경색: 채도를 낮춘 밝거나 어두운 면 색
• 강조(CTA) 색: 버튼·링크처럼 눈길을 끌어야 하는 한정된 색

보색 조합은 강조 색을 찾을 때, 유사색은 통일감 있는 배경·보조 색을 찾을 때, 삼원색·사각 배색은 색이 많은 일러스트나 카테고리 구분에 어울립니다.

가독성과 브랜드 색 선정 시 주의점

색상환 각도로 뽑은 조합은 색의 관계만 맞춰 줄 뿐, 명도·채도까지 보정하지는 않습니다. 채도와 밝기가 비슷한 두 색을 나란히 쓰면 경계가 흐려지고, 특히 텍스트와 배경의 밝기 차가 작으면 글자가 잘 안 읽힙니다.

• 강조 색을 너무 많이 쓰면 어느 것도 강조되지 않으니 한두 곳에 한정
• 채도 높은 색끼리 넓은 면적으로 맞붙이면 눈이 쉽게 피로해짐
• 같은 색이라도 화면·인쇄·기기에 따라 다르게 보일 수 있음

텍스트와 배경에 쓸 조합은 명도 대비 검사로 함께 확인하면 가독성 문제를 미리 걸러낼 수 있습니다.

자주 묻는 질문

보색 찾기는 어떻게 하나요?

기본 색상을 선택한 뒤 '보색' 유형을 누르면 색상환에서 정반대(180°)에 위치한 보색 조합이 자동으로 표시됩니다.

보색과 유사색의 차이는 무엇인가요?

보색 조합은 강한 대비 효과를 주고, 유사색은 인접한(±30°) 색 조합으로 자연스러운 통일감을 줍니다.

삼원색, 분할 보색, 사각 배색은 어떤 차이가 있나요?

삼원색은 120° 간격 3색, 분할 보색은 보색 양옆 30° 2색, 사각 배색은 90° 간격 4색 조합입니다. 색 배합 수가 늘어날수록 화면이 풍부해집니다.

웹 화면에 색은 몇 개나 쓰는 게 좋나요?

정해진 수는 없지만 메인·보조·배경·강조처럼 역할별로 3~5색 안에서 정리하면 통일감을 유지하기 쉽습니다. 같은 색의 밝기 단계를 늘려 변화를 주는 방법도 있습니다.

생성된 색을 그대로 브랜드 컬러로 써도 되나요?

색의 관계를 잡는 출발점으로 활용하고, 명도·채도와 실제 사용 맥락에 맞게 다듬어 쓰는 것을 권합니다.