1
上传图片
拖拽、选择或粘贴图片。工具会在浏览器本地缩放图片，并用 Celebi 量化与 Score 排序提取适合 UI 的候选源色。
DEVELOP.09 MATERIAL COLOR
Monet 取色
上传一张图片，用官方 Material Color Utilities 生成动态主题。并排比较不同 Variant、亮暗模式、语义角色与完整色阶。
IMG
拖拽图片到这里
或点击选择文件 · 支持粘贴图片
JPG、PNG、WebP、GIF · 图片仅在本地处理 候选源色 选择一种颜色作为主题种子
CFG
主题配置
本地处理
上传图片，开始生成主题
我们会在浏览器中提取候选源色，再生成可直接用于界面的完整 Material 配色。
UI
主题实景预览
§ 01
如何从图片生成 Material 主题
2
比较 Variant
选择 Material 3 或 Material 3 Expressive 规范，在同一界面预览中比较各 Variant 的主色、容器色、中性色与层级关系。
3
检查并导出
同时检查亮色和暗色主题，浏览语义角色与完整色阶，再导出 CSS 自定义属性或 JSON。
§ 02
9 种 Material 动态配色风格
Monochrome / Neutral
无彩与低彩度方案，适合内容密集、安静克制的界面。
Tonal Spot / Vibrant
Material 3 默认的平衡方案，以及更高彩度、更鲜明的表现。
Expressive / Rainbow / Fruit Salad
通过色相旋转塑造更强性格，适合品牌化和活泼的视觉语言。
Fidelity / Content
更忠实保留源色及其温度关系，适合内容或作品本身主导配色的场景。
§ 03
为真实界面而设计的颜色预览
✳
配置区用相同的五色指纹展示每个 Variant，可直接比较主色、辅助色、第三色、表面色与错误色。
✳
亮色和暗色主题并排呈现，能同时检查表面层级、文字、按钮、容器和导航。
✳
完整展示 primary、secondary、tertiary、neutral、neutral variant 与 error 的 13 档色阶。
✳
使用 Google 官方 Material Color Utilities，所有计算在本地完成。
§ 04
常见问题
Q1Monet 是什么？
Monet 是 Android 动态取色体系常用的代称。它不会简单复制图片颜色，而是先选出适合界面的源色，再在 HCT 色彩空间中生成有层级、有对比度的完整主题。
Q2Material 3 与 M3 Expressive 有什么区别？
Material 3 对应 2021 动态颜色规范，提供 9 种经典 Variant。M3 Expressive 对应 2025 规范，目前官方颜色库为 Neutral、Tonal Spot、Vibrant 与 Expressive 提供新的色彩规则和设备差异。
Q3为什么同一源色的 Variant 看起来差异很大？
每个 Variant 对主色、辅助色、第三色和中性色使用不同的色相旋转与彩度策略。例如 Neutral 克制，Vibrant 提高彩度，Expressive 会明显旋转色相，Fidelity 则尽量保留源色观感。
Q4图片会上传到服务器吗？
不会。图片解码、缩放、像素量化、主题生成和导出都在浏览器中完成，图片不会离开您的设备。