Material Design 调色板生成器
根据 Google 的 Material Design 规范,创建精美的调色板。选择主色和强调色,即可生成完整的主题配色。
调色板生成器
生成的调色板
完整的 Material Design 调色板
浏览完整的 Material Design 配色。点击任意颜色即可复制其十六进制代码。
红色
粉色
紫色
蓝色
绿色
橙色
青色
琥珀色
使用提示
- 使用 500 色阶作为主色
- 使用 700 色阶制作深色变体(如应用栏)
- 使用强调色(A200、A400)制作悬浮操作按钮和高亮元素
- 确保对比度符合无障碍访问标准
专业的 Material Design 配色生成器
使用完整的 Google Material Design 3 色彩系统,涵盖 Material You 调色板、官方颜色令牌和专业导出选项,助力现代 UI 开发与 Android 应用设计。
为什么选择我们的 Material Design 生成器?
我们的综合工具让您可以使用完整的 Material Design 3 色彩系统,包含 Material You 动态主题、Google 官方颜色令牌以及专业的导出格式。
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
完整的 Material Design 3 系统
使用完整的 Material Design 3 色彩系统,包括主色、次色、第三色、表面变体,以及带有语义化颜色角色的完整色调板。
Material You 动态主题
根据种子颜色生成 Material You 配色方案,自动匹配浅色/深色主题变体,并为现代 Android 应用提取个性化配色。
开发者友好的导出选项
支持导出为 CSS 自定义属性、SCSS 变量、JSON 令牌、Android 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 组件中的实际效果。
导出与应用
以您需要的格式下载颜色令牌,直接集成到您的开发流程中。
常见问题
Material Design 3 是 Google 最新的设计系统,拥有改进的颜色角色和语义化令牌。Material You 则是个性化层,可根据用户壁纸或种子颜色生成自定义配色方案,在遵循 MD3 原则的同时,打造适应个人喜好的动态主题。
输入您的品牌色或喜欢的色相作为种子颜色。我们的算法会按照 Google 的 Material You 规范,生成包含主色、次色、第三色、中性色及中性变体色系的完整色调板,每个色系包含从 0(黑色)到 100(白色)共 13 个色调变化。
支持导出为 CSS 自定义属性、SCSS/Sass 变量、JSON 设计令牌、Android XML 资源、JavaScript/TypeScript 对象、Figma 设计令牌、Flutter ColorScheme 主题以及 Swift iOS 颜色资源。所有导出内容均采用规范的语义化命名。
是的!Material Design 3 色彩系统在设计之初就充分考虑了无障碍访问。色调板系统确保了表面颜色与表面文字颜色之间拥有恰当的对比度。我们的工具会显示 WCAG 合规等级,并自动提供符合无障碍标准的配色组合。
当然可以!Material Design 配色是开源的,可用于任何项目。虽然该系统最初是为 Google 产品设计的,但其色彩科学和无障碍原则同样适用于任何现代 UI,无论是网页、移动端还是桌面应用。
Material Design 3 使用语义化颜色角色,会针对浅色和深色主题自动映射到相应的色调值。例如,"primary"在浅色主题下使用色调 40,在深色主题下使用色调 80。我们的生成器会同时提供两种主题变体,并保持恰当的对比度和无障碍标准。