PPT 배경색을 파란색으로 깔았는데 글자를 무슨 색으로 해야 할지 모르겠다. 대충 노란색을 올렸더니 눈이 아프고, 흰색은 밋밋하다. 색 감각이 없어서가 아니라, 배색에는 규칙이 있는데 그걸 모르는 것이다.
색상환과 배색 규칙
색상환은 빨강, 주황, 노랑, 초록, 파랑, 보라를 원형으로 배치한 도표다. 이 원 위에서 색상 간의 거리와 위치 관계가 배색 규칙의 기초가 된다.
보색 (Complementary)
색상환에서 정반대(180도)에 위치한 두 색이다. 빨강과 초록, 파랑과 주황이 보색 관계다. 대비가 강렬해서 주목도가 높지만, 둘을 같은 비율로 쓰면 시각적으로 충돌한다. 한쪽을 주색으로, 반대쪽을 포인트로 쓰는 게 일반적이다.
유사색 (Analogous)
색상환에서 이웃한 색들의 조합이다. 파랑, 남색, 보라처럼 서로 가까운 색을 묶으면 부드럽고 통일감 있는 느낌이 난다. 자연에서 흔히 볼 수 있는 조합이라 거부감이 적다.
삼각색 (Triadic)
색상환에서 120도 간격으로 세 색을 고른다. 빨강, 노랑, 파랑이 대표적이다. 세 색 모두 뚜렷해서 활기찬 느낌을 주는데, 비율 조절을 잘못하면 산만해진다.
단색조 (Monochromatic)
하나의 색에서 밝기와 채도만 바꿔가며 만드는 조합이다. 진한 남색, 중간 남색, 연한 남색처럼 같은 계열을 단계적으로 쓴다. 실패할 확률이 가장 낮은 안전한 배색이다.
상황별 배색 선택 가이드
- 프레젠테이션
- 배경은 어두운 색, 텍스트는 밝은 색(또는 반대)으로 명도 대비를 확보한다. 유사색 기반에 포인트 하나만 보색으로 넣으면 깔끔하다.
- 쇼핑몰/웹사이트
- 브랜드 컬러 하나를 정하고 단색조 변형으로 UI를 구성하면 일관성이 생긴다. CTA 버튼만 보색 계열로 두면 클릭 유도 효과가 있다.
- 로고 디자인
- 2~3색 이내가 좋다. 삼각색 조합은 역동적인 브랜드, 유사색은 차분한 브랜드에 어울린다.
- 인스타 피드 톤 맞추기
- 단색조나 유사색 기반으로 피드 전체의 색감을 통일하면 프로필 방문 시 정돈된 인상을 준다.
색상 코드 읽는 법
디지털 디자인에서 색상은 HEX 코드로 표현된다. #FF5733처럼 # 뒤에 6자리 영숫자가 오는 형태다. 앞 두 자리가 빨강(FF), 중간이 초록(57), 마지막이 파랑(33)의 강도를 나타낸다. 00이 가장 약하고 FF가 가장 강하다.
#000000: 검정 (모든 값이 0)#FFFFFF: 흰색 (모든 값이 최대)#FF0000: 순수한 빨강#808080: 중간 회색
배색 조합 직접 만들어보기
색상 이론을 외울 필요까지는 없다. 컬러 팔레트 생성기에서 기준 색상을 하나 고르고 배색 규칙(보색, 유사색, 삼각색 등)을 선택하면 어울리는 색상 5개가 자동으로 나온다. 밝기와 채도 변형도 단계별로 보여주니까, 메인 컬러 하나만 정하면 나머지는 도구가 채워준다. 마음에 드는 조합이 나오면 HEX 코드를 복사해서 바로 쓸 수 있다.
참고 색각 이상(색맹, 색약)을 가진 사용자는 빨강-초록 보색 조합을 구분하지 못할 수 있다. 웹 접근성을 고려한다면 색상뿐 아니라 명도 대비도 함께 확인하는 게 좋다.
디자인 감각이 탁월한 사람도 배색 규칙 위에서 작업한다. 규칙을 알면 감이 아니라 근거로 색을 고를 수 있다.