🧱 머티리얼 색상 팔레트
머티리얼 디자인 공식 색상군 19종의 50~900 단계 HEX 값을 제공합니다.
사용 방법
- 색상군(Red, Blue, Teal 등)을 선택합니다.
- 50(밝음)부터 900(어두움)까지 10단계가 표시됩니다.
- 쓸 단계의 HEX 버튼을 눌러 복사합니다.
이럴 때 유용해요
- 안드로이드 앱·웹의 기본 팔레트를 검증된 색으로 빠르게 잡을 때
- 차트·태그처럼 여러 색이 필요할 때 같은 단계(예: 모두 500)로 맞춰 뽑을 때
- 디자이너 없이 개발자가 무난하고 조화로운 색을 골라야 할 때
알아두면 좋은 팁
- 숫자 500이 각 색상군의 대표색입니다. 구글 제품 대부분이 Blue 500(#2196F3)처럼 500을 브랜드 기준으로 씁니다.
- 서로 다른 색상군을 함께 쓸 때 같은 단계 번호끼리 조합하면 채도·밝기 균형이 맞아 안정적입니다.
- 밝은 단계(50~200) 위 텍스트는 어두운 색, 500 이상 위에는 흰색 텍스트가 머티리얼 가이드 권장입니다. 단, Yellow 계열은 700까지도 어두운 텍스트를 써야 합니다.
자주 묻는 질문
머티리얼 색상 팔레트가 뭔가요?
구글이 2014년 머티리얼 디자인 가이드와 함께 공개한 표준 색상 체계입니다. 19개 색상군마다 50~900의 10단계(일부는 A100~A700 액센트 4단계 추가)가 정의되어 있어 조합 실패가 적습니다.
이 값이 공식 값과 동일한가요?
네. 머티리얼 디자인 가이드라인(2014 팔레트)에 공개된 HEX 값을 그대로 수록했습니다. 참고로 머티리얼 3(You)는 동적 색상 시스템이라 이 고정 팔레트와는 별개입니다.
A100, A200 같은 액센트 색은 없나요?
이 표는 기본 10단계(50~900)를 제공합니다. 액센트(A) 계열은 FAB·강조 버튼용 고채도 변형으로, 필요하면 500 단계 색을 '색상 명암 팔레트' 도구에 넣어 밝은 변형을 만드는 방법도 있습니다.
Grey와 Blue Grey는 어디에 쓰나요?
Grey는 텍스트·배경·구분선 등 무채색 UI 전반에, Blue Grey는 차가운 톤의 대시보드·사이드바에 어울립니다. 본문 텍스트는 Grey 800~900, 보조 텍스트는 Grey 600이 머티리얼의 관례입니다.
