브랜드 로고 색상은 정했는데 웹사이트 배경, 버튼, 텍스트에 무슨 색을 써야 할지 모르겠다. 감으로 고르면 어딘가 어색하고, 레퍼런스를 찾아봐도 왜 그 조합이 좋은지 이해가 안 된다. 사실 배색에는 수학적인 규칙이 있다.
색상환 기반 배색 규칙 6가지
색상환(Color Wheel)에서 기준 색상의 위치를 잡으면, 각도에 따라 조화로운 색상을 뽑아낼 수 있다.
1. 보색 (Complementary)
색상환에서 정반대(180도)에 있는 두 색. 빨강-초록, 파랑-주황 같은 조합이다. 대비가 강해서 CTA 버튼이나 강조 요소에 적합하다. 다만 둘을 같은 비율로 쓰면 눈이 피로하니까 주색 70%, 보색 30% 정도로 배분하는 게 좋다.
2. 유사색 (Analogous)
색상환에서 30~60도 범위의 인접한 색 2~3개를 쓰는 방식이다. 노랑-연두-초록처럼 자연스러운 그라데이션이 나온다. 편안하고 통일감 있는 디자인에 적합하지만, 대비가 약해서 강조 포인트를 별도로 넣어야 한다.
3. 삼각색 (Triadic)
120도 간격으로 세 색을 뽑는다. 빨강-파랑-노랑이 대표적이다. 세 색 모두 존재감이 강하므로 하나를 주색으로 쓰고 나머지 둘은 포인트로만 사용한다.
4. 분할보색 (Split Complementary)
보색의 양쪽 인접 색을 쓰는 방식이다. 보색만큼 강렬하지 않으면서 적당한 대비를 준다. 초보가 가장 쓰기 쉬운 규칙이다.
5. 사각색 (Square/Tetradic)
90도 간격으로 네 색을 뽑는다. 색이 많아서 다채로운 디자인이 가능하지만, 균형 잡기가 어렵다. 포스터나 인포그래픽에 적합하다.
6. 단색조 (Monochromatic)
한 색상의 밝기와 채도만 변화시킨 조합이다. 깔끔하고 세련된 느낌. UI 디자인에서 기본-hover-active 상태를 구분할 때 자주 쓴다.
실무에서 조합 뽑는 법
기준 색상 하나만 정하면 나머지는 규칙대로 계산하면 된다. 컬러 팔레트 생성기에서 색상 피커로 기준 색을 고르고 배색 규칙을 선택하면 조합이 자동으로 나온다. 각 색상의 밝기/채도 변화까지 5단계로 보여주니까, 버튼 hover 색이나 배경 톤도 한 번에 뽑을 수 있다. HEX 코드를 클릭하면 바로 복사된다.
TIP 배색에 자신이 없으면 파스텔, 네이비, 비비드 같은 미리 만들어진 팔레트에서 시작하는 것도 방법이다. 검증된 조합을 기반으로 약간만 수정하면 실패 확률이 줄어든다.
60-30-10 법칙
배색을 정했으면 비율도 중요하다. 인테리어에서 온 법칙인데, 디자인에도 그대로 적용된다.
- 60%: 배경, 여백 등 주색
- 30%: 카드, 사이드바 등 보조색
- 10%: 버튼, 링크 등 강조색
세 가지 이상의 색을 같은 비율로 쓰면 시선이 분산된다. 주인공이 하나여야 나머지가 돋보인다.
색 감각은 타고나는 게 아니라 규칙을 아는 것이다. 배색 원리만 알면 "이 색 왜 어울리지?"가 "이 색은 유사색이니까 어울린다"로 바뀐다.