使用顏色表達風格和傳達意涵。設定應用程式顏色對於個人化、定義語意用途及定義品牌識別來說都至關重要。
受迫失誤數
- 為確保無障礙體驗：
- 請檢查色彩對比，並避免使用類似色調的顏色。
- 由於紅色和綠色是常見的模式，但某些色盲類型使用者無法存取。
- 運用有意義的顏色練習：應用程式可以活潑且生動，但會遵循調色盤。如果使用過多語意顏色來擴充配置，可能會令人感到困惑，而具有過多裝飾顏色可能會令人眼花撩亂。
- 顏色可能會有規律，因此請重複既有的色彩圖案。如果在應用程式中使用語意顏色，請使用一致的顏色。
- 如果想讓應用程式在不同情境下順利運作，請採用淺色和深色的色彩配置 (最好是對比主題)。
- 使用符記指派顏色以指出元素的顏色角色，而非使用硬式編碼值。
- 顏色可能來自各種動態和靜態來源，但避免在同一個檢視畫面中混用過多顏色。
- 使用動態內容顏色時，請避免從多個內容片段提取顏色。
Android 上的色域
如要正確瞭解 Android 如何將顏色套用至 UI，首先必須瞭解 UI 在裝置上的顯示方式。
顏色在裝置上的顯示方式
您的應用程式顯示在背光螢幕上。它使用數位顏色，並遵循特定模型和規則，可協助使用者分辨該顏色。數位顏色為「增加顏色」，可透過「增加」或混合不同光源創造出完整的色彩。視裝置的色彩校正、螢幕類型、設定和色域而定，人類感知不同螢幕顏色的方式可能大不相同。
設計應用程式時，考量到這些因素，使用的顏色可能會與上述因素不同，甚至提及個別使用者的顏色感知。
關於色域
色域是使用色彩模型的色彩配置。RGB 是一種新增色彩模型，可透過紅色、綠色和藍色來建立各種色彩，而 CMYK (用於列印) 是「subtractive」。因此，互動式設計人員通常會使用 RGB 或類似的模型來選擇顏色。
Material 3 (M3) 推出了 HCT，這是使用色調、色盲和色調定義顏色的新色域，且與其他模型 (如 HSL) 相比，能立即獲得準確的顏色
如要進一步瞭解 HCT 的色彩科學與發展，請參閱 The Science of Color & Design (色彩與設計科學)。
色調、色差和色調
HCT 可在系統參數內，提供更個人化且靈活的色彩使用方式。HCT 使用色調、色差和色調建立顏色模型：
- Hue：色調與個別使用者可能用來描述顏色的形容詞類似，例如「紅」或「電紫」。色調的 HCT 值介於 0 至 360 之間。
- 色差：色階代表色彩的繽紛色彩，從中性灰色到全生動！在 HCT 色域中，色域的最大值為約 120。
- 色調：色調是指色彩的亮度或亮度。HCT 使用語氣產生對比。某些無障礙情境無法存取設為相同色調值的顏色。值較低的色調較深，值較高的色調較亮。
色彩系統程序
M3 顏色建構在 HCT 模型上，衍生出易於理解的色彩配置，並協助動態色彩特徵。M3 色彩系統從來源顏色開始。這個來源顏色會轉譯為五種主要顏色：原色、二級、三級、中性、中性變色。這五種主要顏色可建立色調調色盤，由每個按鍵顏色的色調增量組成。
如果您要手動指派按鍵顏色，請記下輸入內容的色度和色調，因為顏色的色調可能不是顏色角色的色調值。
M3 色彩系統採用 Material Color Utilities (MCU)，這組顏色程式庫包含演算法和公用程式，方便您在應用程式中開發色彩主題和配置。
以下影片會說明色彩配置的計算方式。
顏色限制
顏色限制指的是顏色的實體限制，包括實際物理限制、本身的生物視覺限制，或是螢幕色彩算繪的限制。例如，某些色調無法具有特定色度或色調。顏色限制是淺藍色或亮紅色等原因顏色不可能。所有色調值都必須採用一致的色調色彩對應。
上圖顯示 H105、H25 和 H285 色調值的三種不同色調對應圖表。
圖表 1 - 色調 105 (黃色)。用於表示顏色供應情形。色彩和色調會像圖形一樣運作黃色調的色度有限，圖表包含特定色調，所以黃色的色調較不明顯。
圖表 2 - 色調 25 (紅色)。顯示比色調 105 (黃色) 更多的色盲選項。在這張色調地圖中，最高彩度點的色調較低。
圖表 3 - 色調 285 (藍色)。顯示畫面最深的色彩以較暗的色調顯示。另一方面，染色體的色差會因為較淺的語氣而消失。
色彩配置
色彩配置是衍生自特定色調的一組強調效果和表面，並指派給顏色角色，然後再對應至 UI 元素和元件。顏色角色是指顏色的使用方式，而非顏色的色調。例如放在主要上而非藍色。
色彩配置的設計必須和諧、確保易於存取的文字，以及區分 UI 元素和介面。顏色角色對 (由容器和容器角色組成) 的色調值具有無障礙對比。
燈光和深色配置可創造出專屬調性，
Material 色彩系統和自訂配置會提供顏色的預設值，做為自訂功能的起點。
進一步瞭解 M3 色彩系統。
如需可自訂的色彩配置，請參考 Android UI 套件。
將顏色套用至使用者介面
UI 顏色包含強調色、語意和表面顏色。
- 強調色是指核心顏色，通常屬於 Android 品牌調色盤的一部分。
- 語意顏色 (或 Material 3 中的自訂顏色) 是具有特定意義的顏色。
- 表面顏色是指用於背景顏色的任何中性衍生顏色。
強調色
強調色通常展現 UI 中最鮮明的風格，無論是用於品牌宣傳、醒目顯示動作、個人表現或使用者表現等等。
每個強調色 (原色、二次色及三次色) 都會提供四至八種不同色調的相容顏色，可用於配色、定義強調效果和視覺表現。
動態色彩
可從動態來源定義強調色。
從 Android 12 (API 級別 31) 開始，動態色彩可讓系統從使用者的桌布或應用程式內內容 (例如 Keyart 資產) 擷取來源色彩。動態色彩會使用 MCU 演算法和程序，建立配置並輕鬆實作。如要為應用程式套用動態色彩，請參閱「讓使用者在應用程式中自訂顏色體驗」。
試用「Visualizing Dynamic color」(視覺化呈現動態色彩) 程式碼研究室，實際查看動態色彩。
靜態
靜態配置是一種有不變 (或相對) 值的配置。建立靜態配置的一個常見方式，就是為品牌顏色，將原色、二級和第三色對齊品牌主要調色盤。
即使您使用動態色彩，我們還是強烈建議您建立靜態配置做為備用配置，前提是使用者裝置無法使用動態色彩。否則，系統會使用基準紫色配置。
您可以使用 Material Design 主題設定建構工具，套用 MCU 色彩演算法，產生靜態的自訂主題。這將產生您選擇的顏色，但也符合 M3 色彩系統權杖和和諧的無障礙原則。
不過，你仍可建立完全自訂的靜態配置。方法是在顏色樣式 (color.kt 或 color.xml) 內指派不同值，或是在更新 Figma 樣式屬性後，從 Figma 的 Material 主題建構工具匯出主題檔案。
使用方法
Material 元件具有預先指派的顏色角色，但您可以在 UI 和自訂元素中全面使用顏色權杖。請謹慎使用所有強調色，務必考量人眼特別容易吸引鮮明的顏色。
與類型一樣，系統會在階層中套用顏色，以主要顏色及其對應角色指派給重要行動號召 (CTA)。我們建議使用懸浮動作按鈕 (FAB) 等元件來處理主要角色。
選擇主要顏色時，建議您指定品牌的主要顏色。或者，您可以選取代表互動元件的顏色，藉此更謹慎使用品牌顏色。次要顏色和第三顏色繼續向下強調重要性階層。
過度飽和的樣式可能會導致僅使用原色、次要或第三等基本顏色角色。為協助顏色階層，請套用色彩配置，以加入較不鮮明的容器顏色和外框角色。
為了提供更優質的使用者體驗，請使用更鮮豔的主要顏色，指出應用程式視覺階層中較顯眼的動作。在下圖中，第一張圖片中的 FAB 具有與導覽相同的色調和色階的靜音顏色，因此可融入其中。第二張圖片顯示的懸浮動作按鈕 (FAB) 具有鮮明的主色，讓訪客更容易關注自己的身體。
如需實際查看動態色彩，請前往「自訂 Material Design 色彩」程式碼研究室。
語意顏色
語意顏色是有特定意義的顏色。舉例來說，「Error」是語意顏色。
顏色意義與顏色含義一致：如果您建立了模式，請在整個應用程式中重複進行相同操作。舉例來說，如果您用紫色表示會員功能，請為這個會員功能的所有例項使用紫色。
在以下範例中，應用程式在某個文字欄位中使用紅色表示發生錯誤，而另一個文字欄位卻是紫色，這樣會在略過表單時造成混淆。
雖然 Material 色彩配置提供語意「error」顏色，但您可以透過自訂顏色建立其他語意顏色，藉此擴充色彩配置。進一步瞭解自訂顏色。
「組合化」功能可將動態使用者產生的色彩與應用程式中的自訂色彩對齊，建立更和諧的調色盤。
表面顏色
表面顏色是專為元件容器、工作表和窗格等背景元素設計，代表應用程式大部分的顏色。別害怕使用大部分的平面空間，人類的眼睛需要放鬆的空間。途徑還有助於包含內容，並引導讀者前往。
M3 導入色調表面的概念，這表示所有顏色都衍生自色調調色盤。色調創造深度和對比度來輔助無障礙設計。如要進一步瞭解表面角色，請參閱介面角色 M3 指南。
無障礙設計和顏色
人們會視視覺風格而定，以多種方式顯示顏色。由於某些閱讀器屬於色盲，因此您必須檢查色彩組合，確保 UI 元素不會混合。雖然不透明度和權重可能不是顏色的常值色調，但它對於使用者如何感知顏色有很大的視覺效果。
色彩對比是指前景與背景元素的亮度差異，以比例格式呈現。系統會提供這項比率條件。例如，測量按鈕上文字與其容器間的對比，有助於判斷文字的易讀性。色彩對比指南分為文字和非文字，且各有專屬的成績組合。詳情請參閱「使用無障礙顏色進行設計」。
請勿將可用動作的顏色設為唯一預設用途或指標。 運用元件按鈕、變更字型粗細或甚至圖示，讓使用者知道可以與元素互動。
實作顏色
符記是設計資料的小型變數語意表示法。它們可重複使用，並將靜態值 (例如顏色的十六進位代碼) 替換為自行解釋的名稱。如要指派元素的顏色角色，請使用符記，而非硬式編碼的顏色值。
如需顏色角色對應的範例，請參閱 Now in Android Figma 範例。
使用 Compose (或使用 View 的 color.xml) 在顏色檔案 color.kt 中設定顏色值。這些顏色設為樣式是主題的一部分。詳情請參閱專為 Android 行動裝置主題設計。
如要在 Android 上設定顏色值，請使用十六進位代碼，採 6 位數格式的 RGB 代碼。如要擷取不透明度，請在前方附加該值，產生 8 位數程式碼。
使用 Material Design 主題建構工具：
您可以使用 Material Design 主題建構工具 (MTB) 建立自訂淺色和深色色彩配置。
MTB 可讓您以視覺化方式呈現動態色彩、產生質感設計權杖，以及自訂色彩配置。
在 Figma 檢查器面板中更新樣式屬性，即可完全自訂色彩配置。系統會匯出這些修改後的值。
