로고 색을 정했는데 웹사이트 배경색, 버튼 색, 텍스트 색을 뭘로 해야 할지 막막하다. 마음에 드는 색 하나는 있는데, 나머지를 어떻게 맞춰야 전체적으로 어울리는지가 문제다. 여기서 필요한 게 배색 규칙이다.
색상환과 배색 규칙
색상환(Color Wheel)은 빨강, 주황, 노랑, 초록, 파랑, 보라를 원형으로 배치한 것이다. 배색 규칙은 이 원 위에서 색상 간의 각도 관계를 이용한다. 각도에 따라 색의 조화 방식이 달라진다.
| 규칙 | 각도 | 느낌 | 추천 용도 |
|---|---|---|---|
| 보색 | 180° | 강렬한 대비 | CTA 버튼, 강조 요소 |
| 유사색 | 인접 30° | 자연스러운 조화 | 배경+텍스트, 전체 톤 통일 |
| 삼각색 | 120° | 균형 잡힌 다채로움 | 인포그래픽, 아이콘 세트 |
| 분할보색 | 보색 양옆 | 보색보다 부드러운 대비 | 웹 디자인 메인+서브 컬러 |
| 단색조 | 같은 색 | 세련되고 깔끔함 | 미니멀 UI, 프레젠테이션 |
기준 색 하나로 팔레트 만들기
브랜드 메인 컬러가 #3B82F6(파란색)이라고 하자. 컬러 팔레트 생성기에 이 값을 넣고 배색 규칙을 바꿔가며 결과를 보면, 보색은 주황 계열, 유사색은 남색~하늘색 계열, 삼각색은 빨강+초록 계열이 자동으로 나온다. 색상 이론을 따로 공부하지 않아도 규칙만 선택하면 조화로운 조합이 만들어진다.
밝기와 채도 변화도 활용하자
같은 파란색이라도 밝기를 5단계로 나누면 헤더 배경(진한), 카드 배경(중간), 호버 효과(밝은) 등 용도별로 분리해서 쓸 수 있다. 이게 단색조(Monochromatic) 배색의 핵심이다. 색이 하나뿐이어도 명암 차이만으로 계층 구조를 표현할 수 있다.
TIP 색상 조합을 정했으면 실제 UI에 적용하기 전에 접근성을 확인하자. 텍스트와 배경의 명암 대비가 4.5:1 이상이어야 WCAG 기준을 충족한다. 예쁜 조합이라도 글씨가 안 읽히면 소용없다.
영감이 필요할 때
- 랜덤 생성 — 아무 아이디어가 없을 때 랜덤 버튼을 누르면서 마음에 드는 조합이 나올 때까지 돌려보는 방법
- 인기 팔레트 — 자연, 뉴트럴, 네이비 등 미리 큐레이션된 팔레트를 참고하는 방법
- 레퍼런스 사이트 — 마음에 드는 웹사이트의 메인 색을 추출해서 기준 색으로 쓰는 방법
배색은 감각의 영역 같지만, 규칙을 알면 누구나 무난한 조합을 만들 수 있다. 색 하나만 정하면 나머지는 규칙이 알아서 잡아준다.