로고 색을 파란색으로 정했는데, 배경은 무슨 색으로 해야 할지, 버튼은 또 무슨 색으로 해야 할지 막막하다. 감으로 고르면 촌스러워지고, 레퍼런스를 아무리 봐도 왜 그 조합이 좋은지 이해가 안 된다. 색상 조합에는 규칙이 있다.
6가지 배색 규칙과 쓰임새
보색 (Complementary)
색상환에서 정반대(180도)에 있는 두 색이다. 파란색의 보색은 주황색, 빨간색의 보색은 초록색. 대비가 강해서 주목도를 높여야 하는 CTA 버튼이나 배너에 적합하다. 다만 두 색을 동일 비율로 쓰면 눈이 피로해지니까 7:3 정도 비율로 배분하는 게 좋다.
유사색 (Analogous)
색상환에서 나란히 붙어 있는 색들이다. 파란색 기준이면 남색과 청록색이 유사색이 된다. 자연스럽고 편안한 느낌을 주기 때문에 블로그, 매거진 같은 콘텐츠 사이트에 많이 쓴다.
삼각색 (Triadic)
색상환에서 120도 간격으로 세 색을 고른다. 빨강, 파랑, 노랑이 대표적인 삼각 배색이다. 세 색 모두 쓰면 산만해질 수 있으니 하나를 주색으로, 나머지 둘을 포인트로 쓰는 게 정석이다.
- 분할보색 (Split-Complementary)
- 보색의 양옆 색을 쓰는 방식. 보색만큼 강렬하지 않으면서도 대비 효과를 유지한다.
- 사각색 (Square)
- 90도 간격 네 색. 복잡한 디자인에서 다양한 색이 필요할 때 균형 잡힌 조합을 제공한다.
- 단색조 (Monochromatic)
- 하나의 색에서 밝기와 채도만 바꾼다. 통일감이 강해서 미니멀한 UI 디자인에 잘 맞는다.
기준 색 하나로 팔레트 뽑기
브랜드 메인 컬러가 #3B82F6(파란색)이라면, 컬러 팔레트 생성기에 이 값을 넣고 배색 규칙을 고르면 나머지 4개 색이 자동으로 계산된다. 보색을 선택하면 주황 계열이 나오고, 유사색을 선택하면 남색과 청록 계열이 나온다. 각 색의 HEX 코드를 바로 복사할 수 있어서 CSS에 옮기기 편하다.
랜덤 생성 기능도 있으니 아이디어가 없을 때 돌려보면 의외의 조합을 발견할 수 있다. 인기 팔레트 섹션에는 다른 사용자들이 자주 쓰는 조합 8가지가 큐레이션돼 있어서 참고하기 좋다.
TIP 배경색과 텍스트 색의 명도 차이가 충분하지 않으면 가독성이 떨어진다. WCAG 기준으로 명도 대비율 4.5:1 이상을 권장한다. 밝은 배경에 밝은 글씨, 어두운 배경에 어두운 글씨는 피하자.