淺談色彩學(xué)：網(wǎng)頁設(shè)計(jì)中同色系的變化應(yīng)用

色彩的世界多采多姿，不同的色彩計(jì)畫常常左右了產(chǎn)品最終給人的感覺，而色彩並不會(huì)單獨(dú)存在，良好的色彩搭配常?？梢宰屇愕纳视?jì)畫更加吸引人的目光。

　　在〈淺談色彩學(xué)：對(duì)比色配色〉中，我們?cè)岬缴时壤峙涞脑瓌t，透過一些公式化的配色技巧讓大家在搭配色彩的時(shí)候有所依據(jù)而發(fā)展，不致於手足無措不知該從何開始。

　　以 70% 底色、25% 主色與 5% 強(qiáng)調(diào)色的配色原則為例，由於底色與主色都是屬於同一個(gè)色相的色彩(黃色系)，因此以這個(gè)例子而言，其實(shí)是使用了兩個(gè)色彩的配色方案：

　　在一般情況下，一個(gè)版面中使用的色彩建議不要超過三個(gè)色彩。這邊所指的三種色彩通常是指「色相」上的不同。米黃色與銘黃色在人類的視覺感受上，都認(rèn)為是溫暖的黃色色調(diào)，因此並不會(huì)主觀的認(rèn)為他們是不同的色彩，而是同一個(gè)色系的色彩集。而紫色就很明顯不屬於黃色色系的一份子，因此在這個(gè)配色方案中可以算是一個(gè)獨(dú)立的色彩

　　然而不管是兩個(gè)顏色還是三個(gè)顏色，很明顯都不夠用。

　　同色系色彩可以怎麼應(yīng)用?

　　設(shè)計(jì)師在為版面製作細(xì)節(jié)的時(shí)候，常常會(huì)需要使用許多同色系的色彩，例如需要利用明暗變化來營造元件立體感的時(shí)候：

　　抑或是同一個(gè)按鈕在不同的狀態(tài)下想利用透過些微的色彩變化來給予使用者回饋，例如這邊利用加亮以及加暗來模擬「發(fā)光」以及「凹陷」的效果，這時(shí)候都會(huì)需要更多同色系的色彩來輔助：

　　想要取得這些同色系色彩，有許多方式：

　　使用 HSB 選擇顏色：

　　幾乎所有的繪圖軟體都提供了 HSB 的選色工具，在大部分的情況下，設(shè)計(jì)師可以輕易的使用 HSB 快速取得各種同色系的色彩。HSB 使用三種數(shù)值來描述色彩：分別為色相(Hue)、飽和度(Saturation)以及明度，或稱亮度(Brightness)：

　　在大部分的情況下，我們僅需調(diào)整明度的數(shù)值即可得到需要的色彩：

　　然而色彩有分高明度以及低明度的色彩，像是黃色就是高明度的色彩，因此色彩的明度數(shù)值就高達(dá) 90%，當(dāng)我們需要比黃色還更亮的色彩時(shí)怎麼辦呢?這時(shí)候可以去調(diào)整飽和度的數(shù)值，讓色彩往白色接近一些，以取得更高明度的色彩。當(dāng)然啦，在顯示螢?zāi)簧鲜遣淮嬖诒劝咨€要亮的色彩的。

　　關(guān)於 HSB 的更多細(xì)節(jié)可參考〈淺談色彩學(xué)：人性化的 HSB 色彩空間〉一文。

　　利用繪圖軟體的透明度以及疊加工具來取得色彩：

　　比起 HSB，這個(gè)方法似乎又更科學(xué)化了一些，適合設(shè)計(jì)的一開始就利用這個(gè)方法來定好一套色彩規(guī)範(fàn)，方便後續(xù)作業(yè)、團(tuán)體分工作業(yè)等等。

　　我們可以利用黑色與白色，透過不同透明度的疊加在原始色彩中，以取得同色系的色彩：

　　這個(gè)效果很接近直接調(diào)整飽和度以及明度數(shù)值所得到的色彩結(jié)果，很快速，但是不一定可以取得吸引人的色彩。

　　繪圖軟體中提供了色彩混合的疊加模式，我們這邊利用「柔光」(soft light)的疊加模式，以相同的方式疊加在原始色彩中，可以得到完全不同的色彩組合，比起透明度的疊加，取得的色彩更舒服、更調(diào)合：

　　當(dāng)柔光的效果不夠強(qiáng)烈的時(shí)候，我們另外可以嘗試其他不同的疊加方式，例如以下就是使用「重疊」(overlay)的混合模式得到的色彩組合：

　　當(dāng)然，不同明度的色彩使用各種混合模式亦會(huì)得到不同的結(jié)果，高明度與低明度的色彩適用的混合方式並不同，建議可以依據(jù)自己的原始色彩多方嘗試、快速取得最符合自己需要的色彩組合。

　　方法是死的，這些配色方法都只是透過科學(xué)化的方式、幫助我們更快的取得需要的色彩組合來應(yīng)用，當(dāng)然設(shè)計(jì)師們應(yīng)該按照自己的需求來對(duì)色彩做調(diào)整。例如黃色系的高明度色彩，其實(shí)如果將「色相」做細(xì)微幅度的往紅色(低明度)偏移，也可以得到降低明度的結(jié)果，也讓人感受到是同一色系的延伸。