Material Design 調色盤產生器
依據 Google Material Design 設計規範，打造漂亮的配色方案。選擇主色與強調色，即可產生完整主題。
調色盤產生器
產生的調色盤
完整 Material Design 調色盤
瀏覽完整的 Material Design 色彩組合。點擊任一顏色即可複製其 HEX 色碼。
紅色
粉紅色
紫色
藍色
綠色
橙色
藍綠色
琥珀色
使用提示
- 以 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。我們的產生器會同時提供兩種主題變體，並維持適當的對比度與無障礙標準。