브랜드 메인 컬러를 파란색으로 정했다. 그런데 버튼은 무슨 색으로 해야 하는지, CTA 영역에는 어떤 색이 눈에 띄는지 감이 안 잡힌다. 색 감각이 없어도 배색 원리를 알면 어울리는 조합을 찾을 수 있다.
알아두면 되는 배색 규칙 4가지
1. 보색 (Complementary)
색상환에서 정반대에 위치한 두 색이다. 파랑-주황, 빨강-초록 같은 조합. 강렬한 대비를 만들기 때문에 CTA 버튼이나 강조 요소에 적합하다. 단, 두 색을 동일 면적으로 쓰면 눈이 피로해지니까 한쪽을 주색, 반대쪽을 포인트로 쓰는 게 좋다.
2. 유사색 (Analogous)
색상환에서 바로 옆에 있는 색들이다. 파랑-남색-보라 같은 조합. 자연스럽고 안정적인 느낌을 주기 때문에 전체 배경이나 카드 디자인에 많이 쓴다.
3. 삼각색 (Triadic)
색상환에서 120도 간격으로 떨어진 세 색이다. 빨강-노랑-파랑이 대표적. 다채롭지만 균형 잡힌 느낌을 준다. 세 색의 채도를 조절해서 하나만 강하게 쓰면 산만하지 않다.
4. 단색조 (Monochromatic)
하나의 색상에서 밝기와 채도만 바꾼 조합이다. 진한 파랑, 중간 파랑, 연한 파랑을 함께 쓰는 식. 가장 실패 확률이 낮은 방법이라 디자인 초보에게 적합하다.
실전에서 이렇게 쓴다
| 용도 | 권장 배색 | 이유 |
|---|---|---|
| 웹사이트 전체 톤 | 유사색 또는 단색조 | 통일감, 눈에 편안함 |
| CTA 버튼 | 메인 색상의 보색 | 시선 집중 효과 |
| 대시보드·차트 | 삼각색 | 항목 구분이 명확 |
| 브랜드 로고 | 보색 또는 분할보색 | 기억에 남는 대비 |
기준 색상에서 팔레트 뽑는 법
메인 컬러의 HEX 코드(예: #2563EB)를 컬러 팔레트 생성기에 입력하면, 선택한 배색 규칙에 따라 어울리는 5가지 색상이 자동으로 나온다. 보색, 유사색, 삼각색, 분할보색, 사각색, 단색조 중 골라서 비교해볼 수 있다. 각 색상 타일을 클릭하면 HEX 코드가 바로 복사되니까 피그마나 CSS에 바로 붙여넣으면 된다. 인기 팔레트 프리셋(자연, 파스텔, 네이비 등)도 제공되어서 처음부터 조합을 고민할 필요 없이 참고할 수 있다.
TIP 배경색과 텍스트 색의 명암비(contrast ratio)가 4.5:1 이상이어야 웹 접근성 기준(WCAG AA)을 충족한다. 예쁜 조합이라도 글자가 안 읽히면 쓸 수 없으니, 팔레트를 정한 뒤 명암비도 확인하는 게 좋다.
색 감각은 타고나는 것만은 아니다. 배색 규칙을 기반으로 조합하면 적어도 어색하지 않은 결과가 나온다. 거기서 채도와 밝기를 미세하게 조절하면 자기만의 톤이 만들어진다.