PPT 배경을 파란색으로 깔았다. 제목 글자는 무슨 색이 어울릴까. 감으로 이것저것 바꿔보다가 시간만 날린 적이 있다면, 색상 조합에는 규칙이 있다는 걸 알아두면 좋다. 색상환 위에서의 위치 관계만 알면 조화로운 배색을 금방 잡을 수 있다.
색상환과 배색의 원리
색상환(Color Wheel)은 빨강, 주황, 노랑, 초록, 파랑, 보라 등 색을 원형으로 배치한 것이다. 이 원 위에서 색상 간의 각도 관계가 배색 규칙의 기반이 된다. 서로 마주 보는 색(180도)은 보색, 나란히 붙어 있는 색은 유사색이다.
배색 규칙 6가지
1. 보색 (Complementary)
색상환에서 정반대에 위치한 두 색이다. 파랑과 주황, 빨강과 초록처럼. 대비가 강렬해서 시선을 끌어야 하는 CTA 버튼이나 배너에 효과적이다. 다만 두 색을 동일 면적으로 쓰면 눈이 피로하다.
2. 유사색 (Analogous)
색상환에서 이웃한 색들을 쓰는 방법이다. 파랑-청록-초록 같은 조합. 자연에서 흔히 볼 수 있는 배색이라 부드럽고 안정적인 느낌을 준다. 포트폴리오 사이트나 블로그에 많이 쓰인다.
3. 삼각색 (Triadic)
색상환에서 120도 간격으로 세 색을 고른다. 빨강-노랑-파랑이 대표적이다. 컬러풀하면서도 균형이 잡힌다. 하나를 메인으로, 나머지 둘을 포인트로 쓰면 산만하지 않다.
4. 분할보색 (Split-Complementary)
보색의 양옆 색을 대신 사용하는 방식이다. 보색보다 대비가 살짝 부드러워서, 강렬함은 유지하되 튀지 않게 하고 싶을 때 좋다.
5. 사각색 (Square / Tetradic)
90도 간격으로 네 색을 배치한다. 색상이 풍부해지지만 다루기 어렵다. 한 색을 주조색으로 확실히 정하고 나머지 셋은 보조로 써야 어수선해지지 않는다.
6. 단색조 (Monochromatic)
하나의 색에서 명도와 채도만 변화를 준다. 진한 남색, 남색, 연한 하늘색 같은 조합이다. 가장 실패 확률이 낮은 배색법이고, 세련된 느낌을 주기에 좋다.
실전에서 팔레트 만들기
기준 색상 하나만 정하면 나머지는 규칙에 따라 자동으로 뽑을 수 있다. 컬러 팔레트 생성기에서 메인 컬러를 선택하고 배색 규칙을 고르면 5개 색상이 한 번에 생성된다. HEX 코드가 함께 나오기 때문에 CSS나 피그마에 바로 복사해서 쓸 수 있다.
TIP 색 조합이 안 떠오를 때는 랜덤 생성 버튼을 눌러보자. 무작위로 나온 팔레트 중에 마음에 드는 게 있으면 거기서 미세 조정하는 것이 백지에서 시작하는 것보다 훨씬 빠르다.
웹디자인에서의 배색 비율
60-30-10 규칙이 가장 많이 쓰인다. 배경에 60%, 보조 요소에 30%, 강조(버튼, 링크)에 10%를 할당하는 것이다. 세 색을 동일 비율로 쓰면 시선이 분산되고, 이 비율을 지키면 자연스럽게 시각적 위계가 생긴다.
배색은 센스가 아니라 규칙이다. 규칙을 알고 나면 어떤 색을 골라도 어울리는 조합을 만들 수 있다.