色彩

設(shè)計師從當(dāng)代建筑快耿、路標(biāo)糯彬、人行橫道以及運動場館中獲取靈感盏袄，由此引發(fā)出大膽的顏色表達(dá)激活了色彩忿峻，與單調(diào)乏味的周邊環(huán)境形成鮮明的對比薄啥，強(qiáng)調(diào)大膽的陰影和高光辕羽，引出意想不到且充滿活力的顏色。

• 調(diào)色板
• 配色方案
• 文字和背景顏色
• 主題

調(diào)色板

描述顏色常見有四種種方式：RGB垄惧、CMYK刁愿、HSB、HEX（16進(jìn)制值）到逊。

• RGB：由紅-Red铣口、綠-Green、藍(lán)-Blue三基色共同描述一個顏色觉壶。將三基色各劃分為256階脑题，共計可以描述256256256=約1680萬種顏色。

  • 用途：常用于描述電子顯示其中的顏色铜靶。
  • 示例：如 rgb(0,0,225) 標(biāo)示藍(lán)色

• HSB：H(hues)表示色相叔遂，S(saturation)表示飽和度，B（brightness）表示亮度。 HSB模式對應(yīng)的媒介是人眼已艰。痊末。飽和度為500的紅色值等于#F44336

• CMYK：印刷四色模式是彩色印刷時采用的一種套色模式，利用色料的三原色混色原理哩掺，加上黑色油墨凿叠，共計四種顏色混合疊加，形成所謂“全彩印刷”嚼吞。

  • C：Cyan = 青色盒件，又稱為天藍(lán)色或湛藍(lán)
  • M：Magenta = 品紅色，又稱為洋紅色
  • Y：Yellow = 黃色
  • K：Key Plate(blacK) = 定位套版色（黑色）

• HEX（16進(jìn)制值）：將RGB的10進(jìn)制顏色數(shù)值轉(zhuǎn)換為16進(jìn)制數(shù)值舱禽，常常被用在界面設(shè)計和程序開發(fā)上履恩。

以下是谷歌官方提供的調(diào)色板，由以下圖可見呢蔫，供選取了紅色切心、粉色、紫色片吊、深紫色绽昏、靛藍(lán)色、藍(lán)色俏脊、淺藍(lán)色全谤、青色、水鴨色爷贫、綠色认然、淺綠色、綠黃色漫萄、黃色卷员、琥珀色、橙色腾务、深橙色毕骡、棕色、灰色岩瘦、藍(lán)灰色未巫、黑白兩色，共計20類基礎(chǔ)色和16類強(qiáng)調(diào)色启昧。

• 基礎(chǔ)色：按照飽和度劃分為10個等級叙凡，谷歌建議將飽和度500的基礎(chǔ)色作為主調(diào)顏色。

• 強(qiáng)調(diào)色：按照飽和度劃分為4個等級密末，以A開頭握爷，如A100宰啦。

  Red & Pink & Purple Colors
  Deep Purple & Indigo & Blue Colors
  Light Blue & Cyan & Teal Colors
  Green & Light Green & Lime Colors
  Yellow & Amber & Orange Colors
  Deep Orange & Brwon & Grey Colors
  Blue Grey & Black & White Colors

下載調(diào)色板

配色方案

選擇一個調(diào)色板

這些調(diào)色板可以根據(jù)您的品牌來定義自己的調(diào)色板，例如單色饼拍，黑白赡模，全色或中性，再或者您可以直接使用Material Design調(diào)色板师抄。

注意：所有調(diào)色板應(yīng)在不同UI元素之間包含足夠的對比度漓柑。

選取材料顏色
首先從選好的調(diào)色板中選擇三個不同飽和度的顏色作為基礎(chǔ)色，其中飽和度500的作為主調(diào)顏色叨吮。然后在其他調(diào)色板中選取一個飽和度A開頭的強(qiáng)調(diào)色辆布，如A200 #68EFAD

基礎(chǔ)色-紫色 & 強(qiáng)調(diào)色-綠色

應(yīng)用程序示例

