발표 자료를 만드는데 파란색 배경에 어떤 색 글씨를 넣어야 할지 모르겠다. 로고 색은 정했는데 웹사이트 전체 색상 톤을 어떻게 맞출지 감이 안 온다. 색상 조합은 감각이 아니라 규칙을 알면 훨씬 수월해진다.
색상환과 배색 규칙 6가지
색상환(Color Wheel)은 빨강, 주황, 노랑, 초록, 파랑, 보라 등 색을 원형으로 배치한 것이다. 색상환 위에서의 위치 관계에 따라 배색 규칙이 정해진다.
| 규칙 | 색상환 관계 | 특징 | 활용 |
|---|---|---|---|
| 보색 | 정반대 (180°) | 강한 대비, 시선 집중 | CTA 버튼, 포인트 컬러 |
| 유사색 | 인접 (30°) | 자연스러운 조화, 부드러움 | 배경 그라데이션, 브랜딩 |
| 삼각색 | 120° 간격 3색 | 활기차고 균형 잡힌 조합 | 인포그래픽, 차트 |
| 분할보색 | 보색 양옆 2색 | 대비가 있되 보색보다 부드러움 | 웹 디자인, 일러스트 |
| 사각색 | 90° 간격 4색 | 풍부한 색감, 조절이 어려움 | 복잡한 디자인, 포스터 |
| 단색조 | 한 색의 밝기/채도 변화 | 통일감, 세련됨 | 미니멀 디자인, 문서 |
실무에서 가장 안전한 배색법
색상 조합에 자신 없다면 아래 세 가지 방법이 실패 확률이 낮다.
- 60-30-10 법칙 — 메인 색 60%, 보조 색 30%, 포인트 색 10%. 인테리어에서 유래한 비율이지만 웹 디자인에도 그대로 적용된다.
- 단색조 + 포인트 — 한 색의 밝기만 3~4단계로 나누고, 반대편 색 하나를 포인트로 쓴다. 깔끔하면서도 단조롭지 않다.
- 유사색 3개 — 색상환에서 이웃한 색 3개를 골라 명도만 조절한다. 자연 풍경에서 흔히 보이는 조합이라 눈에 편안하다.
팔레트 빠르게 만들기
기준이 되는 색 하나를 정했다면, 컬러 팔레트 생성기에서 해당 HEX 코드를 입력하고 배색 규칙을 선택하면 나머지 색이 자동으로 나온다. 보색, 유사색, 삼각색 등 6가지 규칙을 한 번에 비교할 수 있고, 밝기·채도 변화 팔레트도 같이 보여준다. 랜덤 생성으로 영감을 얻는 방법도 있다.
TIP 브랜드 메인 컬러가 이미 정해져 있다면, 그 색을 기준으로 단색조 팔레트를 먼저 만들고, 포인트 컬러만 보색에서 하나 가져오는 방식이 실패 없이 깔끔하다.
색상 감각은 타고나는 게 아니다. 규칙을 알고 도구를 쓰면 누구든 조화로운 배색을 만들 수 있다.