메인 컬러는 파란색으로 정했다. 그런데 버튼 색은? 배경은? 텍스트 강조색은? 색 하나만 정하면 나머지는 따라온다고 하는데, 그 "따라오는" 규칙을 모르면 결국 감으로 찍게 된다.
배색 규칙 6가지
색상환(Color Wheel)에서 기준 색의 위치에 따라 조합 방식이 달라진다. 디자이너들이 실제로 쓰는 배색 규칙은 이렇다.
| 규칙 | 색상 관계 | 특징 |
|---|---|---|
| 보색 | 정반대 위치 | 강한 대비, 시선 집중에 적합 |
| 유사색 | 인접한 색상 | 부드럽고 자연스러운 조화 |
| 삼각색 | 120도 간격 3색 | 균형 잡힌 다채로운 느낌 |
| 분할보색 | 보색의 양 옆 색 | 보색보다 부드러운 대비 |
| 사각색 | 90도 간격 4색 | 풍부하지만 균형 잡기 어려움 |
| 단색조 | 같은 색의 명도/채도 변화 | 통일감 있고 무난한 느낌 |
상황별 어떤 규칙을 쓸까
- CTA 버튼을 눈에 띄게 : 보색 조합. 파란 배경에 주황 버튼이 대표적이다
- 차분한 브랜딩 : 유사색 조합. 파랑+남색+청록처럼 톤이 비슷한 색끼리 쓴다
- 포스터, 인포그래픽 : 삼각색 조합. 세 가지 색으로 구역을 나누기 좋다
- 미니멀 디자인 : 단색조. 하나의 색에서 밝고 어두운 변형만 쓴다
팔레트 만들어보기
이론은 알겠는데 직접 조합해보면 또 다른 문제다. 컬러 팔레트 생성기에서 기준 색 하나를 고르고 배색 규칙을 선택하면, 색상환 위치에 따라 어울리는 조합이 자동으로 만들어진다. 각 색상의 HEX 코드를 클릭하면 바로 복사되니까 피그마나 CSS에 붙여넣기만 하면 된다.
밝기와 채도 변형
같은 파란색이라도 밝기를 10%에서 90%까지 조절하면 완전히 다른 분위기가 나온다. 메인 컬러를 정한 뒤 밝기 변화 팔레트를 만들면, 배경(밝은 톤)과 강조(어두운 톤)를 같은 계열에서 뽑을 수 있어서 통일감이 생긴다.
TIP 색 조합에 자신이 없다면 인기 팔레트(자연, 뉴트럴, 비비드 등)에서 시작하는 것도 방법이다. 기존에 검증된 조합을 기반으로 미세 조정하면 실패 확률이 줄어든다.
배색 감각은 타고나는 게 아니라 규칙을 아느냐의 차이다. 보색 하나만 제대로 써도 디자인이 한 단계 달라진다.