本節書摘來自異步社群《點睛：actionscript3.0遊戲互動程式設計》一書中的第1章，第1.4節，作者：遊志德 , 彭文波 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
進入正題之前，我們先來了解一下灰階/明度。
1.4.1 灰階/明度的概念及其與hsb亮度的異同
在很多場合，灰階與明度的概念完全等價。
“灰階”一詞最初來源于攝影領域，在彩色顯像技術問世以前，拍攝出來都是黑白照片，隻有黑白灰3種顔色能完好無損地記錄下來，其他顔色将根據其亮度呈現出不同深度的灰色。亮度越大灰色越淺，反之越深，把從黑到白的過渡區域劃分為若幹個級别，就會得到不同的“灰階等級”。能呈現的灰階等級愈多，畫面的層次感就愈豐富。
是以，從彩色轉黑白，就可以簡單了解為去除色調并且把飽和度調整為0的過程。
從概念上看，灰階與亮度所表達的是同一個意思。那麼，我們可以給兩個術語直接劃上等号嗎？
為了更直覺地分析以上問題，我制作了如圖1-29的一幅圖檔。
這可不是某國家的三色旗，我們隻是簡單地繪制了6個色塊，上面3種顔色分别為#ff0000，#00ff00和#0000ff，即一個通道是255，另外兩個通道是0；下面3種顔色恰好相反，兩個通道是255，一個通道是0，即#ffff00，#ff00ff和#00ffff。
我們嘗試把這張圖檔轉成黑白照。如果灰階與亮度等價，那麼我們隻需把這6種顔色的飽和度都設定為0就好了。
首先看看hsv，根據轉換公式，隻要rgb其中一項達到最大值，亮度就是100%。是以，我們把s都設定為0以後，6種顔色都變成白色了。很顯然v跟灰階在數理層面上的描述大相徑庭，任何一種彩色都不可能在黑白照片裡呈現為白色。
至于hsl，它的亮度=(min+max)/2，以上6種顔色，min均為0，max均為255，是以計算結果均為50%，灰階值跟白色是拉開距離了，但肉眼往往告訴我們，下面一排的顔色看着要刺眼一些，轉成黑白照之後，下面的顔色應比上面的淺。
1.4.2 灰階的計算方法
我們回過頭來看rgb，站在科學的角度來解釋，它們确實也有更明亮的理由，因為下面一排顔色反射出來的色光總量是上一排色的兩倍。
為此，筆者曾自作聰明地發明了一條“原創”的灰階公式。
gray=(r+g+b)/3
哈哈，用色光總量來表達顔色的灰階想必就比較準确了吧！沾沾自喜一番以後，我還試着用這條自創的定律來轉換這張測試圖檔。上下色塊的灰階果然拉開了，可是很不幸地，左右相鄰、邊界分明的色塊依然粘連在一塊，如圖1-30所示。
顯然此法生成的黑白照難登大雅之堂，色塊之間的分界線全部丢失，而且同一行的顔色在我們人類的視覺系統裡，亮度也不盡相同。比如視網膜會認為上排的綠色要比旁邊的紅和藍明亮一些，而下排的粉紅色則沒有相鄰的黃色與淡綠來得刺眼。
一項偉大的發明——灰階心理學公式誕生了！它彙聚了光學實體、眼球視光學、人類心理學、美術鑒賞等前沿學科之精華，集科技、藝術、社會科學于一身，高深莫測，唯美唯妙，堪稱視覺科學史上最驚天地、泣鬼神之大作，沒有之一。
灰階心理學公式并不複雜，它深入淺出地描述了各種顔色對肉眼刺激程度的差異，僅僅使用最簡單的加法和乘法就完成了灰階的整個演算過程：
gray = r0.299 + g0.587 + b*0.114
式中，r、g、b的取值範圍均為0～1。
如果大家有閱讀過fl.motion.adjustcolor類的代碼，想必就會對這條公式有一種似曾相識的感覺。adjustcolor裡用到了公式裡的3個系數（具體數值可能有一些微小的差異），而實際上，adjustcolor正是用灰階代替了亮度。至于為什麼，我們看看上面的黑白照轉換結果就不言而喻了。
令r=g=b=1，灰階就剛好等于100%，是以它實質上是對rgb 3個數值做了一個權重平均數的運算，其中g的權重（通俗點說叫比重）最大，紅色次之，藍色最小。是以，心理學公式認為，綠色最刺眼，它比紅色要明亮1倍，反射一點綠光對視網膜的刺激相當于兩點紅光。
以上描述與肉眼的感覺相當接近，但至于具體數值是如何測算出來的，我們就無從考究了。
筆者嘗試運用灰階心理學公式對圖1-29進行灰階轉換，效果要比自己的“原創”定律有水準多了，如圖1-31所示。
至此，亮度跟灰階的關系已經比較明确了，它們都為量化色彩的明暗而生，本着“科技以人為本”的精神推動着人類社會公德心的進步，其中，亮度着重對整體的把握，從顔色類别、鮮豔程度、明暗程度3個人類感覺屬性去描述被數理科學抽象過的色彩數值，而灰階則更強調對事物單項屬性的深度探讨，有針對性地彌補hsb模式中亮度計算方法與視覺器官不夠吻合的缺陷。
現在大概也不會有人去拍攝黑白照片了（純粹抱着懷舊心态的除外），即使遇到真正需要使用黑白圖像的場合（例如紀實片的錄制與後期處理、汶川地震哀悼日播放的視訊等），也不會專程從博物館借用一台19世紀出廠的黑白相機來開展拍攝工作，而都通過photoshop等軟體對彩色圖像進行去色處理。而灰階轉換的算法，恰恰就來源于上述的心理學公式。
在藝術程式設計領域，灰階除了直接用來制作黑白效果（比如遊戲按鈕的禁用狀态、玩家複活前的灰屏效果等）以外，還廣泛應用于圖像識别、色彩調整、邊緣檢測、光影預處理、模型上色等圖像處理技術中（photoshop的顔色混合模式就是一個成功的典範）。它的專一性使圖形的創作流程有章可循，讓藝術不再隻掌握在專業設計師的手上。
下面我們就借助灰階公式搭配出一套相對和諧的色系。
**
1.4.3 用灰階/明度指導色彩搭配**
我們試着隻通過調整不等于0的通道，讓上一排的色彩在灰階上保持一緻，把3個顔色分别代入到心理學公式，得
讓它們灰階相等，則
可見，b值一定最大，不妨讓b取最大值255，求得r=97，g=50。把這兩個值分别應用到紅和綠兩個色塊上。
綠色不再顯得刺眼，整體感也因為灰階的一緻性而變得比之前柔和了，如圖1-32所示。
以上算法的局限性也顯而易見，灰階永遠無法沖破 0.114這一關口，因為此時最暗的藍色已經達到255這個上限，導緻顔色的整體亮度不能超過11.4%，明色系無法搭配出來。想要突破這一瓶頸，我們就不得不嘗試給多個通道同時指派了。
現在假設要将灰階等級調整為跟綠色（#00ff00）一緻，用心理學公式算得gray=0.576 * 255 = 147。即對于r和b，都有
因為紅色和藍色都比綠色要暗，是以不妨讓紅色的r和藍色的b都等于最大值255。
于是對紅色而言，有2550.299 + g 0.587 + b * 0.114 = 147，簡化得
一條方程，兩個未知數，無法求出唯一解。在hsb模型裡，h是我們需要拉開差距的值，而b已經為灰階所替代，是以隻能試圖從s下手多加一條方程了。
無論是hsv還是hsl，飽和度的公式都有一個共同特征：max和min的內插補點越大，飽和度就越高。因為#00ff00的飽和度達到了滿值，而max已經讓r通道據為已有，是以g和b就隻能去占min的位置了。
令min=0，色彩的飽和度即達到最大值。
我們先試着讓g=0，則有b 0.114 = 71，求得b = 623，數值徹底溢出了，無奈之下，隻能讓b=0，此時g 0.587 = 71，求得g = 121。
我們用同樣的方法處理藍色，得到藍色的rgb數值為（0，201，255）。
我們把顔色值應用到色塊上，明色系搭配出來啦，而且也蠻好看，如圖1-33所示（當然這隻是按筆者自己的審美标準來評價）。
同理我們嘗試在不改紅色的前提下搭配出一套中等明度的色系，就會發現，在要求飽和度達到滿值的情況下，總要有一項的數值大于255 才能使灰階的計算結果跟紅色保持一緻，色系搭配失敗。這也從一定程度上解釋了為什麼一個色彩鮮豔而豐富的界面裡很少會出現大面積的純紅色（gcd類型的網站除外）。
另外，根據色相環的構成，如果想讓色調更加均勻，那選擇三色系的時候，就最好對美學色環進行等分，比如取0,120,240這樣的3個色相，搭配為紅黃藍三色，以達到對比的和諧統一，如圖1-34所示。
灰階的另一個任務是給灰階圖上色或者是彩圖換色（實質上也是取了彩圖的灰階之後再重新上色），但考慮到要用比較複雜的代碼來實作，我們就先擱置一下。