블로그 디자인을 바꾸려고 메인 컬러를 하나 골랐다. 문제는 그 다음이다. 배경은 무슨 색으로 해야 하는지, 버튼 색은 뭘로 해야 눈에 띄는지, 감으로 고르면 높은 확률로 촌스러워진다. 색상 조합에는 규칙이 있고, 그 규칙만 알면 누구든 쓸 만한 배색을 만들 수 있다.
6가지 배색 규칙, 뭐가 다른가
| 규칙 | 원리 | 느낌 |
|---|---|---|
| 보색 | 색상환에서 정반대에 위치한 두 색 | 강렬한 대비, 시선 집중 |
| 유사색 | 색상환에서 나란히 붙은 색 | 자연스럽고 편안한 조화 |
| 삼각색 | 120도 간격으로 배치된 세 색 | 균형 잡힌 다채로움 |
| 분할보색 | 보색의 양옆 두 색을 대신 사용 | 보색보다 부드러운 대비 |
| 사각색 | 90도 간격의 네 색 | 풍부하고 복잡한 배색 |
| 단색조 | 한 색의 밝기와 채도만 변화 | 깔끔하고 세련된 느낌 |
처음 배색을 잡는다면 유사색이나 단색조가 실패 확률이 낮다. 강조 요소(CTA 버튼, 배너)에는 보색이나 분할보색을 섞어 쓰면 눈에 잘 들어온다.
기준 색 하나로 팔레트 뽑기
색 하나만 정하면 나머지는 규칙이 알아서 계산해준다. 컬러 팔레트 생성기에 HEX 코드를 입력하거나 피커로 색을 고른 뒤, 위 6가지 규칙 중 하나를 선택하면 조합이 자동으로 나온다.
밝기와 채도 변화
같은 파란색이라도 밝기에 따라 분위기가 완전히 달라진다. 생성된 팔레트 아래에 밝기 10%~90%, 채도 10%~90% 범위의 변화 단계가 함께 표시된다. 배경에는 밝은 톤, 텍스트에는 어두운 톤을 배치하는 식으로 활용하면 가독성이 올라간다.
색상 코드 복사
- 개별 색상 타일을 클릭하면 HEX 코드가 클립보드에 복사된다
- 전체 팔레트의 코드를 한 번에 복사하는 버튼도 있다
- 랜덤 버튼을 누르면 매번 새로운 기준색으로 팔레트가 바뀐다
TIP 색 감각에 자신이 없다면 인기 팔레트 섹션에서 이미 검증된 조합을 가져다 쓰는 것도 방법이다. 8가지 큐레이션된 팔레트가 제공되니 거기서 출발해도 괜찮다.
배색은 감이 아니라 규칙이다. 기준 색 하나만 정하면 나머지는 색상환이 답을 알려준다.