Google Material Design 2 공식 컬러 254종을 한 눈에 훑고 HEX·RGB·HSL을 복사합니다. Android 앱·웹 디자인의 색상 시스템 구축에 활용하세요.
💡 라이선스
Material Design 컬러 팔레트는 Apache 2.0 라이선스로 공개되어 있어 상업·비상업 프로젝트에 자유롭게 사용할 수 있습니다. 원본 가이드: material.io/design/color

Material Design 컬러 사용법

  1. 상단 검색창에 색상명(red, blue) 또는 단계(500, 700)를 입력해 필터링합니다.
  2. 원하는 출력 포맷을 HEX·RGB·HSL 중 선택합니다.
  3. 색상 팔레트에서 마음에 드는 칸을 클릭하면 클립보드에 복사됩니다.
  4. Android Studio·Figma·CSS 변수로 바로 붙여넣어 사용합니다.
  5. 보기 모드를 "단계별 한 줄"로 바꾸면 같은 단계(예: 500)끼리 비교할 수 있습니다.

주요 기능

  • Material Design 2 공식 19색 × 14단계 = 254종 전부 수록
  • HEX / RGB / HSL 3포맷 지원
  • 컬러명·단계 키워드 검색
  • 원클릭 클립보드 복사
  • 완전 무료, Apache 2.0 라이선스

활용 예시

  • Android 앱 디자인 — colors.xml에 복사해 테마 색 지정
  • Flutter·React Native — 크로스플랫폼 앱의 일관된 색상 시스템
  • CSS 변수 시스템 — --primary-500, --primary-700 디자인 토큰
  • Figma 컬러 스타일 — 팀 공용 컬러 라이브러리로 등록
  • 브랜드 가이드 — 메인·호버·active 상태별 단계 결정

Material Design 컬러 시스템 이해하기

Material Design은 각 색상을 50·100·200·...·900 (밝음 → 어두움), 그리고 강조용 A100·A200·A400·A700으로 체계화했습니다. 500이 가장 대표적인 "기본 색", 700은 pressed/active 상태, 50·100은 배경·칩(chip)에 사용됩니다. Accent(A*) 색은 채도가 더 높아 FAB 버튼·토글·강조 포인트에 쓰입니다. Grey·Brown·BlueGrey는 중립 톤이라 Accent 단계가 없습니다.

자주 묻는 질문

Material Design 2와 Material You(3)의 차이는 뭐죠?

본 도구는 Material Design 2 팔레트를 수록합니다. 2021년 발표된 Material You(M3)는 사용자 배경화면에서 동적으로 색을 추출하는 방식이라 고정 팔레트가 없습니다. 대부분 앱·웹은 여전히 M2 팔레트를 기준으로 사용합니다.

Accent 색(A100, A200 등)은 언제 써야 하나요?

강조가 필요한 CTA 버튼·토글 활성화·FAB에 적합합니다. 기본 색보다 채도가 높고 시각적 중량이 커서 배경색으로 쓰면 눈이 피로해지니 작은 면적에만 사용하세요.

어떤 단계를 메인 색으로 쓸까요?

대부분의 브랜드가 500을 기본, 700을 어두운 변형(호버·pressed), 100~200을 밝은 배경으로 씁니다. 다크모드는 반대로 200~300을 메인으로 쓰는 경우가 많습니다.

상업적으로 사용해도 되나요?

네, Material Design 컬러는 Apache 2.0 라이선스라 상업 제품·폐쇄형 앱에도 제한 없이 사용 가능합니다. 저작권 고지 의무도 색상 값 자체에는 적용되지 않습니다.