PPT 배경을 파란색으로 깔았는데 글씨 색을 뭘로 해야 할지 모르겠다. 로고 색은 정했는데 거기에 어울리는 서브 컬러를 못 고르겠다. 이런 고민은 배색 규칙 하나만 알면 거의 해결된다.
배색 규칙 6가지, 언제 뭘 쓸까
- 보색 (Complementary)
- 색상환에서 정반대에 있는 두 색. 빨강-초록, 파랑-주황처럼 대비가 강해서 눈에 확 띄는 디자인에 쓴다. CTA 버튼, 세일 배너처럼 시선을 끌어야 할 때 적합하다.
- 유사색 (Analogous)
- 색상환에서 나란히 붙어 있는 2~3색 조합. 노랑-연두-초록 같은 식이다. 부드럽고 자연스러운 느낌을 주기 때문에 블로그, 포트폴리오, 자연 테마에 많이 쓴다.
- 삼각색 (Triadic)
- 색상환에서 정삼각형 꼭짓점에 있는 세 색. 균형 잡힌 다채로움이 필요할 때 쓰면 좋다. 하나를 메인으로, 나머지 둘을 포인트로 배분하는 게 포인트.
- 분할보색 (Split-Complementary)
- 보색의 양옆 색 두 개를 대신 쓰는 방식. 보색만큼 대비가 강하지 않으면서도 조화롭다. 디자인 초보에게 실패 확률이 가장 낮은 규칙이다.
- 사각색 (Tetradic)
- 네 가지 색을 쓰는 조합. 색이 많아 복잡해지기 쉬우니, 하나를 주색으로 정하고 나머지를 보조로 돌리는 게 안전하다.
- 단색조 (Monochromatic)
- 하나의 색에서 밝기와 채도만 바꿔서 만드는 팔레트. 통일감이 극대화돼서 미니멀 디자인, 대시보드 UI에 잘 어울린다.
실무에서 자주 쓰이는 조합
| 용도 | 추천 규칙 | 이유 |
|---|---|---|
| 프레젠테이션 | 유사색 또는 단색조 | 슬라이드 간 일관성 유지 |
| 쇼핑몰 배너 | 보색 또는 삼각색 | 눈에 띄어야 클릭이 나옴 |
| 블로그/포트폴리오 | 유사색 | 오래 봐도 피로감 적음 |
| 모바일 앱 UI | 단색조 + 포인트 1색 | 깔끔하고 가독성 좋음 |
| 로고 디자인 | 분할보색 | 개성 있으면서 안정적 |
팔레트를 직접 만들어보기
규칙을 머리로 이해했더라도 실제로 HEX 코드를 뽑아내려면 색상환을 돌려봐야 한다. 컬러 팔레트 생성기에서 기준 색상 하나를 고르고 배색 규칙을 선택하면, 규칙에 맞는 색이 자동으로 나온다. 밝기와 채도 변화를 5단계로 확인할 수 있어서 메인 색상을 정한 뒤 밝은 버전, 어두운 버전까지 한 번에 뽑을 수 있다.
"자연", "파스텔", "뉴트럴" 같은 사전 팔레트도 8종류 있으니, 영감이 필요할 때 먼저 둘러보고 거기서 색을 하나 골라 확장하는 것도 방법이다. HEX 코드는 클릭 한 번으로 복사되니 피그마나 CSS에 바로 붙여넣으면 된다.
TIP 색을 5개 이상 쓰면 산만해지기 쉽다. 메인 1색, 서브 1~2색, 배경 1색, 강조 1색. 총 4~5색 이내로 제한하면 대부분의 디자인에서 정리된 느낌을 줄 수 있다.
배색 규칙 이름이 어렵게 느껴져도 핵심은 단순하다. 색상환에서 어떤 위치 관계를 골랐느냐의 차이일 뿐이다. 한 번 직접 돌려보면 감이 바로 온다.