색상 조합 추천, 어울리는 배색 찾는 6가지 방법

로고 색상은 정했는데 배경색, 버튼 색, 텍스트 색을 뭘로 해야 할지 모르겠다. 감으로 고르면 촌스러워지기 쉽고, 이미 잘 만들어진 사이트 색을 따라 하자니 저작권이 걸린다. 색상 조합에는 규칙이 있고, 이 규칙을 따르면 누구나 조화로운 배색을 만들 수 있다.

배색 규칙 6가지

보색 (Complementary)

색상환에서 정반대에 있는 두 색. 강한 대비 효과로 시선을 끌 때 사용한다. 예: 파랑-주황.

유사색 (Analogous)

색상환에서 인접한 3개 색. 자연스럽고 편안한 느낌을 준다. 예: 초록-청록-파랑.

삼각색 (Triadic)

색상환을 120도 간격으로 3등분한 색. 균형 잡히면서도 화려하다.

분할보색 (Split-Complementary)

보색의 양옆 색을 사용. 보색만큼 강렬하지 않으면서 적절한 대비를 준다.

사각색 (Square)

색상환을 90도 간격으로 4등분. 다채로운 조합이 필요할 때 쓴다.

단색조 (Monochromatic)

한 가지 색의 밝기와 채도만 변화시킨 조합. 깔끔하고 통일감이 있다.

실무에서 가장 안전한 조합법

처음 배색을 잡을 때는 단색조 + 강조색 1개가 가장 실패 확률이 낮다. 메인 색상의 밝기 변화로 배경, 카드, 텍스트를 처리하고, CTA 버튼이나 중요한 요소에만 보색 계열의 강조색을 넣는 방식이다.

기준색 하나로 팔레트 만들기

컬러 팔레트 생성기에서 기준색을 피커로 선택하거나 HEX 코드를 입력하면, 선택한 배색 규칙에 따라 5가지 조화색이 자동으로 나온다. 각 색상의 밝기 변화(10~90%)와 채도 변화도 함께 보여줘서 hover 상태나 비활성 상태 색상을 잡을 때 유용하다.

TIP 배색이 도저히 떠오르지 않으면 랜덤 생성 버튼을 눌러보자. 마음에 드는 조합이 나올 때까지 몇 번 돌려보고, 거기서 미세 조정을 하는 게 빈 캔버스에서 시작하는 것보다 훨씬 빠르다.

용도별 배색 팁

색감 센스는 타고나는 것만은 아니다. 규칙을 알고 도구를 쓰면 충분히 좋은 배색을 만들 수 있다.