色彩

http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorstory-01_large_xhdpi.png" alt="SystemIcons icon" />

色彩從當代建筑、路標、人行橫道以及運動場館中獲取靈感，由此引發(fā)出大膽的顏色表達激活了色彩，與單調(diào)乏味的周邊環(huán)境形成鮮明的對比。強調(diào)大膽的陰影和高光。引出意想不到且充滿活力的顏色。

色樣 - 0.13 MB(.zip)

UI調(diào)色板

調(diào)色板以一些基礎色為基準，通過填充光譜來為Android、Web 和 iOS 環(huán)境提供一套完整可用的顏色?；A色的飽和度是 500。

http://wiki.jikexueyuan.com/project/material-design/images/style-color-palette-1.png" alt="choose11 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-palette-2.png" alt="choose12 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-palette-3.png" alt="choose13 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-palette-4.png" alt="choose14 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-palette-5.png" alt="choose15 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-palette-6.png" alt="choose16 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-palette-7.png" alt="choose17 icon" />

UI顏色使用

選擇你的調(diào)色板

限制顏色的數(shù)量，在眾多基礎色中選出三個色度以及一個強調(diào)色。強調(diào)色用于后背，可有可無。

http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorapplication-color_application-01a_large_mdpi.png" alt="choose1 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorapplication-color_application-01b_large_mdpi.png" alt="choose2 icon" />

為灰色的文字、圖標和分隔線加上 alpha 值

為了有效地傳達信息的視覺層次，應該使用深淺不同的文本。對于白色背景上的文字，標準 alpha 值為 87%（#000000）。視覺層次偏低的次要文字，應該使用 54%（＃000000）的 alpha 值。而像正文和標簽中用于提示用戶的文字，視覺層次更低，應該使用26%（#000000）的 alpha 值。

其它元素，如圖標和分隔線，也應該具有黑色的 alpha 值，而不是實心顏色，以確保他們能適應任何顏色的背景。

對于彩色背景上白色或黑色文字，可以通過表格中的調(diào)色板找到合適的色彩對比度和 alpha 值。

http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorapplication-color_application-01b_large_mdpi.png" alt="choose3 icon" />

我們十分鼓勵在 UI 中的大塊區(qū)域內(nèi)使用醒目的顏色。 UI 中不同的元素適合主題中不同的色彩。工具欄和大色塊適合使用飽和度 500 的基礎色，這也是你應用的主要顏色。狀態(tài)欄適合使用更深一些的飽和度 700 的基礎色。

http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorapplication-color_application-03_large_mdpi.png" alt="choose4 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorapplication-color_application-04_large_mdpi.png" alt="choose5 icon" />

強調(diào)色

鮮艷的強調(diào)色用于你的主要操作按鈕以及組件，如開關或滑片。左對齊的部分圖標或章節(jié)標題也可以使用強調(diào)色。

http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorapplication-color_application-05_large_mdpi.png" alt="choose6 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorapplication-color_application-08_large_mdpi.png" alt="choose7 icon" />

備用強調(diào)色

如果你的強調(diào)色相對于背景色太深或者太淺，默認的做法是選擇一個更淺或者更深的備用顏色。如果你的強調(diào)色無法正常顯示，那么在白色背景上會使用飽和度 500 的基礎色。如果背景色就是飽和度 500 的基礎色，那么會使用 100% 的白色或者 54% 的黑色。

http://wiki.jikexueyuan.com/project/material-design/images/style-color-colorapplication-color_application-04_large_mdpi.png" alt="choose8 icon" />

主題

主題是對應用提供一致性色調(diào)的方法。樣式指定了表面的亮度、陰影的層次和字體元素的適當不透明度。為了提高應用間的一致性，提供兩種主題選擇：

• 淺色
• 深色

主題 - 1.3 MB(.ai)

http://wiki.jikexueyuan.com/project/material-design/images/Style-Color-Themes-theme-01_large_mdpi.png" alt="choose9 icon" /> http://wiki.jikexueyuan.com/project/material-design/images/Style-Color-Themes-theme-02_large_mdpi.png" alt="choose10 icon" />

原文：Color 翻譯：arjinmc 校對：PoppinLp