로고 색을 정했는데 배경색, 버튼색, 텍스트색을 뭘로 해야 할지 막막하다. 감각적으로 골라보면 원색 범벅이 되거나, 전부 비슷비슷해서 밋밋하거나. 색상 조합에는 규칙이 있고, 그 규칙을 알면 선택이 훨씬 수월해진다.
색상환과 배색 규칙
색상환(Color Wheel)은 빨강, 주황, 노랑, 초록, 파랑, 보라가 원형으로 배치된 도표다. 배색 규칙은 이 색상환에서 색을 고르는 위치 관계를 말한다.
보색 (Complementary)
색상환에서 정반대(180도) 위치의 두 색. 파랑과 주황, 빨강과 초록 같은 조합이다. 대비가 강해서 주목도를 높여야 하는 CTA 버튼이나 경고 표시에 효과적이다. 다만 두 색을 동일 비율로 쓰면 눈이 피로해지니까, 주색 70% + 보색 30% 정도 비율이 안정적이다.
유사색 (Analogous)
색상환에서 인접한 2~3색의 조합. 파랑-청록-초록처럼 비슷한 계열끼리 모으는 것이다. 자연스럽고 편안한 느낌을 주며, 실패 확률이 가장 낮다. 단점은 단조로울 수 있다는 것.
삼각색 (Triadic)
색상환에서 120도 간격의 세 색. 빨강-노랑-파랑이 대표적이다. 세 색이 균형 잡힌 생동감을 주는데, 채도를 낮추지 않으면 유치해 보일 수 있다.
실전 배색 팁
- 60-30-10 법칙: 주색 60%, 보조색 30%, 강조색 10%. 인테리어에서 온 법칙인데 웹 디자인에도 그대로 적용된다
- 채도를 낮추면 세련됨: 순색(원색)보다 채도를 살짝 낮춘 톤이 모던해 보인다. 파스텔이 인기 있는 이유가 이것
- 무채색은 만능: 흰색, 회색, 검정은 어떤 유채색과도 충돌하지 않는다. 배경이나 텍스트에 무채색을 쓰면 유채색이 돋보인다
- 브랜드 색상은 1~2개로: 주요 브랜드 색상을 너무 많이 쓰면 정체성이 흐려진다. 코카콜라는 빨강 하나로 충분하다
참고 색각 이상(색맹/색약)이 있는 사용자도 있다. 빨강과 초록의 대비에만 의존하는 디자인은 피하고, 색 외에 아이콘이나 패턴으로도 구분할 수 있게 해야 접근성이 좋아진다.
배색 조합 빠르게 뽑기
기준색 하나만 정하면 나머지 조합은 규칙에 따라 자동으로 나온다. 컬러 팔레트 생성기에서 색상을 하나 고르고 배색 규칙(보색, 유사색, 삼각색 등)을 선택하면 5가지 색상이 자동 생성된다. 각 색상의 HEX 코드를 클릭하면 바로 복사되고, 밝기와 채도 변화까지 탭으로 확인할 수 있어서 톤 조절도 한 화면에서 가능하다. 랜덤 생성 기능은 아직 방향이 안 잡혔을 때 영감을 얻기 좋다.
색 감각은 타고나는 게 아니라 규칙을 아는 거다. 배색 규칙 하나만 적용해도 결과물이 달라진다.