基礎(chǔ)色和強(qiáng)調(diào)色該如何使用呢？

• 基礎(chǔ)色（或主調(diào)色）：該顏色應(yīng)該盡可能的應(yīng)用在所有界面或組件中茶鉴。
• 合成色：該顏色被用來指示相關(guān)動作或信息锋玲。合成色可以是基礎(chǔ)色更暗或更淺的變體顏色。

（基礎(chǔ)色）合成色100 #C5CAE9

（強(qiáng)調(diào)色）合成色A100 #FF80AB

• 強(qiáng)調(diào)色：該顏色被應(yīng)用于浮動操作按鈕和交互式元素涵叮，例如：

  • 文本字段和游標(biāo)
  • 文本選擇
  • 進(jìn)度條
  • 選擇控件惭蹂，按鈕和滑塊

  • 鏈接

    
    
    浮動操作按鈕 & 切換按鈕

以下是一些使用示例：

文本中的超鏈接

應(yīng)用欄上的按鈕

狀態(tài)欄 & 應(yīng)用欄 & 按鈕

聚焦?fàn)顟B(tài)或選擇狀態(tài)的控件

• 備選強(qiáng)調(diào)色：分為深色調(diào)和淺色調(diào)。如果您的強(qiáng)調(diào)色太淺或太暗割粮，與背景顏色對比不夠明顯的話盾碗，改如何解決呢？

  • 使用更深或更淺的強(qiáng)調(diào)色舀瓢。

    
    
    備選強(qiáng)調(diào)色示例

  • 使用基礎(chǔ)色的變體色
    使用基礎(chǔ)色在白色背景下的飽和度為500的顏色值作為備選強(qiáng)調(diào)顏色廷雅。
    但是，如果您的背景顏色已經(jīng)是飽和度為500的基礎(chǔ)色顏色值京髓，請將顏色設(shè)置為100％的白色或54％的黑色航缀。

文本和背景顏色

文本可以用不同的不透明度顯示，以表達(dá)某些信息相對于其他信息的重要性堰怨。文本的不透明度級別取決于您的背景是更暗還是更淺芥玉。

淺色背景上的黑色文本

對于淺色背景上的黑色文本，應(yīng)用以下不透明度級別：

• 最重要的文本的不透明度為87％诚些。
• 次要文本（在視覺層次結(jié)構(gòu)中較低）具有54％的不透明度飞傀。
• 文本提示（如文本字段和標(biāo)簽中的文本提示）和禁用文本的視覺突出性甚至更低皇型，透明度為38％诬烹。

淺色背景上的黑色文本示例

黑色背景上的白色文本
表格中的值取決于黑色背景上的白色文本重要性的相對水平。出現(xiàn)在彩色背景上的白色文字應(yīng)該以100％的不透明度顯示弃鸦。

黑色背景上的白色文本示例

用不透明度替代灰色
透明的黑色或白色文本相對于背景顏色的變化保持清晰绞吁，活潑。這使得它比同樣上下文中的灰色文本更靈活唬格。

不透明度替代灰色示例

圖標(biāo)和其他元素
像白色或黑色圖標(biāo)（而不是一個特定顏色）的元素可以在不透明度為38%的十六進(jìn)制值上使用家破，使得它們在任何顏色的背景上表現(xiàn)良好颜说。

圖標(biāo)和其他元素不透明度參數(shù)

主題

主題可以讓您的應(yīng)用程序擁有一致的意境。主題指定表面的暗度汰聋，陰影的水平和墨水元素適當(dāng)?shù)牟煌该鞫让欧唷榱颂岣邞?yīng)用程序之間的一致性，可以選擇淺色和深色主題烹困。

淺色調(diào)主題

1. 狀態(tài)欄
2. 應(yīng)用欄
3. 背景
4. 卡片/對話框

淺色調(diào)主題配色

淺色調(diào)主題示例

暗色調(diào)主題

1. 狀態(tài)欄
2. 應(yīng)用欄
3. 背景
4. 卡片/對話框

暗色調(diào)主題配色

暗色調(diào)主題示例