로고 HEX 하나만으로 서비스 전체를 칠하면 보조색·강조색이 어색해집니다. 색상 조화 도구로 보색·삼원·유사 조합을 탐색해 Primary / Secondary / Accent / Neutral 팔레트를 완성하는 방법입니다.
팔레트 4계층
| 역할 | 용도 | 조화 규칙 |
|---|---|---|
| Primary | CTA·브랜드 | 기준색 |
| Secondary | 서브 UI | 유사색 30° |
| Accent | 알림·뱃지 | 보색 또는 삼원 |
| Neutral | 배경·본문 | 채도 낮은 회색 |
워크플로
- 브랜드 Primary HEX 입력
- 조화 규칙 3종 생성 후 톤 비교
- 접근성 도구로 AA 후보 2세트
- Figma·CSS 변수로 export
디자인 시스템 문서에는 금지 조합(예: Accent 배경+Secondary 텍스트)도 함께 기록하세요.
팁: 팔레트는 12색이 아니라 실제 쓰는 8색이면 충분합니다. WCAG 가이드와 쌍으로 팀 위키에 올리세요.
다크 모드 2안
Primary를 다크 배경에서 밝기 +10% 한 Secondary를 쓰고, Neutral은 #121212 계열로 재정의하세요. 라이트 팔레트를 invert만 하면 채도가 깨집니다.
handoff
개발자에게 --color-primary: #... CSS 변수 표 + Figma style name 1:1 매핑표를 넘기면, 구현 단계에서 '비슷한 회색' 논쟁이 사라집니다.
브랜드 refresh 시
Primary를 5%만 바꿔도 Secondary·Accent 전체를 재생성하세요. '거의 같은 파랑'도 대비 ratio가 AA에서 떨어지는 경우가 많습니다. refresh PR에는 before/after accessibility report를 필수 첨부합니다.
brand book 1페이지에 Primary hex + harmony rule name(예: analogous 30°) + accessibility pass date만 넣어도, external agency onboarding이 빨라집니다. 50페이지 brand book은 아무도 안 읽습니다.
print material(명함·브로슈어)용 CMYK preview는 screen hex와 다릅니다. print vendor proof 전 harmony tool RGB→CMYK approximate check를 한 번 더.
data visualization chart color 5색은 brand accent와 separate palette로 정의하면 dashboard readability dispute가 줄어듭니다.