카페 로고 색을 갈색으로 정했다. 간판, 메뉴판, 인스타그램까지 전부 갈색 일색이 되니 답답해 보인다. 메인 색은 마음에 드는데, 여기에 뭘 조합해야 자연스러운지가 문제다.
색 조합에 규칙이 있다
미술 시간에 배운 색상환을 떠올려보자. 빨강, 주황, 노랑, 초록, 파랑, 보라가 원형으로 배치된 그 차트다. 색상환에서 색끼리의 위치 관계에 따라 조합의 느낌이 달라지는데, 이걸 배색 규칙이라고 부른다. 디자이너들이 색을 고를 때 감이 아니라 이 규칙을 기준으로 작업하는 경우가 많다.
배색 규칙 6가지 비교
| 규칙 | 원리 | 느낌 | 추천 용도 |
|---|---|---|---|
| 보색 | 색상환 정반대 | 강렬한 대비 | 배너, CTA 버튼 |
| 유사색 | 색상환 양옆 | 편안, 자연스러움 | 브랜딩, 블로그 |
| 삼각색 | 120° 간격 3색 | 생동감, 균형 | 인포그래픽, 앱 UI |
| 분할보색 | 보색 양옆 2색 | 대비 + 안정감 | 웹디자인, 포스터 |
| 사각색 | 90° 간격 4색 | 화려, 복잡 | 일러스트, 패키지 |
| 단색조 | 같은 색 명도 변화 | 깔끔, 통일감 | 이력서, 프레젠테이션 |
보색은 빨강과 초록, 파랑과 주황처럼 색상환에서 정반대에 있는 두 색이다. 눈에 확 띄기 때문에 클릭을 유도하는 버튼이나 세일 배너에 잘 어울린다. 다만 두 색을 같은 비율로 쓰면 눈이 피곤해지니, 한쪽을 메인으로 깔고 반대쪽은 포인트로만 쓰는 게 요령이다.
유사색은 색상환에서 바로 옆에 있는 색끼리 조합하는 방식이다. 초록과 연두, 파랑과 남색처럼 비슷한 톤이라 편안한 느낌을 준다. 카페, 화장품 브랜드처럼 부드러운 이미지가 필요할 때 적합하다.
삼각색은 색상환에서 정삼각형 꼭짓점에 해당하는 세 색을 쓰는 규칙이다. 빨강-노랑-파랑 같은 조합이 여기에 해당한다. 세 색이 고르게 퍼져 있어서 생동감 있으면서도 시각적 균형이 잡힌다.
TIP 색을 3개 이상 쓸 때는 60-30-10 법칙을 적용하면 실패가 적다. 메인 색 60%, 보조 색 30%, 강조 색 10%로 비율을 나누면 어떤 조합이든 안정감 있게 보인다.
상황별 어떤 규칙을 고를까
- 브랜드/로고
- 유사색이나 분할보색이 무난하다. 유사색은 부드러운 인상, 분할보색은 활기 있는 느낌을 준다.
- 프레젠테이션/이력서
- 단색조가 가장 안전하다. 한 가지 색의 밝기만 달리하면 깔끔하면서도 정돈된 인상을 줄 수 있다.
- 쇼핑몰 배너/광고
- 보색 조합으로 시선을 확보하되, 메인 색 면적을 넓게 잡고 보색은 버튼이나 가격표에만 넣는다.
- 블로그/개인 웹사이트
- 유사색 기반에 강조 포인트 하나를 추가하는 구성이 읽기 편하다. 배경과 본문의 명도 차이를 충분히 두는 게 중요하다.
조합 직접 만들어보기
기준 색 하나만 정하면 나머지는 규칙에 따라 자동으로 뽑을 수 있다. 컬러 팔레트 생성기에서 원하는 색을 피커로 고르거나 HEX 코드를 입력한 뒤, 배색 규칙 드롭다운에서 보색, 유사색 등을 선택하면 조화로운 조합이 바로 만들어진다.
- HEX 코드 직접 입력 또는 컬러 피커로 선택
- 6가지 배색 규칙 + 밝기/채도 변화 생성
- 색상 타일 클릭으로 개별 코드 복사, 전체 복사도 가능
- 자연, 뉴트럴, 비비드 등 인기 팔레트 8종 제공
메인 색만 있고 나머지가 고민이라면, 배색 규칙 하나를 골라서 돌려보는 게 가장 빠른 방법이다. 몇 가지 규칙을 바꿔가며 비교하면 생각보다 금방 마음에 드는 조합이 나온다.