參考:UI 設計知識庫
色彩是由「色相」、「飽和度」以及「明度」三種要素組成
色相
俗稱顏色,即每種色彩的相貌、名稱,如紅、橘紅、翠綠、湖藍,群青等等。色相是區分色彩的主要依據,是色彩的最大特征。
飽和度(純度)
飽和度是指色彩的鮮艷程度,即各色彩中包含的單種標準色成分的多少,也稱色彩的純度。越是純的顏色,飽和度越高。飽和度降低,則顏色越灰(越臟);
我們可以通過在顏色中增加灰色來降低顏色的飽和度;
不同色相所能達到的純度是不同的,其中紅色純度最高,綠色純度相對低些,其余色相居中,同時明度也不相同。
明度
明度是指色彩的明暗程度。色彩的明度包括兩個方面:一、某一色相的深淺變化,如粉紅、大紅、深紅,都是紅,但是一種比一種深。二是指不同色相間存在的明度差別,如六標準色中黃最淺,紫最深,橙和綠、紅和藍處于相近的明度之間。
人們常說的把顏色調亮一點,就是指增加明度;顏色深一點,就是指降低明度
三原色
還記得上小學三年級的美術課上,美術老師講三原色有兩種,一種是光的三原色,一種是顏料三原色
區別在于,光的三原色混合在一起,得到白色
而顏料三原色混合在一起,得到黑色,所以如果黑色染料用完了,不用專門去買黑色染料,只要拿三種原色混合就可以得到黑色
正經。。。。
光的三原色就是RGB,分別是紅(Red)、綠(Green)、藍(Blue)
顏料三原色是CMY,分別是青(Cyan)、洋紅(Magenta)以及黃色(Yellow)
雖然上面提到顏料三原色混合可以得到黑色,但是由于完美無雜質的顏料是不存在的,所以通過混合顏料無法得出純粹的黑色,因此在印刷品中又加入了黑色(Black),和CMY共同組成 CMYK四個印刷用的顏色。
PS:我很好奇,為什么CMY都取首字母,到了黑色,偏偏區最后一個字母?
試想一下,我們該如何通過調整RGB和CMYK的數值,來讓某個顏色更“亮”一些,或者更“深”一些?
由于這兩種色彩系統都是通過原色的混合組成顏色,這導致我們不可能在保證色相不變的情況下通過數值來調整顏色的飽和度和明度,只要我稍微調整其中某一個數值,色相立刻會發生改變
栗子1
結論1:可以發現 顏色的色相、飽和度發生了變化,明度不變。
栗子2
結論2:色相、飽和度、明度都發生了變化
大總結
在RGB、CMYK中,完全無法通過調整數值來精準調整色相、飽和度、明度
那么問題來了,我們為什么了解RGB和CMYK?僅僅是為了了解色彩的顯示原理。如:
可對我們而言,知道這些顯然沒有卵用
我們只需要知道如何調整顏色,以及把十六進制的色值記下來,日后在工作中告訴開發即可
什么?你還不知道什么叫十六進制的色值?
既然你誠心誠意的問了
十六進制色值由6位字母和數字組成(字母不區分大小寫),在PS以中的位置如下
HSB
既然我們數值的配色方法是基于「色相」、「飽和度」以及「明度」,那么我們需要一套能和這三種屬性一一對應的色彩系統
即 HSB,H(hues)表示色相,S(saturation)表示飽和度,B(brightness)表示明度
對我們而言,HSB是最理想的色彩系統
上圖中的彩條,就是色相
在設計軟件中,色相的范圍在0~360之間,這不難理解,因為色相環是個圓,這個所以有360°不同的色相
改變H的數值即可更改色相,如果想微調色相,只要簡單調整數值即可。飽和度在0~100之間,數值越大純度越高,反之則越低。
目前飽和度 S 為84
我們將 S 分別調整為0和100,顏色的變化如下
選色的點呈水平移動
當飽和度為0時,原本的綠已消失殆盡,變成灰色,當飽和度為100時,綠色最純
明度也在0~100之間,數值越大顏色越亮,反之越暗
選色的點呈垂直移動,當飽和度為100時,綠色最亮
當明度為0時,綠色消失,變為純黑色#000000
總結:
如果你開始使用HSB的色彩系統,你會發現,調色變得越來越輕松,想讓橙色再黃一點?那就稍微增大H的數值,想讓飽和度降低?那就調低S的數值
你再也不用拿鼠標在色盤上進行不精準的操作,通常你以為你已經細微的調整了取色點的位置,實際上壓根沒有變化,或者不是朝著你希望的方向進行移動
冷暖色
色彩的冷暖是配色的重要概念,色彩的冷暖對色彩情感的表達有決定性的作用。
暖色有積極、熱情、擴張的情緒效果;冷色有消極、冷靜、收縮的 情緒效果。
最強烈的暖色是紅、黃,最強烈的冷色是藍、青。
PS:純綠和純紫一般認為沒有冷暖傾向。
如:黃綠色和淡紫色與粉紅對比顯示出冷色的感覺,與淡藍色對比顯示出暖色的感覺。
色彩膨脹
不同的顏色在視覺上有不同的面積傾向,鮮艷的暖色有膨脹的視覺傾向,看起來比實際大小相同的暗淡的冷色面積要更大,這就是色彩的膨脹效應。
黃色圓看起來會比黑色、深藍色圓更有擴張感,面積更大,而黑色圓看起最小
總結:
明度越高,飽和度越高,越接近暖色越有膨脹感,看起來面積越大。
明度越低,飽和度越低,越接近冷色越有收縮感,看起來面積越小。
這意味著在設計圖表,尤其是類似于餅狀圖的時候要注意顏色膨脹性對表示準確性的影響
配色理論
配色的目的在于讓畫面產生對比或者調和的效果
對比能增加畫面的豐富度和視覺吸引力,畫面突出重點;而調和則能讓畫面在視覺上更舒適,瀏覽起來更輕松愉悅。
一般過程
1.確定配色范圍 ? ?2.確定主色、輔色、強調色 ? ? 3.色彩配比
配色范圍:人視覺觀察畫面是有局限性的,不會一眼看到所有內容,所以有層次的畫面需要分層次進行配色,一般而言即是確定是為前景的配色還是為背景配色,確定一個對象配色之后再以此考慮另一部分的配色,這樣能便于調整保證整體的協調
主色、輔色、強調色:主色是畫面整體的色彩基調,強調色是畫面最重要的部分,如果是單色調設計只需要主色和強調色,而輔色通常是作用是與主色配合增加畫面對比度和空間感。所以主色與強調色之間一般都有強烈對比,輔色如果也是與主色對比的話,對比程度不應該強過主色與強調色之間的對比。
色彩配比:一個對象的配色中色彩的數量一般需要控制在 3~4 類以下。
PS:這里說的類指定是一定范圍內的顏色,比如同色相,明度相差不大的一組顏色只算作一類
配色的基本思想是色彩的需要變化,不一定是色相層次的變化,還可以是明度、飽和度層次的變化。
而色彩面積的方向性的變化對畫面有決定性作用:面積最大的主色,比主色面積小的輔色,然后是更小的第二輔色,最后是面積最小的點綴色(強調色)
各種顏色面積的比例無需精確調制,一般只需明確 主色 ≥ 輔色 + 強調色 即可。所以常用的主色、輔色、強調色比是 4:3:1,主色 = 輔色+ 強調色。