유틸리티

색상 조합 잘 고르는 법, 배색 규칙 6가지와 실전 활용

PPT 배경은 파란색으로 했는데 글씨를 무슨 색으로 해야 할지 모르겠다. 감으로 골라봐도 뭔가 촌스럽다. 디자이너가 아니라서 색 감각이 없다고 느끼는 건 착각이다. 색상 조합에는 수학적 규칙이 있고, 그 규칙만 따르면 누구나 보기 좋은 배색을 만들 수 있다.

색상환부터 이해하자

색상환(Color Wheel)은 빨강, 주황, 노랑, 초록, 파랑, 보라를 원형으로 배열한 것이다. 배색 규칙은 전부 이 원 위에서 색상 간의 각도 관계로 설명된다. 정반대에 있으면 보색, 바로 옆에 있으면 유사색. 이 개념만 알면 아래 6가지 규칙이 한눈에 들어온다.

배색 규칙 6가지

1. 보색 (Complementary)

색상환에서 180도 정반대에 있는 두 색이다. 빨강과 초록, 파랑과 주황 같은 조합이다. 대비가 강렬해서 시선을 끄는 데 좋지만, 두 색을 같은 비율로 쓰면 눈이 피로하다. 주색 70% + 보색 30% 정도로 비율을 조절하면 안정적이다.

2. 유사색 (Analogous)

색상환에서 바로 옆에 붙어 있는 색끼리 묶는 방식이다. 파랑-남색-보라, 노랑-연두-초록 같은 조합이 해당한다. 자연에서 흔히 볼 수 있는 배색이라 부드럽고 편안한 인상을 준다. 단조로워지기 쉬우니 명도나 채도에 변화를 줘야 한다.

3. 삼각색 (Triadic)

색상환 위에서 120도 간격, 정삼각형 꼭짓점에 해당하는 세 색이다. 빨강-노랑-파랑이 대표적이다. 세 색 모두 채도가 높으면 유아용 디자인 느낌이 나니까, 하나만 진하게 쓰고 나머지는 톤을 낮추는 게 포인트다.

4. 분할보색 (Split-Complementary)

보색 대신 보색 양옆 두 색을 쓰는 방식이다. 보색만큼 강렬하지 않으면서도 충분히 대비가 살아 있다. 디자인 초보가 쓰기에 가장 실패 확률이 낮은 규칙이다.

5. 사각색 (Square)

색상환에서 90도 간격으로 네 색을 고른다. 색이 네 개나 되니까 균형 잡기가 어렵고, 하나를 메인으로 정하고 나머지는 보조로 쓰는 게 안전하다.

6. 단색조 (Monochromatic)

하나의 색상을 골라 밝기와 채도만 달리하는 방식이다. 파란색 하나로 진한 남색부터 연한 하늘색까지 단계를 만드는 것이다. 통일감이 뛰어나서 UI 디자인이나 브랜딩에 많이 쓰인다.

상황별 배색 선택 가이드

상황추천 규칙이유
프레젠테이션단색조 또는 유사색가독성이 높고 산만하지 않다
쇼핑몰 배너보색 또는 분할보색시선을 끌어야 하는 상황에 적합
블로그/포트폴리오유사색 또는 단색조오래 봐도 피로하지 않다
앱 UI단색조 + 강조색 1개일관성 유지하면서 CTA 버튼 강조
인포그래픽삼각색 또는 사각색구분해야 할 항목이 많을 때 유리

직접 팔레트 만들어보기

규칙은 알겠는데 색상환에서 각도를 직접 재기는 번거롭다. 컬러 팔레트 생성기에 기준 색상 하나를 넣고 배색 규칙을 선택하면, 규칙에 맞는 색상 조합이 자동으로 나온다. 보색, 유사색, 삼각색, 분할보색, 사각색, 단색조 6가지가 전부 드롭다운에 있어서 같은 색으로 규칙별 결과를 바로 비교할 수 있다. 마음에 드는 색이 나오면 HEX 코드를 클릭해서 바로 복사하면 된다.

TIP 색상 하나를 정한 뒤 밝기 5단계, 채도 5단계를 한눈에 보여주는 기능도 있다. 메인 색은 정해졌는데 배경이나 서브 색상의 톤을 잡기 어려울 때 참고하면 빠르다.

배색에서 흔히 하는 실수

  • 색이 너무 많다: 한 디자인에 5색 이상 쓰면 산만해진다. 메인 1~2색 + 강조 1색이 적정선이다.
  • 채도가 전부 같다: 모든 색이 원색이면 눈이 아프다. 채도에 강약을 줘야 시선이 자연스럽게 흐른다.
  • 배경과 텍스트 대비 부족: 연한 노랑 배경에 흰 글씨는 읽을 수 없다. WCAG 기준 명도 대비 4.5:1 이상을 맞춰야 한다.

색 감각은 타고나는 게 아니다. 규칙 하나만 정해서 그 안에서 고르면, 못해도 "어색하지 않은" 결과는 나온다. 처음이라면 단색조나 유사색부터 시도해보는 걸 권한다.