배색 기초 — 색 조합 규칙과 60-30-10 법칙

발표 자료의 색을 바꿨더니 갑자기 촌스러워진 경험, 누구나 있습니다. 배색은 감각의 영역처럼 보이지만, 실패하지 않는 규칙 몇 가지만 알면 누구나 정돈된 결과를 만들 수 있습니다. 색상환과 비율 법칙부터 실전 요령까지 정리합니다.

색상환으로 이해하는 색의 관계

색상환은 빨강→주황→노랑→초록→파랑→보라가 둥글게 이어진 원입니다. 배색 규칙은 결국 이 원에서 색들이 어떤 위치 관계인가로 정리됩니다. 가까울수록 편안하고, 멀수록(마주 볼수록) 대비가 강해집니다.

기본 배색 4가지

고민될 때는 단색 또는 유사색 + 보색 포인트 하나가 가장 실패 확률이 낮은 조합입니다.

60-30-10 — 비율이 배색을 살린다

같은 색 조합도 비율에 따라 완성도가 갈립니다. 인테리어에서 온 60-30-10 법칙은 화면에도 그대로 통합니다.

• 60% 주조색: 배경·바탕 — 보통 흰색·밝은 회색 같은 무채색
• 30% 보조색: 본문 요소·카드·제목 — 브랜드 색이나 차분한 색
• 10% 강조색: 버튼·링크·"할인" 뱃지 — 가장 눈에 띄어야 하는 곳에만

실패하지 않는 실전 요령

• 색은 3개까지: 무채색(흰·회·검)을 바탕에 깔고 유채색은 1~2개만 더합니다.
• 검증된 조합 빌리기: 좋아하는 사진·포스터에서 색을 추출하면 자연이 검증한 조합을 얻습니다.
• 규칙으로 생성: 기준색 하나를 정하고 팔레트 생성기로 보색·유사색 조합을 만들면 감각 없이도 어울리는 세트가 나옵니다.
• 글자는 대비 확인: 예쁜 조합도 글자가 안 읽히면 실패입니다. 본문 색은 대비 기준(4.5:1)을 지키세요.
• 채도를 한 단계 낮추기: 원색끼리 부딪혀 촌스러울 때는 색을 바꾸지 말고 채도만 낮춰 보세요. 대부분 해결됩니다.

한 색에서 배색을 뽑아 보면

기준색 #DF4324(hsl 10°, 75%, 51%)에서 색조만 돌리거나 명도만 바꿔 컬러 피커로 구한 값입니다.

색조만 돌린 색들은 채도와 명도가 같아 서로 세기가 비슷합니다. 그대로 같은 비중으로 쓰면 서로 싸우므로, 60-30-10 비율로 주색과 강조색의 면적을 나누거나 명도 단계를 섞어 써야 합니다. 배경에는 L 90% 같은 밝은 단계를, 글자에는 L 20% 같은 어두운 단계를 쓰면 한 가지 색조만으로도 화면을 구성할 수 있습니다.

컬러 팔레트 생성 도구는 명도를 82%에서 30%까지 다섯 단계로 고정하고 색조를 조금씩 돌려 팔레트를 만듭니다. 같은 방식으로 10만 개를 만들어 보니, 가장 밝은 색과 가장 어두운 색을 배경·글자로 짝지었을 때 본문 대비 기준(4.5:1)을 넘는 경우는 52.8%였습니다. 조화로운 배색과 읽기 좋은 대비는 별개라는 뜻입니다.