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圖片會上傳到伺服器嗎？
不會。圖片解碼、縮放、像素量化、主題產生和匯出都在瀏覽器中完成，圖片不會離開裝置。