머티리얼 색상
구글 머티리얼 디자인 대표 색상을 클릭 한 번으로 HEX 코드까지 복사하세요. 설치·가입 없이 브라우저에서 바로.
설명
구글 머티리얼 디자인의 19개 계열 대표 색상(500 톤)을 한자리에 모았습니다. 원하는 색을 클릭하면 HEX 코드가 바로 복사돼, 앱·웹 디자인에 그대로 붙여넣어 쓸 수 있습니다.
관련 도구
머티리얼 색상 팔레트는 구글 머티리얼 디자인의 19개 색 계열을 대표하는 기준색(500 톤)을 한 화면에서 확인하고 HEX 코드를 바로 복사할 수 있는 도구입니다. 앱이나 웹 UI를 만들 때 임의로 색을 쓰면 일관성이 무너지는데, 머티리얼 팔레트를 기준으로 삼으면 명도·채도 체계가 맞춰진 조화로운 색상 세트를 빠르게 구성할 수 있습니다. 피그마·VS Code를 열지 않아도 브라우저에서 즉시 색상 코드를 복사할 수 있습니다.
사용 방법
팔레트 화면에서 Red·Pink·Purple·Blue·Green·Yellow·Orange 등 19개 색 계열의 대표색(각 계열의 기준이 되는 500 톤)이 카드 형태로 나열됩니다. 참고로 머티리얼 디자인 색상 체계 자체는 계열마다 50(가장 밝음)부터 900(가장 어두움)까지의 명도 단계와 A100·A200·A400·A700 Accent(강조) 색상을 함께 정의하지만, 이 도구는 그중 가장 많이 쓰이는 대표색을 빠르게 복사하도록 추려 보여 줍니다. 원하는 색상 칸을 클릭하면 HEX 코드가 클립보드에 복사되고, 복사 확인 메시지가 잠깐 표시됩니다. CSS나 코드 편집기에 붙여넣기만 하면 바로 사용할 수 있습니다.
이럴 때 유용해요
안드로이드 앱을 개발할 때 Material 3(Material You) 가이드라인에 맞는 색상을 빠르게 지정해야 하는 경우에 쓰입니다. 웹 프론트엔드에서 CSS 변수나 Tailwind 커스텀 색상을 정의할 때 머티리얼 팔레트의 500번 색상을 기본색으로, 100~300번을 배경색으로, 700~900번을 강조 또는 텍스트 색상으로 조합하면 접근성(명도 대비)을 어느 정도 보장할 수 있습니다. 슬라이드나 문서 작업에서 브랜드 컬러와 어울리는 보조 색상을 찾을 때도 명도 체계가 맞춰진 팔레트가 조화를 잡는 데 도움이 됩니다.
알아두면 좋은 점
머티리얼 디자인 색상 시스템은 2014년 발표된 Material Design 1에서 시작해, 2021년 Material Design 3(Material You)로 발전하면서 동적 색상(Dynamic Color) 개념이 추가됐습니다. 이 팔레트에서 제공하는 색상은 Material Design 2 기준의 고정 팔레트이며, Material 3의 동적 테마와는 별개입니다. 흰 배경 위에서 텍스트 가독성을 확보하려면 일반적으로 700번 이상의 어두운 색상을 텍스트에 쓰는 것이 WCAG AA(명도 대비 4.5:1) 기준을 충족하기 쉽습니다. 밝은 배경색(50~200)은 카드 배경이나 칩(Chip) 컴포넌트 배경으로, 500번은 버튼 등 주요 액션 색상으로 쓰는 것이 머티리얼 가이드의 일반적인 패턴입니다.
자주 묻는 질문
머티리얼 색상이 총 몇 가지인가요?
HEX 코드 외에 RGB나 HSL 값도 확인할 수 있나요?
Accent 색상(A100, A200 등)은 어떤 용도로 쓰나요?
머티리얼 색상과 내 브랜드 컬러가 다른데 같이 써도 되나요?
다크 모드에서 어떤 번호대 색상을 쓰는 것이 좋은가요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
머티리얼 색상 팔레트란
이 도구는 구글이 2014년 발표한 머티리얼 디자인 색상 체계에서 각 색 계열을 대표하는 기준색(500 톤)을 화면 하나에 펼쳐 보여줍니다. 머티리얼 팔레트 자체는 Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey 등 19개 계열(hue)로 나뉘고, 각 계열은 밝기 단계인 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 톤으로 구성됩니다. 여기에 Red~Deep Orange 계열에는 A100, A200, A400, A700 강조(accent) 색상이 추가로 있습니다. Brown, Grey, Blue Grey에는 강조색이 없습니다.
숫자가 뜻하는 것: 500이 기준
색상 칸에 붙은 숫자는 명도 단계입니다. 숫자가 작을수록(50~100) 연하고, 클수록(800~900) 진합니다. 각 계열의 500이 그 색을 대표하는 기준 색으로, 예를 들어 Blue 500은 #2196F3, Red 500은 #F44336, Green 500은 #4CAF50입니다. A로 시작하는 강조색은 채도가 더 높아 버튼·플로팅 액션 버튼처럼 시선을 끌어야 하는 요소에 쓰도록 설계됐습니다. 이 숫자 체계 덕분에 "Indigo 500을 메인, Indigo 100을 배경, Pink A200을 강조"처럼 규칙적으로 조합할 수 있습니다.
사용 방법
원하는 색 칸을 클릭하면 해당 HEX 코드(예: #3F51B5)가 클립보드에 바로 복사됩니다. 복사한 값을 CSS의 color·background, 피그마·포토샵의 색상 입력란, 안드로이드 colors.xml 등에 그대로 붙여넣으면 됩니다. 밝은 톤 위에는 어두운 글자, 어두운 톤 위에는 밝은 글자가 얹혀 표시되므로 그 색 위에 텍스트를 올렸을 때 가독성을 대략 미리 가늠할 수 있습니다.
이럴 때 씁니다
디자인 시안 없이 빠르게 앱·웹의 색 조합을 잡아야 할 때, 안드로이드 앱을 만들며 플랫폼 기본 톤과 이질감 없는 색을 고를 때, 같은 계열에서 hover·active용으로 한두 단계 진한 색(예: 버튼 기본 Blue 500, 눌림 Blue 700)을 정할 때 유용합니다. 이미 검증된 팔레트라 임의로 HEX를 찍는 것보다 톤 간 균형이 안정적입니다.
실전 팁
| 상황 | 추천 단계 |
|---|---|
| 메인 컬러 | 500 |
| 넓은 배경·카드 | 50 ~ 100 |
| 버튼 눌림·강조 텍스트 | 700 ~ 800 |
| 포인트 버튼 | A200 ~ A400 |
같은 계열 안에서 단계 차이를 200 이상 벌리면 명암 대비가 또렷해져 요소 구분이 쉽습니다. 반대로 50과 100처럼 가까운 단계는 차이가 미세해 큰 면적에서만 구분됩니다.