Material design中所說的基礎色飽和度500,600,700這是什麼意思?

「調色板以一些基礎色為基準,通過填充光譜來為Android、Web和iOS環境提供一套完整可用的顏色。基礎色的飽和度是500。」
鏈接色彩 - Material Design 中文版
我搞不懂飽和度500是什麼意思,難受得都快要死了,求高人搭救。


我也好糾結這個。

我對比了閱讀了「谷歌官方的英文原文」和「極客學院的中文翻譯」,感覺中文那個有點是直譯的,導致不太好理解。
Google了很多文章來看之後,說說我的理解,供大家參考,不好的地方望指出。

# 數值的意義
*00 和 A*** 這些數值用來表示HEX(十六進位)顏色值。這樣當你想要用某一個顏色的時候,可以直接用數值表示,而不用引用16進位顏色值。比如:

  • Red 500: #F44336
  • Pind A100: #FF80AB

這樣做的意義是,當你想要調一個色板的時候,可以直接使用這些數值來表示,同時方便與團隊的其它同事溝通。如下圖(開發人員直接用red-900表示#b71c1c):

@red-50: #ffebee;
@red-100: #ffcdd2;
@red-200: #ef9a9a;
@red-300: #e57373;
@red-400: #ef5350;
@red-500: #f44336;
@red-600: #e53935;
@red-700: #d32f2f;
@red-800: #c62828;
@red-900: #b71c1c;
@red-A100: #ff8a80;
@red-A200: #ff5252;
@red-A400: #ff1744;
@red-A700: #d50000;
@red: @red-500;

# 谷歌是怎麼調出這些顏色的?
原文是這麼說的:

The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.

翻譯:

從Primary color(基礎色)開始,然後通過填充spectrum(光譜)提供了一套完整可用的顏色。谷歌建議用「500」作為Primary color,其它的顏色作為Accent color(強調色)。

# 回到題主的問題
飽和度500並不是指飽和度最高的顏色。比如飽和度最高的紅色應該是#FF0000,而Red-500是 #F44336。這個500色是谷歌調出來的比較和諧的顏色作為基礎色。
然後通過加深和減淡,調出其它的顏色:*00和A***的那兩組顏色。

*00:這組是用在primary color palette(主色Primary)
A***:這組用在secondary palette(強調色Accent)

參考鏈接:
1. google.com 的頁面
2. 色彩 - Material Design 中文版
3. reddit.com 的頁面
4. Material Design colors in Android Lollipop


一般色盤有2種調法,一種是rgb,即直接給出rgb的值。另一種是hsb,給出飽和度亮度明度。

你打開win裡面的色盤,裡面有使用哪個調法的選項。自己調一下就知道了。

為什麼用hsb不用rgb,是因為hsb容易調出相似色或者同類色。自己練習幾次就知道了


Bold use of color in large fields in the UI is strongly encouraged. Different elements in the UI will take on different parts of the color theme. Toolbars and larger color blocks will take on the primary 500. This is the main color of your app. The status bar should be the darker 700 tint of your primary color.

官方給的文檔中有解釋…


我個人最簡單的理解就是,500是色彩的標準值,通過這個標準值來進行深淺的變化。比如,你900,那就是加深,100就是減淡。這個加深和減淡,都是通過增加白色和黑色來進行的。


注意看左邊紅色圓點 文檔中的數值影響的應該是這段代碼吧 翻譯有問題 做設計的時候用色值就好
不過我輸入代碼的時候參數和色值對應不起來 望大神解答


那就是個標度,便於記憶。你不用自己調了,直接用上面寫的RGB值就可以。


看鏈接里展示的,飽和度500都處於該色系的中間位置,而且貌似是飽和度的最高狀態,是不是在hsb模式下,飽和度100%,然後調整其明度,又或者明度100%,調整其飽和度而得到其他輔色?


推薦閱讀:

Material Design 風格的網站的有哪些?

TAG:設計 | 平面設計 | 顏色 | 用戶界面設計 | MaterialDesign |