Material Design
Material Design 色彩
免費線上 Material Design 色彩瀏覽器，無需帳號、不用安裝，完全在瀏覽器中運行。一鍵複製十六進制代碼或 CSS 類名。
0
總色彩數
0
色盤種類
0
色調等級
什麼是 Material Design 色彩？
Material Design 色彩系統是由 Google 開發的專業設計規範，為應用和網站提供了一套完整的色彩調色板。每個主色都包含多個色調（50–900）和強調色（A100、A200、A400、A700），確保在不同場景下都能找到合適的顏色。
此工具涵蓋全部 19 個主色盤，共包含超過 500 種顏色組合，適合設計師、開發者和產品團隊快速查找和應用。
如何使用
- 瀏覽色彩：頁面自動載入所有 Material Design 色彩，以卡片形式展示。
- 搜尋篩選：在搜尋框中輸入色彩名稱（如「Red」、「Blue」）或色調號碼（如「500」、「A200」），即時篩選結果。
- 選擇複製格式：點擊「十六進制代碼」或「CSS 類名」按鈕切換複製格式。
- 複製顏色：點擊任意色卡，自動複製選定格式的內容到剪貼板。
- 確認複製：螢幕會顯示「已複製」提示，確認操作成功。
應用場景
- Web 設計：為網站選擇符合 Material Design 規範的色彩。
- 移動應用：開發 Android 或跨平台應用時參考官方色盤。
- UI 組件庫：構建設計系統時使用標準化色彩變數。
- 品牌配色：基於 Material Design 原則為品牌定義色彩系統。
- 原型設計：在 Figma、Adobe XD 等設計工具中快速應用色彩。
- 開發實現：複製 CSS 類名或十六進制值直接寫入代碼。
常見問題
Material Design 色彩有多少種？
Material Design 包含 19 個主色盤，每個主色有 10 個基礎色調（50、100、200、...、900）和 4 個強調色（A100、A200、A400、A700），總共超過 500 種顏色組合。
如何在我的專案中使用這些色彩？
可以通過複製十六進制代碼（如 #F44336）直接用於 CSS，或使用 Material Design 官方庫（如 Material-UI、Angular Material）的 CSS 類名。此工具支援兩種格式的一鍵複製。
色調 50 和 900 有什麼區別？
數字越小（50）顏色越淡（接近白色），數字越大（900）顏色越深（接近黑色）。500 通常是該色系的標準色。強調色（A100–A700）用於突出互動元素。
十六進制代碼和 CSS 類名應該如何選擇？
如果使用 Material Design 官方框架（如 Material-UI），優先使用 CSS 類名以保持一致性。如果自建項目或使用其他框架，複製十六進制代碼更靈活。
搜尋功能支援哪些輸入方式？
支援色彩名稱（如「Red」、「Blue」）、色調號碼（如「500」）、組合搜尋（如「Red 500」）。搜尋不分大小寫，支援部分匹配。
複製到剪貼板後如何確認成功？
點擊色卡後會看到「已複製！」的綠色提示消息，同時顏色值已進入系統剪貼板，可直接貼上到其他應用。