웹사이트를 만드는데 메인 색상은 정했다. 문제는 버튼, 배경, 텍스트에 쓸 나머지 색이다. 감으로 고르면 어딘가 어색하고, 색상 이론을 공부하자니 시간이 없다. 색 하나만 정하면 나머지를 자동으로 맞춰주는 방법이 있다.
배색 규칙 6가지
- 보색(Complementary)
- 색상환에서 정반대(180도)에 위치한 색 조합. 대비가 강해서 CTA 버튼이나 강조 요소에 적합하다. 빨강과 초록, 파랑과 주황이 대표적이다.
- 유사색(Analogous)
- 색상환에서 나란히 있는 색(30도 간격)을 묶은 조합. 자연스럽고 안정감이 있어서 배경이나 그라데이션에 많이 쓴다.
- 삼각색(Triadic)
- 색상환에서 120도 간격으로 세 색을 고르는 방법. 밸런스가 좋고 활기차 보여서 어린이 브랜드나 게임 디자인에 자주 나온다.
- 분할보색(Split-Complementary)
- 보색 대신 보색 양옆의 두 색을 쓰는 방법. 보색보다 부드러우면서도 대비가 살아 있어서 입문자에게 쓰기 쉽다.
- 사각색(Tetradic)
- 네 가지 색을 쓰는 조합. 색이 많아서 다채롭지만 비율 조절을 잘해야 산만해 보이지 않는다.
- 단색조(Monochromatic)
- 한 가지 색의 밝기와 채도만 바꿔서 팔레트를 구성. 깔끔하고 고급스러운 느낌을 줄 수 있다.
팔레트 만드는 방법
배색 규칙을 직접 계산하면 HSL 색상환 각도를 알아야 해서 번거롭다. 컬러 팔레트 생성기에서 기준 색상을 하나 고르고 배색 규칙을 선택하면 나머지 색이 자동으로 나온다. 각 색상의 HEX 코드를 클릭 한 번으로 복사할 수 있고, 밝기와 채도를 5단계로 조절한 변형 색상도 함께 보여준다. 어떤 색으로 시작해야 할지 모르겠다면 랜덤 버튼이나 인기 팔레트(자연, 뉴트럴, 비비드 등)를 참고하면 된다.
TIP 배색이 좋아 보여도 접근성을 확인해야 한다. 텍스트와 배경의 명도 대비가 4.5:1 이상이어야 시각장애인도 읽을 수 있다(WCAG 기준). 팔레트를 정한 뒤 대비 검사를 한 번 돌려보는 게 안전하다.
색 감각이 없어도 배색 규칙만 따르면 어울리는 조합이 나온다. 기준 색 하나만 정하면 나머지는 도구가 맞춰준다.