PPT 슬라이드에 색을 넣었는데 뭔가 어색하다. 파란색 배경에 빨간 글씨, 초록색 강조. 색 감각이 없다는 문제가 아니라, 배색 규칙을 모르는 것이다. 규칙만 알면 누구나 조화로운 조합을 만들 수 있다.
알아두면 쓸모 있는 배색 규칙 6가지
- 보색 (Complementary)
- 색상환에서 정반대에 있는 두 색이다. 빨강-청록, 파랑-주황 조합. 대비가 강해서 눈에 확 띄지만, 넓은 면적에 동시에 쓰면 눈이 피로해진다. 하나를 주색, 하나를 포인트로 쓰는 게 낫다.
- 유사색 (Analogous)
- 색상환에서 이웃한 2~3개 색이다. 파랑-남색-보라 조합. 자연스럽고 편안한 느낌을 주지만 대비가 약해서 강조 요소가 묻힐 수 있다.
- 삼각배색 (Triadic)
- 색상환을 정삼각형으로 나눈 세 색이다. 빨강-파랑-노랑 같은 조합. 균형 잡히면서도 활기차 보여서 키즈 브랜드나 게임 UI에서 자주 쓴다.
- 분할보색 (Split-Complementary)
- 보색의 양옆 색을 대신 쓰는 방식이다. 보색보다 부드럽지만 대비는 살아 있어서 초보자가 쓰기에 가장 안전하다.
색 조합을 고르는 실전 순서
- 주색(Primary) 결정 : 브랜드 컬러가 있으면 그 색, 없으면 전달하고 싶은 느낌(신뢰=파랑, 에너지=빨강, 자연=초록)에 맞는 색을 하나 고른다
- 배색 규칙 선택 : 주색을 기준으로 보색, 유사색, 삼각배색 중 하나를 적용한다
- 명도/채도 변형 : 같은 파란색이라도 밝기와 채도를 조절하면 5~6가지 변형이 나온다. 배경, 텍스트, 버튼에 각각 다른 명도를 배분하면 깔끔하다
이 과정을 컬러 팔레트 생성기로 하면 색상 피커에서 주색을 찍는 것만으로 6가지 배색 규칙에 따른 조합이 자동으로 만들어진다. HEX 코드도 바로 복사할 수 있어서 CSS에 그대로 붙여넣기 된다.
배색 실수를 줄이는 팁
- 색은 3개 이하로 : 주색 1개, 보조색 1개, 강조색 1개. 그 이상 늘어나면 산만해진다
- 배경과 텍스트의 명암비 : WCAG 기준 4.5:1 이상이어야 읽기 편하다. 연한 회색 배경에 흰 글씨는 보이지 않는다
- 채도 낮추기 : 원색 그대로 쓰면 촌스러워 보이기 쉽다. 채도를 한두 단계 낮추면 세련된 느낌이 난다
TIP 마음에 드는 웹사이트나 사진이 있으면 거기서 색을 뽑아 쓰는 것도 방법이다. 브라우저 확장 프로그램(ColorZilla 등)으로 HEX 코드를 추출한 뒤 팔레트의 기준색으로 넣으면 검증된 조합을 빠르게 만들 수 있다.
색 감각은 타고나는 게 아니라 규칙을 아느냐 모르느냐의 차이다. 배색 규칙 하나만 기억해도 결과물이 달라진다.