什麼是Material Design 選色器？

Material Design 取色器提供完整的 Material Design 調色盤，涵蓋所有主色及其色階變體（50 至 900）。點選任意色塊即可以 HEX、RGB 或 HSL 複製色值，並用內建的 WCAG 對比度工具檢查可及性。

色票涵蓋 19 個主色(紅到棕),每個主色都有 50、100、200、300、400、500、600、700、800、900 十個色階,Google 有定義強調色的還會附上 A100、A200、A400、A700。每個色塊都顯示精確的 HEX 值,已選顏色面板讓你組出專案配色,直接複製或下載。

使用方法

1. 瀏覽展示所有 Material Design 主色的色板——紅色、粉紅、紫色、深紫、靛藍、藍色等。
2. 點選任一主色展開從最淺（50）到最深（900）的色階變體，以及強調色階（A100–A700）。
3. 點選任意色階以所選格式（HEX、RGB 或 HSL）複製色值，加入「已選顏色」面板，再以 CSS、SCSS、Tailwind 設定或 JSON 下載供專案使用。

何時使用

• 在同一主色裡挑出主色、淺一階的容器色和深一階的滑鼠移入色。
• 做 Android 或 Flutter 介面時直接對應 Google 官方參考色,不必再猜 HEX。
• 為簡報或行銷素材建立一套統一的配色。

結果

您正在建置一個儀表板，需要精確的 Material Design Indigo 500（#3F51B5）作為主按鈕顏色，以及 Indigo 50（#E8EAF6）作為滑鼠懸停背景色。

常見問題

主色階與強調色(A 系列)有什麼差別?

主色階(50–900)是同一色相的明暗變化,適合背景、面板與文字。強調色(A100–A700)飽和度較高,Google 建議用在按鈕、徽章這類需要被注意的元素。

為什麼有些顏色沒有強調色?

棕色與灰色本來就是低飽和度,Google 沒有為它們定義強調色變體。本工具忠於原始規範,不會自行補上 Google 從未公布的色值。

內文文字應該選哪個色階?

Material 規範建議淺色背景搭 Grey 900,深色背景搭 Grey 50 或白色。中間色階(500–600)適合次要文字或對比較不嚴格的圖示。

這些顏色和 Material 3(Material You)一樣嗎?

不一樣。本工具用的是 Google 在 2014 年發布的原版 Material Design 配色。Material 3 改用從單一種子色生成動態色階的演算法,屬於另一套系統。

如何判斷兩個色階之間的對比度是否足夠?

把兩個色階都加入「已選顏色」面板，然後捲到對比度檢查器，選一個當前景、一個當背景，面板會立即顯示 WCAG 對比度，並標示內文與大字在 AA、AAA 等級的通過狀態。

相關工具