로고 색은 파란색으로 정했다. 그런데 배경은 뭘로 하고, 버튼은 무슨 색으로 해야 하지? 감각적으로 고르면 어색한 조합이 나오고, 이것저것 바꾸다 보면 시간만 날아간다. 색상 조합에는 이론이 있고, 규칙대로 하면 실패 확률이 확 줄어든다.
6가지 배색 규칙과 특징
보색 (Complementary)
색상환에서 정반대에 있는 두 색이다. 파랑-주황, 빨강-초록 같은 조합. 대비가 강해서 시선을 확 끌어야 하는 CTA 버튼이나 세일 배너에 적합하다. 다만 두 색을 같은 면적으로 쓰면 눈이 피로해지니, 한쪽을 주색(70%)으로 나머지를 포인트(30%)로 배분하는 게 좋다.
유사색 (Analogous)
색상환에서 나란히 붙어 있는 색들이다. 초록-연두-노랑, 파랑-남색-보라 같은 조합. 자연에서 흔히 볼 수 있는 배색이라 편안한 느낌을 준다. 블로그, 포트폴리오, 카페 메뉴판처럼 부드러운 분위기가 필요한 곳에 잘 맞는다.
삼각색 (Triadic)
색상환에서 120도 간격으로 세 색을 고르는 방식이다. 빨강-노랑-파랑이 대표적인 삼각색 조합으로, 활기차고 균형 잡힌 인상을 준다. 키즈 브랜드나 놀이공원 같은 생동감 있는 디자인에 자주 쓰인다.
| 배색 규칙 | 색상 수 | 인상 | 적합한 용도 |
|---|---|---|---|
| 보색 | 2 | 강렬한 대비 | CTA 버튼, 광고 배너 |
| 유사색 | 3 | 자연스러운 조화 | 블로그, 포트폴리오 |
| 삼각색 | 3 | 활기, 균형 | 키즈 브랜드, 앱 UI |
| 분할보색 | 3 | 부드러운 대비 | 프레젠테이션, 인포그래픽 |
| 사각색 | 4 | 풍부, 다채 | 잡지 레이아웃, 일러스트 |
| 단색조 | 5+ | 세련, 통일감 | 기업 브랜딩, 미니멀 디자인 |
기준 색 하나로 팔레트 뽑기
브랜드 색상이나 마음에 드는 색 하나만 있으면 나머지는 컬러 팔레트 생성기가 배색 규칙에 따라 자동으로 계산해준다. 컬러 피커로 색을 고르거나 HEX 코드를 직접 입력하고, 원하는 배색 규칙을 선택하면 5개 색상이 한 번에 나온다. 각 색상의 HEX 코드를 클릭하면 클립보드에 복사되니까 디자인 도구에 바로 붙여넣을 수 있다.
실전 배색 팁
- 60-30-10 법칙 : 주색 60%, 보조색 30%, 강조색 10% 비율로 배분하면 시각적으로 안정감이 생긴다. 인테리어 디자인에서 온 규칙인데 웹디자인에도 그대로 통한다.
- 밝기로 계층 만들기 : 같은 파란색이라도 밝은 톤은 배경에, 진한 톤은 텍스트에 쓰면 읽기 편하다. 단색조 배색이 이 원리를 활용한 것이다.
- 채도 통일 : 형광 초록과 파스텔 핑크를 함께 쓰면 어색하다. 팔레트 안의 색상은 채도 수준을 비슷하게 맞추는 게 자연스럽다.
TIP 뭘 골라야 할지 모르겠으면 랜덤 생성 버튼을 눌러보자. 생각지 못한 조합이 나올 때가 있고, 마음에 드는 색 하나를 발견하면 거기서부터 배색 규칙을 적용해 확장하면 된다.
색 감각은 타고나는 게 아니라 규칙을 아느냐 모르느냐의 차이다. 보색, 유사색, 삼각색 세 가지만 알아도 어색한 배색은 피할 수 있다.