色彩是設計的靈魂，關於色彩的那些事兒，你都了解嗎？

在設計中，有一種痛叫只會PS，有一種淚是不知道排版，還有一種絕望是不會色彩搭配。一個好看的作品，色彩的搭配是佔了90%的。那麼關於色彩的那些事兒，你都了解嗎？讓我們一起來看看吧。

如果要在設計中有效的使用顏色，那麼就需要了解一下顏色的概念和顏色理論術語。透徹的了解像色度、明度和飽和度這樣的概念是創建屬於你自己的非常棒的配色方案的關鍵。在我們的顏色理論系列第1部分：顏色的含義中，提到了不同顏色的意義。在此我們首先將溫習一下這個理論的基礎：什麼條件將影響到一個已 知的顏色，例如添加灰色、白色或灰色到純色相中，此外，還有這樣做將如何影響設計，當然示例是必不可少的。

色相

色相是最基本的顏色術語，通常指的是一個物體的顏色。當我們說「藍色」、「綠色」或「紅色」時，我們所談論的就是色相。設計當中色相的使用向網站的訪問者傳遞了重要的信息。閱讀本文第一篇可以了解不同色相傳遞的意義。

示例

Happy Twitmas網站背景和版式的一些部分所使用的主色相是鮮紅色。

同時使用大量的純色相可以增添外觀的有趣性，看起來妙趣橫生，如這個網站的標題和其他一些地方所體現的那樣。

純紅色在網頁設計中是非常受歡迎的顏色。

這個網站的標題和logo混合使用了大量的純色相。

純綠色通常很少看到，因此較之其他顏色顯得更出眾。

色度

色度指的是顏色的純度。高色度的色相當中沒有黑色、白色或灰色。添加白色、黑色或灰色將降低色度。它類似於飽和度，但又不完全一致。色度可被看作是一個顏色相對於白色的亮度。

在設計當中，要避免使用具有非常相似色度的色相。而要選擇那些具有相同或差異較大色度的色相。

示例

青色具有很高的色度，因此在黑色和白色之間非常突出。

這是另一個具有高色度藍色的網站，儘管其中包含了一些色度略低的淺色調和陰影色調。

在同樣的色調中結合高飽和度和低飽和度可以呈現複雜和典雅的設計效果。

具有高色度的顏色是中庸型設計的首選，如本例所示。

不同色度的應用可以製造出非常舒適的視覺漸變效果。

飽和度

飽和度指的是色調在特定的照明條件下呈現出的樣子。飽和度可以使用術語弱、強，或術語弱色相及純色相來表示。

在設計當中，相似級別飽和度的顏色讓設計看起來更具連貫的一致性。同色度一樣，具有相似但不完全相同飽和度的顏色可以讓訪客有不和諧之感。

示例

本例所使用的大量不同的色相都具有相似的飽和度水平，從而為整體的設計增添了協調感。

通過水彩效果的強調，色彩與相似的柔和飽和度水平相結合創造出一種柔和的設計效果。

如本例所示，低飽和度水平的色相不一定要更鮮亮。

這是一個極好的例子演示如何在低飽和度背景中使用高飽和度色相以達到突出的效果。

這是另一個如何使用低飽和度顏色來突出臨近的高飽和度顏色。

明度

明度也被稱作「亮度」。它指的是顏色的明暗程度。亮的顏色具有較高的明度值。例如，橙色的明度比深藍色或暗紫色更高。黑色的明度是所有色相中最低的，而白色的明度是最高的。

當在設計中應用明度的時候，最好選用不同明度的顏色，特別對於高色度的顏色來說。高對比度通常可以設計出更具美感的效果。

示例

這裡，具有高明度黃色的使用在低明度的黑色和灰色中相當突出。

該網站使用了兩種不同明度的藍色調。由於不同的明度對比強烈，整體效果更具視覺上的吸引力。

將具有相似明度的顏色放在一起創造出了一個充滿活力和生動的背景，這是設計本身所產生的增強效果。

這裡紅色的明度比淡藍色稍低，它的明度比白色還低。

即使在非常類似的色調中，人類的眼睛也可以選出不同的明度。

色調

當灰色加入某色相時就形成了色調。色調通常比純色相看起來更暗淡或柔和。

色調有時在設計中非常容易使用。摻入更多灰色的色調可以使網站具有一定的古舊感。根據不同的色調也可以為外觀效果增添一些精緻優雅的感覺。

示例

色調的應用可以使網站看起來非常精緻，同時增添一些復古的韻味。

這個網站將不同色調、陰影色調和淺色調的藍色結合使用。

如本例所示，色調可以通過在周邊加入灰色來強調/

在這個設計中，導航區和背景使用的色調讓這個網站看起來具有復古風和手工製作的效果。

這個例子極好的展現了如何在具有色調的背景下純色相可以真正的被突出。

我們認為可能是灰色的一些顏色實際上是其他顏色的色調。在本例中，背景實際上是加入了大量灰色的藍色色調。

陰影色調

當在色相中加入黑色使其更暗時就形成了陰影色調。這個詞經常被錯誤的用來描述淺色調或者色調，但實際上陰影色調只應用於加入了黑色，從而使色相更深的情況。

在設計中，較深的色調通常被用於替代黑色，並可以用作非彩色。綜合應用陰影色調和淺色調是避免外觀看起來過於陰暗和厚重最好的方法。

示例

喬納森·穆爾的網站在背景上應用了不同陰影色調的紫色，而在其他部分使用了一些淺色調。

只要保持其間有足夠的對比度，不同陰影色調的協同使用效果也非常好。

有效結合陰影色調和淺色調，亮點在於頁頭的設計上這種方法的應用。

另一個具有陰影色調和少量淺色調梯度紋理的背景設計。

陰影色調和紋理的結合使用為這個網站增加了趣味性。

淺色調

當白色加入某色相使之變亮就形成了淺色調。非常亮的淺色調也稱作柔和粉色，但對於任何加入白色的純色相來說都是淺色調。

淺色調通常應用於創建女性化的或較亮的設計當中。柔和的淺色調特別用於讓設計更具女性化的特點。這種方法在復古的設計中效果很好，在針對嬰幼兒家長的網站上也非常受歡迎。

示例

卡歐·卡多佐的網站在背景和其他元素當中應用了不同的淺綠色調。

費爾南多·斯朗斯的網站應用了淺藍色色調看起來柔和而精緻。

淺藍色調在天空和自然的圖樣中非常流行。

淺色調在基於水彩的設計中也非常流行。

為體現複雜變化梯度而組合的淺色調。

結論

儘管你無需記住所有這些技術術語，但應該對實際的概念比較熟悉，尤其要掌握這個系列的第3部分（創建屬於你自己的配色方案）。 為此，這裡有一個喚醒記憶的備忘單：

* 色調即顏色（藍，綠，紅等）。

* 色度是顏色的純度（高色度未添加黑色、白色或灰色）。

* 飽和度指顏色的強弱（高飽和度越高就越強）。

* 明度值的是顏色的深淺（淺的顏色具有高明度）。

* 色調通過在一個顏色中加入灰色來創建，使之比原先更暗淡。

* 陰影色調通過在一個顏色中加入黑色來創建，使之比原先顏色更深。

* 淺色調通過在一個顏色中加入白色來創建，使之比原先的顏色更淺。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！