프레젠테이션 배경색은 정했는데 텍스트 색, 강조색을 뭘로 해야 할지 모르겠다. 빨간색과 초록색을 같이 쓰면 크리스마스가 되고, 파란색과 노란색을 섞으면 우크라이나 국기가 된다. 색 조합에는 규칙이 있고, 그 규칙만 알면 촌스러운 배색을 피할 수 있다.
6가지 배색 규칙
색상환(Color Wheel)에서 색을 고르는 위치에 따라 배색 규칙이 나뉜다. 각각 분위기가 다르니까 용도에 맞게 골라야 한다.
| 규칙 | 원리 | 분위기 | 사용 예 |
|---|---|---|---|
| 보색 | 180도 반대편 색 | 강렬한 대비 | CTA 버튼, 경고 배너 |
| 유사색 | 인접한 색 2~3개 | 부드러운 조화 | 자연 풍경 테마, 블로그 |
| 삼각색 | 120도 간격 3색 | 균형 잡힌 활기 | 인포그래픽, 차트 |
| 분할보색 | 보색의 양옆 2색 + 기준색 | 보색보다 부드러운 대비 | 웹사이트 메인 테마 |
| 사각색 | 90도 간격 4색 | 다채로움 | 일러스트, 포스터 |
| 단색조 | 한 색의 밝기/채도 변화 | 깔끔하고 세련됨 | 기업 브랜딩, 미니멀 UI |
실전에서 가장 쓸만한 조합 3가지
초보자라면 단색조부터
파란색 하나 골라서 밝기만 바꿔 쓰면 된다. 배경은 연한 톤, 텍스트는 진한 톤, 포인트는 중간 톤. 실패할 확률이 거의 없다.
포인트가 필요하면 분할보색
메인 색상의 보색을 바로 쓰면 너무 튀는데, 보색 양옆의 색을 쓰면 눈에 띄면서도 자연스럽다. 랜딩 페이지에서 CTA 버튼 색을 정할 때 유용하다.
데이터 시각화에는 삼각색
파이 차트나 막대 그래프에 3가지 데이터를 구분해야 하면 삼각색이 제격이다. 각 색이 충분히 구분되면서 전체적으로 균형이 맞는다.
팔레트 만드는 과정
컬러 팔레트 생성기에서 기준 색상을 하나 고른다. 컬러 피커로 직접 선택해도 되고, HEX 코드를 입력해도 된다. 배색 규칙을 선택하면 조화로운 색상 조합이 자동으로 생성된다.
각 색상에는 밝기 5단계, 채도 5단계 변화가 함께 표시되니까 톤 조절도 한 화면에서 해결된다. 마음에 드는 색을 클릭하면 HEX 코드가 클립보드에 복사된다.
TIP 어디서 시작해야 할지 모르겠으면 "랜덤 생성" 버튼을 눌러보자. 생각지 못한 조합이 나올 때가 있다. 큐레이션된 인기 팔레트(자연, 뉴트럴, 네이비 등)도 있으니 참고 삼아 불러와서 변형하는 것도 방법이다.
배색할 때 피해야 할 것
- 색을 너무 많이 쓰기 — 한 화면에 5색 이상은 산만해진다. 메인 1색 + 보조 2색 + 배경/텍스트 정도가 적당하다.
- 채도 100%만 쓰기 — 원색끼리 붙이면 눈이 피로하다. 채도를 낮추거나 밝기를 조절하면 훨씬 편안해진다.
- 접근성 무시 — 배경과 텍스트의 명암 대비가 낮으면 글을 읽기 어렵다. WCAG 기준 4.5:1 이상의 대비를 유지해야 한다.
배색 감각이 타고나는 게 아니냐는 말을 많이 하는데, 사실 규칙만 따라가면 누구든 괜찮은 조합을 만들 수 있다. 색상환 위에서 어디를 찍느냐의 문제일 뿐이다.