[UI 디자인] 세컨더리 컬러(Secondary Color)

디자인 시스템을 구성할 때 가장 중요한 색상은
프라이머리 컬러와 뉴트럴 컬러입니다.
하지만 실제 UI에서는 이 두 가지 컬러만으로는
모든 정보와 상태를 표현하기 어렵습니다.

 

이때 필요한 것이 바로 **세컨더리 컬러(Secondary Color)**입니다.

 

1. 세컨더리 컬러란?

프라이머리 컬러와 뉴트럴 컬러를 제외한 나머지 보조 색상들.

 

즉, 브랜드의 핵심 행동(CTA)을 표현하는 색이나
기본 텍스트·배경 역할을 하는 색이 아닌,
추가적인 의미 전달 또는 정보 구분을 위해 사용되는 컬러군입니다.

 

2. 세컨더리 컬러를 사용하는 목적

세컨더리 컬러는 크게 두 가지 목적을 위해 사용됩니다.

 

1️⃣ 컬러 자체로 의미를 전달할 때

 

예시:

• 성공(Success): Green
• 경고(Warning): Yellow/Orange
• 오류(Error): Red
• 정보(Info): Blue

사용자가 특정 상황을 직관적으로 이해하도록 돕는 색상 역할입니다.
상태 메시지, 알림, 배지(Badge)에 주로 사용됩니다.

 

2️⃣ 정보를 시각적으로 구분할 때

 

UI 내부 요소들이 너무 단조롭다면
사용자는 어디를 봐야 하는지 금방 헷갈립니다.
이때 세컨더리 컬러는 시각적 레이어를 만드는 데 유용합니다.

예시:

• 차트에서 항목별 색상 구분
• 태그(Tag) 분류
• 일정 캘린더의 카테고리 색
• 여러 카드나 섹션을 구분하는 색

즉, 구조적·정보적 차이를 컬러로 분리해주는 역할입니다.

 

3. 왜 세컨더리 컬러가 중요한가?

• 프라이머리 컬러만 쓰면 UI가 단조롭고 강조점이 사라짐
• 뉴트럴 컬러만 쓰면 정보 구조는 잡히지만 시각적 개성이 부족
• 세컨더리 컬러가 있어야 상태, 의미, 구분이 명확해짐
• 복잡한 데이터 UI나 대시보드에서는 사실상 필수

특히 세컨더리 컬러의 역할은
“프라이머리 컬러를 방해하지 않으면서 정보 구분을 돕는 것”
이라는 점이 중요합니다.

세컨더리 컬러 예시

 

 

정리하면

 

세컨더리 컬러는 프라이머리·뉴트럴 컬러를 보완하며,
의미 전달과 정보 구분을 위해 사용되는 보조 색상군이다.