로고 색을 정했는데 배경색을 뭘로 해야 할지 모르겠다. PPT 슬라이드에 포인트 컬러를 넣고 싶은데 촌스러워 보일까 걱정된다. 색 감각이 타고나지 않아도, 배색에는 공식이 있다. 색상환 위에서 어떤 위치 관계를 갖는지에 따라 조합이 결정된다.
색상환과 배색의 원리
색상환(Color Wheel)은 빨강, 주황, 노랑, 초록, 파랑, 보라 등 12가지 색을 원형으로 배치한 것이다. 이 원 위에서 색의 거리와 각도에 따라 배색 규칙이 나뉜다. 거리가 가까우면 차분하고, 멀면 강렬하다.
6가지 배색 규칙
1. 보색 (Complementary)
색상환에서 정반대(180도)에 있는 두 색의 조합이다. 빨강-초록, 파랑-주황처럼 대비가 극대화된다.
- 효과: 시선을 강하게 끌어야 할 때 적합
- 적합한 용도: 세일 배너, CTA 버튼, 스포츠 브랜드
- 주의점: 두 색을 동일 비율로 쓰면 눈이 피로해진다. 7:3 정도로 한쪽을 주조색으로 쓰는 게 낫다.
2. 유사색 (Analogous)
색상환에서 바로 옆에 붙어 있는 2~3개 색의 조합이다. 파랑-청록-초록처럼 자연스럽게 이어진다.
- 효과: 편안하고 조화로운 느낌
- 적합한 용도: 자연/환경 관련 디자인, 블로그, 앱 UI
- 주의점: 대비가 약하므로 텍스트 가독성을 반드시 확인해야 한다.
3. 삼각색 (Triadic)
색상환에서 120도 간격으로 세 색을 고른다. 빨강-노랑-파랑이 대표적이다.
- 효과: 활기차고 균형 잡힌 느낌
- 적합한 용도: 어린이 브랜드, 이벤트 포스터, 게임 UI
- 주의점: 세 색 모두 원색으로 쓰면 정신없어 보인다. 하나는 원색, 나머지 둘은 채도를 낮추면 안정된다.
4. 분할보색 (Split-Complementary)
보색 대신 보색의 양옆 색 두 개를 쓰는 방식이다. 보색만큼 강렬하지 않으면서도 적절한 대비를 만든다.
- 효과: 세련된 대비감
- 적합한 용도: 프레젠테이션, 웹사이트, 인포그래픽
5. 사각색 (Tetradic / Square)
90도 간격으로 네 색을 선택한다. 색이 네 개이므로 가장 풍성한 조합이 나오지만, 균형 잡기가 어렵다.
- 적합한 용도: 복잡한 대시보드, 데이터 시각화, 다색 브랜딩
6. 단색조 (Monochromatic)
하나의 색상에서 밝기와 채도만 바꿔서 구성한다. 진한 남색, 중간 남색, 연한 남색처럼.
- 효과: 깔끔하고 통일감 있는 분위기
- 적합한 용도: 이력서, 기업 보고서, 미니멀 웹사이트
상황별 배색 선택 기준
| 상황 | 추천 규칙 | 이유 |
|---|---|---|
| 로고 + 배경색 | 보색 또는 분할보색 | 로고가 배경에서 뚜렷하게 분리됨 |
| 웹사이트 전체 톤 | 유사색 또는 단색조 | 장시간 보기에 편안함 |
| 발표 자료 | 분할보색 | 가독성과 시각적 흥미 동시 확보 |
| 데이터 차트 | 삼각색 또는 사각색 | 항목별 구분이 명확 |
| 쇼핑몰 배너 | 보색 | 할인/이벤트 강조에 효과적 |
배색 실수를 줄이는 팁 3가지
- 주조색 60%, 보조색 30%, 강조색 10%: 60-30-10 법칙이라고 부른다. 인테리어에서 시작된 비율인데 디자인에도 그대로 적용된다.
- 검정/흰색은 색이 아니라 도구: 어떤 조합이든 흰색 여백과 검정 텍스트를 넣으면 정리가 된다. 색상 팔레트에 흑백은 포함시키지 않아도 당연히 쓰게 되는 색이다.
- 실물로 확인: 모니터에서 예뻐 보이는 색이 인쇄하면 완전히 다르게 나올 수 있다. 인쇄물이라면 반드시 테스트 출력을 해보자.
TIP 기준 색상 하나만 정하면 컬러 팔레트 생성기가 6가지 배색 규칙에 따라 조합을 자동으로 보여준다. HEX 코드 복사 기능이 있어서 생성된 색을 그대로 CSS나 디자인 툴에 붙여 넣을 수 있다.
색 조합에 자신이 없으면 규칙에 맡기면 된다. 감각이 아니라 각도의 문제니까.