블로그 디자인을 바꾸려는데, 메인 색상은 정했지만 나머지 색을 어떻게 골라야 할지 감이 안 온다. 아무 색이나 조합해보면 눈이 피로하거나 밋밋해진다. 색상 조합에는 규칙이 있고, 그 규칙을 따르면 비전공자도 괜찮은 배색을 만들 수 있다.
색상환과 배색 규칙
색상환은 빨강, 주황, 노랑, 초록, 파랑, 보라를 원형으로 배치한 것이다. 배색 규칙은 이 원 위에서 색상 간 각도 관계를 기준으로 한다.
- 보색 (Complementary)
- 색상환에서 정반대(180도)에 있는 두 색이다. 빨강과 초록, 파랑과 주황 같은 조합으로 강렬한 대비를 만든다. 눈에 확 띄어야 하는 CTA 버튼이나 강조 포인트에 쓰인다.
- 유사색 (Analogous)
- 색상환에서 바로 옆에 붙어 있는 색들이다. 파랑-청록-초록 같은 조합으로 자연스럽고 편안한 느낌을 준다. 블로그나 포트폴리오 배경에 무난하다.
- 삼각색 (Triadic)
- 120도 간격으로 세 색을 고른다. 빨강-노랑-파랑이 대표적이다. 세 색이 고르게 퍼져 있어서 활기찬 느낌을 주지만, 채도를 낮추지 않으면 정신없어 보일 수 있다.
- 분할보색 (Split-Complementary)
- 보색 양옆의 두 색을 대신 쓰는 방식이다. 보색보다 대비가 부드러워서 실패 확률이 낮다.
- 단색조 (Monochromatic)
- 한 가지 색의 밝기와 채도만 바꿔서 조합한다. 통일감이 강하고 세련된 느낌을 주지만, 자칫 단조로워질 수 있다.
용도별 배색 선택 가이드
| 용도 | 추천 배색 규칙 | 이유 |
|---|---|---|
| 블로그, 개인 사이트 | 유사색 또는 단색조 | 장시간 읽어도 눈이 편해야 한다 |
| 쇼핑몰 할인 배너 | 보색 | 시선을 강하게 끌어야 한다 |
| 프레젠테이션 | 분할보색 | 강조와 가독성의 균형이 필요하다 |
| 브랜드 로고 | 삼각색 또는 보색 | 기억에 남는 대비감이 중요하다 |
| 앱 UI | 단색조 + 강조색 1개 | 깔끔한 인터페이스에 포인트 하나 |
기준 색상 하나만 정하면 된다
배색의 시작은 기준 색상(Key Color) 하나를 정하는 것이다. 브랜드 로고 색이든, 마음에 드는 색이든 하나만 고르면 나머지는 배색 규칙이 정해준다. 컬러 팔레트 생성기에 기준 색상의 HEX 코드를 넣거나 컬러 피커로 고르면, 보색, 유사색, 삼각색 등 6가지 규칙에 따른 조합이 한 번에 나온다. 각 색상의 HEX 코드를 클릭하면 바로 복사되니까, CSS나 Figma에 붙여넣기만 하면 된다.
색상 감각에 자신이 없다면 인기 팔레트 프리셋부터 참고하는 것도 방법이다. 자연, 네이비, 파스텔 같은 테마별 조합이 준비되어 있어서 그대로 가져다 쓸 수도 있다.
색상 조합은 규칙만 알면 어렵지 않다. 감에 의존하지 말고 색상환 기반으로 골라보면 훨씬 안정적인 결과가 나온다.