머티리얼 디자인 색상 선택기이란?
Material Design Color Picker는 모든 기본 색상과 그 음영 변형(50~900)을 포함한 전체 Material Design 색상 팔레트를 제공합니다. 색상 견본을 클릭해 HEX, RGB, HSL 중 원하는 형식으로 복사하고, 내장된 WCAG 대비 도구로 접근성도 함께 점검해 보세요.
팔레트는 Red부터 Brown까지 19개 주요 색을 다루며 각 색은 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 단계와, 구글이 정의한 경우 A100, A200, A400, A700 강조 단계를 포함합니다. 각 색상 칩에 정확한 HEX 값이 표시되고, 선택한 색상 패널에서 프로젝트 팔레트를 구성해 복사하거나 내려받을 수 있습니다.
사용 방법
- Material Design 기본 색상이 표시된 색상 그리드를 탐색하세요 — Red, Pink, Purple, Deep Purple, Indigo, Blue 등이 포함되어 있습니다.
- 기본 색상을 클릭하면 가장 밝은 음영(50)부터 가장 어두운 음영(900)까지 펼쳐지며, 강조 음영(A100~A700)도 포함됩니다.
- 원하는 음영을 클릭해 선택한 형식(HEX, RGB, HSL)으로 값을 복사하고, 선택된 색상 패널에 추가한 뒤 팔레트를 프로젝트용 CSS, SCSS, Tailwind 설정 또는 JSON으로 내려받으세요.
사용 시기
- 같은 색상에서 메인 색, 더 밝은 컨테이너 색, 더 어두운 호버 색을 한 번에 고를 때.
- 안드로이드나 플러터 UI를 구글 공식 팔레트에 맞추되 HEX를 추측하지 않을 때.
- 슬라이드나 마케팅 자료에 일관된 팔레트를 만들 때.
결과
대시보드를 개발 중이며 기본 버튼 색상으로 정확한 Material Design 'Indigo 500' (#3F51B5)이 필요하고, 호버 배경으로 'Indigo 50' (#E8EAF6)이 필요합니다.
자주 묻는 질문
- 주요 단계와 강조(A) 단계는 어떻게 다른가요?
- 50~900 단계는 같은 색상의 명도 변화로, 배경·표면·텍스트에 씁니다. A100~A700은 채도가 높아 구글이 버튼, 배지 등 주목이 필요한 액션 요소에 쓰도록 정의한 단계입니다.
- 강조 단계가 없는 색이 있는 이유는?
- Brown과 Grey는 의도적으로 채도가 낮은 색이라 구글이 A 단계를 따로 만들지 않았습니다. 본 도구는 원본 규격을 그대로 따르며, 시스템에 존재한 적 없는 값은 추가하지 않습니다.
- 본문 텍스트에는 어떤 단계를 써야 하나요?
- Material 가이드는 밝은 배경에 Grey 900, 어두운 배경에 Grey 50 또는 흰색을 권장합니다. 중간 단계(500~600)는 보조 텍스트나 대비가 낮아도 되는 아이콘에 적합합니다.
- Material 3(Material You) 색상과 같은가요?
- 다릅니다. 본 도구의 팔레트는 구글이 2014년 발표한 1세대 Material Design 색상 시스템입니다. Material 3는 시드 색 하나에서 동적 토널 팔레트를 생성하는 별도의 알고리즘을 씁니다.
- 두 단계 사이의 대비비는 어떻게 확인하나요?
- 두 음영을 모두 선택된 색상 패널에 추가한 다음 대비 검사기로 스크롤하세요. 하나를 전경, 다른 하나를 배경으로 지정하면 패널이 즉시 WCAG 비율을 보여주고, 일반 텍스트와 큰 텍스트에 대해 AA 및 AAA 통과/실패 배지를 함께 표시합니다.