머티리얼 디자인 색상표

Google의 머티리얼 디자인 색상 팔레트는 2014년에 나왔고 지금도 Material UI와 Angular Material에 들어 있습니다. 빨강, 분홍, 보라, 진보라, 남색, 파랑, 하늘색, 청록, 틸, 초록, 연두, 라임, 노랑, 호박색, 주황, 진주황, 갈색, 회색, 블루 그레이의 19가지 색상을 50(가장 밝음)부터 900(가장 어두움)까지 10단계로 제공하고, 그중 16색에는 선명한 강조 단계 A100–A700이 더 있습니다. 이 페이지는 모든 값을 HEX와 RGB로 나열하고, 단계마다 더 읽기 좋은 글자색과 바로 복사할 수 있는 CSS 변수, SCSS, JSON을 보여 줍니다.

사용 방법

1. 색상 하나를 고르거나 "19색 전체"를 그대로 둡니다.
2. 기본색(500), 어두운 변형(700), 강조색(A200) 값을 확인합니다.
3. 글자색 열을 봅니다. WCAG 명암비로 흰색 또는 검은색을 고른 것입니다.
4. 내보내기 형식을 고르고 코드를 복사합니다.

계산식

기본색 = 500 · 어두운 변형 = 700 · 강조색 = A200 (머티리얼 디자인 2 가이드)

단계는 50에서 900까지 밝기 순이고, A 단계는 플로팅 액션 버튼이나 스위치 같은 강조 요소를 위한 더 선명한 색입니다. 글자색은 흰색과 검은색 중 WCAG 명암비가 더 높은 쪽이며, 소수점 둘째 자리까지 버림으로 표시합니다.

예시

빨강 500은 #F44336 = rgb(244, 67, 54)이고, 어두운 변형은 #D32F2F, 강조색은 #FF5252입니다. 빨강 500 위에서 검은색 글자는 명암비 5.7:1이지만 흰색은 3.68:1에 그쳐서 검은색이 읽기 좋은 선택입니다. 남색 500 #3F51B5는 반대로 흰색 글자가 6.87:1입니다. 19가지 색상을 모두 합하면 254가지 색입니다.