topic★★★★★난이도
색상 팔레트 구성법
브랜드 컬러 하나에서 전체 팔레트를 확장하는 체계적 방법론.
#팔레트#뉴트럴톤#시맨틱컬러#디자인시스템
왜 배우는가
브랜드 컬러가 정해져도 '나머지 색은 뭘 쓰지?'라는 문제가 남는다. 뉴트럴 톤, 시맨틱 컬러, 상태 컬러까지 — 팔레트 확장의 공식을 알면 일관된 디자인 시스템을 구축할 수 있다.
완성된 색상 팔레트는 보통 세 계층으로 구성된다. (1) 브랜드 컬러 — 로고와 핵심 UI에 쓰이는 1~2색, (2) 뉴트럴 톤 — 배경·텍스트·보더에 쓰이는 무채색 계열 5~10단계, (3) 시맨틱 컬러 — 성공(초록), 경고(노랑), 오류(빨강), 정보(파랑)의 상태 표현 색이다.
| 계층 | 역할 | 생성 방법 | 개수 |
|---|---|---|---|
| 브랜드 컬러 | 정체성, CTA | 브랜드 전략에서 결정 | 1~2색 |
| 뉴트럴 톤 | 배경, 텍스트, 보더 | 브랜드 Hue를 유지하고 채도를 5% 이하로 | 50~950 (9~10단계) |
| 시맨틱 컬러 | 상태 피드백 | 업계 관례 따름 (빨=오류 등) | 4색 × 3~5단계 |
뉴트럴 톤이 팔레트의 핵심이다. 순수한 회색(#808080)보다는 브랜드 컬러의 Hue를 미세하게 섞은 웜/쿨 그레이가 훨씬 세련되다. 예를 들어 브랜드 컬러가 파란색이면 뉴트럴에도 파란 기운이 살짝 도는 쿨 그레이를 쓰면 전체 화면에 통일감이 생긴다.
팔레트를 만들 때 가장 흔한 실수는 색을 너무 많이 만드는 것이다. 브랜드 컬러 2 + 뉴트럴 10단계 + 시맨틱 4색이면 충분하다. 색이 많아질수록 일관성 유지가 기하급수적으로 어려워진다.
실전 워크플로 — (1) 브랜드 컬러의 HSL 값을 확인한다 → (2) Hue를 고정하고 Saturation을 5% 이하로 낮춰 뉴트럴 기본 톤을 만든다 → (3) Lightness를 95%, 90%, 80%… 10%까지 단계별로 변형한다 → (4) 시맨틱 컬러(빨·노·초·파)를 추가한다 → (5) 각 색에 이름(토큰)을 붙인다.