[UI 디자인] 컬러 팔레트

UI 디자인 시스템을 구축할 때 가장 먼저 정의해야 하는 요소는 **컬러 팔레트(Color Palette)**입니다.
컬러 정의가 명확할수록 디자인 품질은 높아지고, 협업 효율도 크게 증가합니다.

오늘은 많은 디자인 시스템에서 사용되는 대표적인 컬러 네이밍 규칙,

즉 “색상 이름 또는 역할 + 10/100 단위 스케일링” 방식을 소개합니다.

 

이미지처럼 팔레트가 체계적으로 구성되면
브랜드 컬러, 확장 컬러, 배리에이션 컬러를 모두 일관성 있게 관리할 수 있습니다.

 

1. 컬러 이름(또는 역할) + 숫자 스케일의 개념

컬러 네이밍은 다음과 같은 형태로 구성됩니다:

 

[컬러 이름 또는 역할] + [숫자 단계]

 

예시

• purple-500
• blue-300
• gray-900
• primary-500 (역할 기반 네이밍)

이런 방식은 구글 Material Design, TailwindCSS, 여러 대형 UI 시스템에서 널리 사용되는 규칙입니다.

 

2. 숫자(100~900)의 의미는?

숫자는 색의 명도(밝기) 또는 **강도(톤)**를 의미합니다.

 

일반적으로 다음과 같은 기준을 따릅니다:

숫자	의미
100	가장 밝은 톤(파스텔/라이트 톤)
200~400	옅은 컬러, 배경용·서브톤
500	기본(primary) 또는 대표 컬러
600~800	더 진한 톤, 강조 사용
900	가장 어두운 톤, 강한 포인트 혹은 텍스트 대비

• 500 = 해당 컬러의 중간값(기본값)
• 양쪽으로 갈수록 밝기·채도 변화가 생기며 다양한 UI 상황에 적용 가능해집니다.
  
  

3. 컬러 이름 기반 네이밍 예시

이미지처럼 컬러가 이름으로 구분될 경우:

• gray-100 ~ gray-900
• red-100 ~ red-900
• yellow-100 ~ yellow-900
• green-100 ~ green-900
• purple-100 ~ purple-900
• pink-100 ~ pink-900

이렇게 범위가 일정해지면
UI 구성 요소를 만들 때 어떤 톤의 컬러를 언제 사용해야 하는지 명확해집니다.

 

컬러 팔레트 예시

 

4. 역할(Role) 기반 네이밍도 가능

컬러 이름 대신 역할(Role) 기반으로 설정하는 경우도 많습니다.

예시:

• primary-500 → 브랜드 대표 컬러
• primary-700 → 강조(hover) 컬러
• secondary-300 → 보조 컬러
• neutral-900 → 본문 텍스트
• success-500, warning-500, error-500 → 상태 표현

역할 기반 네이밍의 장점은
개발자·디자이너가 색상 용도를 쉽게 이해하고 협업할 수 있다는 점입니다.

 

 

 

정리하면

 

컬러 팔레트를 체계적으로 관리하려면

[이름 또는 역할] + [100 단위]

이 방식은 사실상 표준에 가깝습니다.

이 규칙만 따라도

• 확장성 좋은 색 시스템
• 일관된 디자인
• 원활한 협업
  을 모두 얻을 수 있습니다.