색상 하는법을 제대로 익히면 디자인 결과물의 완성도가 눈에 띄게 달라집니다. 색을 감각에만 의존해 고르면 어색한 조합이 나오기 쉽지만, 몇 가지 원리를 이해하면 누구나 안정적인 배색을 만들 수 있습니다. 이 글에서는 색의 기본 속성부터 실전 배색 원칙, 색상 코드 다루는 법까지 순서대로 살펴봅니다.
색의 3가지 기본 속성 이해하기
색상을 다루기 전에 반드시 알아야 할 개념이 색의 3속성입니다. 이 세 가지를 구분해서 조절할 줄 알면 원하는 색을 정확하게 만들 수 있습니다.
- 색상(Hue): 빨강, 파랑, 노랑처럼 색의 종류를 구분하는 기준입니다. 색상환에서 0도부터 360도까지의 각도로 표현됩니다.
- 채도(Saturation): 색의 선명함 정도입니다. 채도가 높으면 쨍한 원색, 낮으면 회색에 가까운 탁한 색이 됩니다.
- 명도(Value/Lightness): 색의 밝고 어두움입니다. 명도가 높을수록 흰색에, 낮을수록 검은색에 가까워집니다.
실전 배색 5가지 원칙
색을 조합할 때는 무작정 고르기보다 검증된 배색 방식을 활용하는 것이 좋습니다. 색상환 위에서 색의 위치 관계를 기준으로 다음 5가지를 기억해 두면 실패 확률이 크게 줄어듭니다.
- 단색 배색: 하나의 색상에서 명도와 채도만 다르게 조합합니다. 통일감이 가장 강하고 안정적입니다.
- 유사색 배색: 색상환에서 인접한 색(예: 파랑과 청록)을 사용합니다. 부드럽고 조화로운 느낌을 줍니다.
- 보색 배색: 색상환에서 정반대에 있는 색(예: 빨강과 초록)을 씁니다. 강한 대비로 시선을 끌 때 효과적입니다.
- 삼각 배색: 색상환을 삼등분한 세 색을 사용해 균형감 있으면서도 화려한 조합을 만듭니다.
- 분리 보색 배색: 보색의 양옆 색을 함께 써서 대비는 유지하되 부담을 줄입니다.
색상 코드와 변환 다루기
웹과 디자인 작업에서는 색을 코드로 표현합니다. 대표적인 세 가지 방식의 특징을 정리하면 다음과 같습니다.
| 표기 방식 | 예시 | 주요 용도 |
|---|---|---|
| HEX | #1e3a5f | 웹, CSS에서 가장 널리 사용 |
| RGB | rgb(30, 58, 95) | 화면 출력, 투명도 조절(RGBA) |
| HSL | hsl(212, 52%, 25%) | 색 조절, 명도/채도 미세 조정 |
같은 색이라도 상황에 따라 다른 표기법이 필요합니다. 예를 들어 브랜드 색을 HEX로 받았는데 명도만 살짝 낮춰 어두운 버전을 만들고 싶다면 HSL로 변환하는 편이 훨씬 편합니다. 이런 코드 변환 작업을 손으로 계산하면 번거롭기 때문에 색상 변환기를 활용하면 HEX와 RGB, HSL 값을 한 번에 확인할 수 있어 편리합니다.
상황별 색상 활용 팁
같은 배색 원칙도 목적에 따라 다르게 적용해야 합니다. 자주 마주치는 몇 가지 상황을 기준으로 정리했습니다.
- 가독성이 중요한 본문: 배경과 글자의 명도 대비를 충분히 확보합니다. 밝은 배경에는 어두운 글자를 쓰는 것이 기본입니다.
- 버튼과 강조 요소: 주변과 확실히 구분되도록 채도가 높은 강조색을 소량만 사용합니다.
- 차분한 분위기: 채도를 낮추고 유사색 위주로 구성하면 정돈되고 신뢰감 있는 인상을 줍니다.
자주 하는 실수와 점검 방법
초보자가 배색에서 흔히 겪는 문제는 대부분 몇 가지로 정해져 있습니다. 아래 항목을 작업 전에 점검하면 완성도를 크게 높일 수 있습니다.
- 너무 많은 색을 한 화면에 쓰는 경우: 핵심 색은 3~4가지 이내로 제한합니다.
- 채도가 높은 색을 넓은 면적에 사용하는 경우: 넓은 영역에는 낮은 채도, 좁은 영역에는 높은 채도가 안정적입니다.
- 명도 대비가 부족한 경우: 흑백으로 바꿔 봤을 때 요소가 잘 구분되는지 확인합니다.
결국 색상 하는법의 핵심은 감각을 원리로 뒷받침하는 것입니다. 색의 3속성을 이해하고, 검증된 배색 원칙을 적용하며, 색상 코드를 정확히 관리하는 습관을 들이면 어떤 작업에서도 일관되고 완성도 높은 결과를 만들 수 있습니다.