로고 디자인을 의뢰받았는데, 색상을 3가지 골라야 한다. 파란색을 기본으로 잡았지만, 나머지 2가지를 아무거나 넣으면 촌스러워 보인다. 색상 조합에는 규칙이 있고, 그 규칙을 따르면 비전문가도 조화로운 배색을 만들 수 있다.
배색 규칙 6가지
색상환(Color Wheel)에서 기준 색상을 하나 잡으면, 위치 관계에 따라 자동으로 어울리는 색이 정해진다.
| 규칙 | 원리 | 느낌 | 적합한 곳 |
|---|---|---|---|
| 보색 | 180도 반대편 | 강렬한 대비 | CTA 버튼, 강조 요소 |
| 유사색 | 인접 색상 | 자연스러운 조화 | 배경, 전체 톤 통일 |
| 삼각색 | 120도 간격 3색 | 균형 잡힌 생동감 | 인포그래픽, 차트 |
| 분할보색 | 보색의 양옆 | 부드러운 대비 | 웹사이트 메인 배색 |
| 사각색 | 90도 간격 4색 | 풍부한 색감 | 일러스트, 포스터 |
| 단색조 | 같은 색 명도 변화 | 세련되고 깔끔 | 미니멀 디자인, UI |
TIP 처음 배색을 잡을 때는 유사색이나 단색조부터 시작하는 게 안전하다. 실패 확률이 낮고, 전체적으로 통일감이 있어서 어디에 써도 무난하다.
60-30-10 법칙
3가지 색상을 골랐으면, 비율이 중요하다. 인테리어 디자인에서 나온 법칙인데, 웹이나 그래픽에도 똑같이 적용된다.
- 60%: 메인 색상 (배경, 넓은 면적)
- 30%: 보조 색상 (카드, 섹션 구분)
- 10%: 강조 색상 (버튼, 링크, CTA)
3가지를 동일한 비율로 쓰면 시선이 분산된다. 주인공 색상을 정하고 나머지는 조연으로 두는 게 핵심이다.
기준 색상 하나에서 팔레트 뽑기
기준 색상을 색상 피커나 HEX 코드로 지정한 뒤, 배색 규칙을 선택하면 5가지 조화로운 색상이 자동으로 나오는 컬러 팔레트 생성기로 조합을 빠르게 만들 수 있다. 밝기와 채도 변화까지 단계별로 보여주니, 한 색상에서 버튼용 진한 톤과 배경용 연한 톤을 함께 뽑을 수 있다. 파스텔, 네이비, 비비드 같은 인기 팔레트 프리셋도 있어서, 아이디어가 없을 때 출발점으로 쓸 만하다.
배색 감각은 타고나는 게 아니라, 규칙을 아는 것이다. 기준 색상 하나와 배색 규칙 하나만 정하면, 나머지는 자동으로 따라온다.