로고 색은 정했는데 배경이랑 버튼 색을 뭘로 해야 할지 감이 안 온다. 감각이 있으면 좋겠지만 대부분의 비디자이너에게 배색은 막막한 영역이다. 다행히 색상 이론에 기반한 규칙이 있고, 규칙만 따라가면 어색하지 않은 조합이 나온다.
6가지 배색 규칙
1. 보색 (Complementary)
색상환에서 정반대에 있는 두 색. 파란색과 주황색, 빨간색과 초록색이 대표적이다. 강한 대비가 필요할 때 쓴다. CTA 버튼에 보색을 적용하면 시선을 끌기 좋다.
2. 유사색 (Analogous)
색상환에서 이웃한 3~4개의 색. 파란색 + 남색 + 보라색처럼 자연스럽게 이어지는 조합이다. 차분하고 통일감 있는 디자인에 적합하다.
3. 삼각색 (Triadic)
색상환에서 정삼각형 위치의 세 색. 빨강 + 파랑 + 노랑이 기본 삼각색이다. 다채로우면서도 균형이 잡히는 조합이지만, 채도를 낮추지 않으면 산만해질 수 있다.
4. 분할보색 (Split-Complementary)
보색 대신 보색의 양 옆 두 색을 쓰는 방식. 보색만큼 강렬하지 않으면서 대비 효과는 유지된다. 실패 확률이 가장 낮아서 초보자에게 권장되는 조합이다.
5. 사각색 (Tetradic)
색상환에서 직사각형 위치의 네 색. 쓸 수 있는 색이 많아 풍부한 표현이 가능하지만, 네 색의 비중 조절이 까다롭다. 주색 하나를 정하고 나머지는 보조로 쓰는 게 안전하다.
6. 단색조 (Monochromatic)
하나의 색상에서 밝기와 채도만 바꾸는 방식. 파란색을 기준으로 연한 파랑, 중간 파랑, 진한 파랑으로 구성하면 깔끔하고 세련된 느낌이 난다. UI 디자인에서 가장 무난하게 쓸 수 있다.
실전 팁: 색상 3개를 쓴다면 비율을 60:30:10으로 배분하자. 60%는 배경(주색), 30%는 보조색, 10%는 강조색이다. 이 비율만 지켜도 시각적으로 안정감 있는 화면이 만들어진다.
색 조합 뽑는 가장 빠른 방법
기준 색상 하나만 정하면 나머지를 자동으로 계산해주는 도구가 있다. 컬러 팔레트 생성기에서 원하는 색을 피커로 고르거나 HEX 코드를 넣으면 보색, 유사색, 삼각색 등 6가지 규칙에 따른 조합이 한 번에 나온다. 각 색상의 밝기와 채도 변형까지 보여주기 때문에, 메인 색만 정해두면 전체 팔레트를 빠르게 완성할 수 있다.
배색 감각은 규칙 위에서 자란다. 6가지 조합법 중 하나만 제대로 써도 "색이 안 어울린다"는 피드백은 줄어든다.