머티리얼 디자인 색상 팔레트 생성기
구글 머티리얼 디자인 가이드라인에 맞춰 멋진 색상 팔레트를 만들어 보세요. 기본 색상과 강조 색상을 고르면 완성된 테마가 만들어져요.
팔레트 생성기
생성된 팔레트
머티리얼 디자인 전체 색상 팔레트
머티리얼 디자인 색상 전체를 살펴보세요. 색상을 클릭하면 HEX 코드가 복사돼요.
빨강
분홍
보라
파랑
초록
주황
청록
앰버
사용 팁
- 500 톤을 기본 색상으로 사용하세요
- 700 톤은 앱 바처럼 어두운 요소에 사용하세요
- 강조 색상(A200, A400)은 플로팅 액션 버튼과 하이라이트에 사용하세요
- 접근성을 위해 적절한 명암비를 확보하세요
전문가용 머티리얼 디자인 색상 생성기
Material You 팔레트, 공식 색상 토큰, 전문가용 내보내기 옵션까지 구글 Material Design 3 색상 시스템 전체를 활용해 최신 UI와 안드로이드 앱을 디자인해 보세요.
왜 이 머티리얼 디자인 생성기일까요?
Material You 다이내믹 테마, 구글 공식 색상 토큰, 전문가용 내보내기 형식까지 Material Design 3 색상 시스템 전체를 제공해요.
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
완전한 Material Design 3 시스템
기본·보조·3차 색상, 표면 변형, 시맨틱 색상 역할이 담긴 전체 톤 팔레트까지 Material Design 3 색상 시스템을 그대로 사용할 수 있어요.
Material You 다이내믹 테마
시드 색상에서 Material You 색상 테마를 생성하고, 밝은/어두운 테마 변형과 개인화된 색상 추출까지 최신 안드로이드 앱에 맞게 자동으로 만들어요.
개발자를 위한 내보내기
CSS 사용자 정의 속성, SCSS 변수, JSON 토큰, 안드로이드 XML 리소스, Figma 토큰, Flutter 테마 데이터로 올바른 이름 규칙에 맞춰 내보낼 수 있어요.
이럴 때 좋아요:
- Android app development
- Web applications
- Flutter projects
- Design systems
- UI component libraries
- Material UI theming
사용 방법:
색상 시스템 선택
Material Design 3 기본 색상을 고르거나, 시드 색상으로 Material You 팔레트를 생성하세요.
조정 & 미리보기
톤 값을 조절하고 밝은/어두운 테마를 미리 보면서 머티리얼 디자인 구성 요소에서 색상이 어떻게 보이는지 확인하세요.
내보내기 & 적용
원하는 형식으로 색상 토큰을 내려받아 개발 과정에 바로 적용하세요.
자주 묻는 질문
Material Design 3는 색상 역할과 시맨틱 토큰이 개선된 구글의 최신 디자인 시스템이에요. Material You는 그 위에 얹히는 개인화 계층으로, 사용자의 배경화면이나 시드 색상에서 맞춤 색상 테마를 만들어 MD3 원칙을 지키면서도 취향에 맞게 바뀌는 다이내믹 테마를 제공해요.
브랜드 색상이나 원하는 색조를 시드 색상으로 입력하세요. 알고리즘이 기본, 보조, 3차, 중성, 중성 변형 색상군으로 이루어진 전체 톤 팔레트를 생성하고, 각 색상군마다 0(검정)부터 100(흰색)까지 13단계 톤을 구글 Material You 사양에 맞춰 만들어 줘요.
CSS 사용자 정의 속성, SCSS/Sass 변수, JSON 디자인 토큰, 안드로이드 XML 리소스, JavaScript/TypeScript 객체, Figma 디자인 토큰, Flutter ColorScheme 테마, Swift iOS 색상 에셋으로 내보낼 수 있어요. 모든 결과물에는 알맞은 시맨틱 이름 규칙이 적용돼요.
네! Material Design 3 색상 시스템은 접근성을 염두에 두고 설계됐어요. 톤 팔레트 구조 덕분에 표면 색상과 그 위에 올라가는 텍스트 색상 사이에 적절한 명암비가 유지돼요. 이 도구는 WCAG 준수 수준을 보여 주고 접근성 좋은 색상 조합도 자동으로 제안해요.
물론이에요! 머티리얼 디자인 색상은 오픈소스라 어떤 프로젝트에도 쓸 수 있어요. 구글 제품을 위해 만들어진 시스템이지만 색채 이론과 접근성 원칙이 탄탄해서 웹, 모바일, 데스크톱 등 어떤 최신 UI에도 잘 어울려요.
Material Design 3는 시맨틱 색상 역할을 사용해 밝은 테마와 어두운 테마에 알맞은 톤 값을 자동으로 연결해요. 예를 들어 'primary'는 밝은 테마에서 톤 40, 어두운 테마에서 톤 80을 사용해요. 이 생성기는 명암비와 접근성을 지킨 두 가지 테마를 모두 제공해요.