브랜드 메인 컬러를 파란색으로 정했다. 그런데 버튼은 무슨 색으로 해야 하고, 배경은 어떤 톤이어야 하는지 감이 안 온다. 색감에 자신 없는 사람일수록 배색 규칙을 알면 실수를 줄일 수 있다.
배색 규칙 6가지
색상환(Color Wheel)을 기준으로 조화로운 조합을 만드는 규칙이 있다. 규칙마다 분위기가 다르니 목적에 맞게 선택하면 된다.
| 규칙 | 원리 | 느낌 | 사용 예 |
|---|---|---|---|
| 보색 | 색상환 정반대 (180°) | 강렬한 대비 | CTA 버튼, 경고 배지 |
| 유사색 | 인접 색상 (30° 간격) | 자연스럽고 부드러움 | 자연/힐링 테마 |
| 삼각색 | 120° 간격 3색 | 생동감, 균형 | 다채로운 인포그래픽 |
| 분할보색 | 보색의 양옆 색상 | 대비 있되 부드러움 | 웹사이트 메인 배색 |
| 사각색 | 90° 간격 4색 | 풍부함 | 대시보드, 차트 |
| 단색조 | 같은 색의 밝기/채도 변화 | 통일감, 세련됨 | 미니멀 디자인 |
실무에서 쓰기 좋은 조합 팁
60-30-10 법칙
인테리어에서 온 규칙인데 웹 디자인에도 그대로 적용된다.
- 60%: 주요 배경색 (흰색, 연한 회색 등 중립 톤)
- 30%: 보조색 (섹션 배경, 카드 색상)
- 10%: 강조색 (버튼, 링크, 중요 요소)
이 비율을 지키면 화면이 산만하지 않으면서도 핵심 요소가 눈에 들어온다.
명도 대비 확인
배경색 위의 텍스트가 잘 읽히려면 명도 대비가 충분해야 한다. WCAG 기준으로 일반 텍스트는 4.5:1 이상, 큰 텍스트는 3:1 이상의 대비율이 필요하다. 예쁜 조합이어도 텍스트가 안 읽히면 쓸모가 없다.
팔레트 만들기
기준이 될 색상 하나만 정하면 나머지는 자동으로 나온다. 컬러 팔레트 생성기에서 컬러 피커로 색을 고르거나 HEX 코드를 직접 입력하고, 배색 규칙을 선택하면 5가지 색상이 조합되어 표시된다. 랜덤 버튼을 누르면 예상 못한 조합이 나오기도 하는데, 영감이 막혔을 때 유용하다. 밝기 변화와 채도 변화 탭에서 선택한 색의 톤 스펙트럼도 확인할 수 있다.
TIP 색상을 클릭하면 HEX 코드가 클립보드에 복사된다. CSS나 디자인 툴에 바로 붙여넣을 수 있으니 색상 코드를 따로 메모할 필요가 없다.
자주 묻는 질문
HEX, RGB, HSL 중 뭘 써야 하나요?
웹 CSS에서는 HEX(#FF5733)나 RGB가 일반적이다. 색상 조합을 다룰 때는 HSL이 직관적이다. 색상(Hue), 채도(Saturation), 밝기(Lightness)를 각각 조절할 수 있어서 변형하기 쉽다.
다크 모드용 팔레트는 어떻게 만드나요?
라이트 모드 팔레트의 밝기를 반전시키는 것이 기본이다. 배경을 어둡게(#121212 등), 텍스트를 밝게 바꾸고, 강조색의 채도를 약간 낮추면 어두운 배경에서 덜 자극적이다.
색맹/색약 사용자를 위한 배색 팁이 있나요?
빨강-초록 조합은 피하는 게 좋다. 색상만으로 정보를 전달하지 말고, 아이콘이나 패턴을 함께 써야 접근성이 높아진다. 대비율 확인도 필수다.
색감 감각이 뛰어나지 않아도 배색 규칙만 따르면 어색하지 않은 조합이 나온다. 기준 색 하나와 규칙 하나만 정하면 나머지는 계산으로 풀 수 있는 문제다.