브랜드 컬러 팔레트 만드는 법

색상 가이드 · ← 목록으로

좋은 브랜드 팔레트는 색의 개수가 많아서가 아니라 역할이 분명해서 일관돼 보입니다. 색을 무작정 늘리기보다 각 색이 화면에서 맡을 일을 정해 두면, 누가 작업해도 통일감 있는 결과가 나옵니다. 아래 순서대로 구성해 보세요.

1. 기본색(Primary) 한 가지를 정한다

브랜드를 대표하는 핵심 색입니다. 로고, 주요 버튼, 링크 등 "이 브랜드 하면 떠오르는 색"으로 쓰입니다. 기본색은 하나로 좁히는 것이 좋습니다. 영감을 주는 레퍼런스 사이트나 사진이 있다면 색상 추출 도구로 정확한 HEX 값을 뽑아 출발점으로 삼으세요.

2. 보조색(Secondary)으로 폭을 넓힌다

기본색만으로는 화면이 단조로워집니다. 보조색은 기본색과 조화를 이루면서 변화를 주는 색으로, 보통 1~2가지면 충분합니다. 색상환에서 유사색(옆 색)이나 보색(반대 색)을 고르면 안정적입니다. 자세한 선택법은 색상 조화 이론을 참고하세요.

3. 강조색(Accent)으로 시선을 모은다

강조색은 "여기를 눌러 주세요"라고 말하는 색입니다. 가입 버튼, 알림, 할인 배지처럼 행동을 유도하는 소수의 요소에만 씁니다. 채도가 높고 눈에 확 띄는 색이 좋지만, 아껴 써야 효과가 살아납니다. 화면 곳곳에 강조색을 남발하면 어디를 봐야 할지 알 수 없게 됩니다.

4. 중립색(Neutral)으로 바탕을 만든다

실제 화면의 대부분은 사실 회색 계열이 차지합니다. 배경, 본문 텍스트, 경계선, 비활성 상태 등에 쓰이는 흰색·검정·여러 단계의 회색이 중립색입니다. 순수한 회색보다 기본색을 아주 약간 섞은 회색(예: 살짝 푸른 회색)을 쓰면 브랜드와 더 잘 어울립니다.

5. 명도 단계로 확장한다

각 색을 하나의 값으로만 두지 말고, 밝고 어두운 단계(예: 50, 100, 300, 500, 700, 900)로 펼쳐 두면 활용도가 크게 늘어납니다. HSL의 명도(L)만 조절하면 같은 색조를 유지한 채 단계를 만들 수 있습니다. 도구에서 색을 추출하면 단계별 색조 팔레트를 함께 보여 주므로 단계 만들기가 쉽습니다.

6. 대비와 일관성을 점검한다

마지막으로 텍스트와 배경 조합이 충분히 읽히는지 확인합니다. 아무리 예쁜 팔레트도 가독성이 떨어지면 실패입니다. 명암비 기준은 색상 대비 가이드에서 확인하세요. 완성한 팔레트는 HEX 코드와 용도를 함께 문서로 정리해 두면 협업할 때 흔들리지 않습니다.

실전 예제 — 가상 브랜드로 5색 팔레트 처음부터 만들기

음악 편집 앱을 만드는 가상 브랜드 "그루브 스튜디오"를 예로, 위 여섯 단계를 실제로 적용해 보겠습니다.

1단계 — 기본색

창의성과 몰입감을 전하고 싶어 보라 계열 hsl(262, 83%, 58%)를 기본색으로 정합니다.

2단계 — 보조색

유사색 규칙에 따라 색조를 30도 더한 hsl(292, 83%, 58%)(마젠타에 가까운 보라)를 보조색으로 정해, 기본색과 자연스럽게 이어지도록 합니다.

3단계 — 강조색

보라의 보색인 262 + 180 = 82도를 이용해 hsl(82, 83%, 58%)(라임 그린)을 강조색으로 정합니다. 보라 계열 화면에서 라임 그린 버튼은 강한 대비로 시선을 확실히 끕니다.

4단계 — 중립색

순수 회색 대신 기본색의 색조(262)를 살짝 섞어 hsl(262, 8%, 20%)(본문 텍스트용 짙은 남회색)와 hsl(262, 15%, 96%)(배경용 아주 옅은 라벤더 회색)를 만듭니다. 완전한 무채색보다 브랜드와 훨씬 잘 어우러집니다.

5단계 — 명도 단계 확장

기본색의 색조·채도(262, 83%)는 고정하고 명도(L)만 바꿔 6단계를 만듭니다.

50단계(가장 밝음) — hsl(262, 83%, 97%) — 옅은 배경용
100단계 — hsl(262, 83%, 90%) — 호버 배경용
300단계 — hsl(262, 83%, 75%) — 보조 요소용
500단계(기본색) — hsl(262, 83%, 58%) — 주요 버튼용
700단계 — hsl(262, 83%, 42%) — 버튼 눌림 상태용
900단계(가장 어두움) — hsl(262, 83%, 20%) — 진한 강조 텍스트용

이 6단계만 있어도 버튼의 기본·호버·눌림 상태, 배경, 텍스트까지 하나의 색조로 일관되게 커버할 수 있습니다.

자주 묻는 질문

팔레트를 몇 개 색으로 시작하는 게 좋나요?: 기본색 1개, 보조색 1~2개, 강조색 1개, 중립색 2~3단계 정도, 총 5~7개 색으로 시작하는 것을 추천합니다. 이후 필요에 따라 명도 단계로 확장하면 됩니다.
레퍼런스 없이 기본색을 어떻게 정하나요?: 전하고 싶은 인상을 먼저 정한 뒤(색의 심리학 참고) 그에 맞는 색조를 색상환에서 고르고, HSL의 채도·명도를 조절해 브랜드 톤에 맞게 다듬는 방식이 일반적입니다.
중립색도 브랜드 색조를 섞어야 하나요?: 필수는 아니지만, 위 예제처럼 기본색의 색조를 아주 낮은 채도로 살짝 섞으면 순수 회색보다 브랜드 톤과 자연스럽게 어우러집니다. 채도를 5~15% 정도로 낮게 유지하는 것이 요령입니다.
완성한 팔레트는 어떻게 관리하나요?: 각 색의 HEX·HSL 값과 용도(예: "700단계 = 버튼 눌림 상태")를 표나 문서로 정리해 두면, 팀원이 늘어나거나 새 화면을 추가할 때도 색이 흔들리지 않습니다.

팔레트의 출발점이 될 색을 레퍼런스에서 바로 뽑아 보세요 → 화면 색상 추출 도구. 색이 주는 인상이 고민된다면 색의 심리학도 함께 읽어보면 좋습니다.