本節書摘來自異步社區《超越平凡的平面設計: 版式設計原理與應用》一書中的色輪，作者【美】John McWade,更多章節內容可以訪問云棲社區“異步社區”公眾號查看。

色輪
超越平凡的平面設計: 版式設計原理與應用
理解色彩搭配的必備工具
有光就有色。我們以為各個色彩是相互獨立的，比如藍色是藍色，而紅色是紅色。但其實一種色彩總是存在于包含其余色彩的環境里，并不會單獨出現。顏色并沒有好壞之分，就像是組成樂譜的音符，每種顏色都是曲子的一部分，合在一起構成動聽或不動聽的旋律。色輪就是用于理解色彩間的關聯的工具（也叫做色相環）。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506f7e9206881d4a934" >

色輪是由可見光范圍內的色彩組成的圓環

形式簡約，含義無窮

白光里包含所有的可見光。如你所見的彩虹一樣，可見光構成了顏色依次由紫到紅的無限色譜。為將它應用于實際工作，色輪使用12種基本顏色來代表無限色譜，就如同一盒12色蠟筆里的色彩。

色彩的含義
色輪由12種基本顏色組成。首先是紅、黃、藍三原色；三原色兩兩混合得到間色；間色再兩兩混合得到三級色。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506f1f81234593c51b5" >

三原色

色輪的“母色”，它們是唯一不能由其余顏色調成的色彩。三原色圍繞色輪平均分布，兩兩呈120度。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=15069d8700aba82b3367" >

間色

圖像說明文字位于兩原色的中部，并且由與之相鄰的兩個原色平均混合得到。

三級色

圖像說明文字填滿剩下的空格，它們由與之相鄰的原色和間色平均混合得到。

色彩的共性
眾所周知，一種顏色和與之毗鄰的顏色具有共性，而后者又與其相鄰色具有共性，圍繞色輪一周的色彩都是如此。色彩的共性是各種顏色建立關聯的基礎。

共有七種顏色包含藍色

它們從藍色向兩邊呈扇形分布。離藍色越遠，顏色里包含的藍色變得越來越少。綠色和紫色是含有藍色的間色。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506a2ebd0fa71003017" >

共有七種顏色包含黃色

它們從黃色向兩邊呈扇形分布。離黃色越遠，顏色里包含的黃色變得越來越少。綠色和橙色是含有黃色的間色。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506136297c3b8e325a5" >

共有七種顏色包含紅色

它們從紅色向兩邊呈扇形分布。離黃色越遠，顏色里包含的紅色變得越來越少橙色和紫色是含有紅色的間色。

色彩明度
色彩也有明暗，以明度值來衡量。為了展示明度，色輪內外還存在更多的環：外部較大的兩個環由深色組成，內部較小的兩個環由淺色組成。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506fb9a3894b99ff68d" >

色彩關系
下面的示意圖闡述了6種基本的顏色關系。每一種關系都可以衍生出無數的色彩組合。

無論哪種組合，除了純色以外，還可以包含深色和淺色。最后的色彩組合可以全部是深色，也可以全部是淺色，或者任意組合。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=150675e4b48ba6892940" >

運用色彩的數量很重要。色彩數量的多少，關系到色調是冷是暖，是深是淺，是安靜還是喧鬧。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506ce4182cda108408b" >

現在來做一個測試
訓練你的眼力：如下的四張封面，每張都使用了一種基本的顏色關系（單色，近似色，補色，分裂補色，原色或間色），你能分辨出來嗎？提示：看大塊而不是小塊的顏色，忽略黑色和白色。

從左到右依次是：單色，補色，原色，近似色。

怎樣尋找最佳色彩
你所需要的色調就隱藏在圖片里，讓我告訴你如何
尋找

再沒有別的視覺要素能比色彩對讀者造成更多的影響了。色彩引人注目，營造氛圍，傳遞信息。但不同情況下該如何選用色彩呢？關鍵在于，色彩間是互相關聯的。顏色并非存于真空，而總是與其他顏色共同出現。正因如此，你才能根據頁面上任意組成元素的顏色設計出色彩協調的平面作品。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506e1d2091d8626df87" >




現在我們要為某女子大學設計一張學術節目單，并要使用這張表情嚴肅，面部充滿雀斑的女模特的照片。需達到的設計目標是，既要向人傳達出節目的嚴肅和務實之感，又不失其新鮮活力和個性（無建筑物與地面的圖像）。重點體現時尚感會更好，色彩凌駕于各種要素之上。

1　放大照片
每張照片本身就具有色調。我們首先要找到這個色調并對其進行整理。放大照片，你看到的顏色之多將會使你驚訝無比。

以正常的距離（左圖）觀察照片，我們只看到幾種顏色：皮膚的肉色，頭發的紅色，瞳孔和外套的藍色。一旦將其放大，無數的色彩便出現了！第一步，減少色彩的數量使照片便于處理，以16、32、64位為上限在Photoshop里，先復制照片圖層以防丟失，然后選擇濾鏡>像素化>馬賽克
（右圖）將單個的像素變大，則色彩數目就會變少。如果想要增添色彩，則只需縮小像素的尺寸。

2 提取色彩
現在使用吸管工具將色彩提取出來。順序是由大塊色（看到最多的顏色）到小塊色。為形成對比，每塊顏色都要從像素中分別提取出深、中、淺三色。

首先處理大塊的色彩，即隨意一瞥就可看到的顏色：女模特的膚色、發色以及衣服顏色。然后再處理小塊色，如她眼睛、嘴唇、頭發高光以及柔和陰影的顏色。這張照片分為亮部和暗部，雖然不明顯，但請一定注意。取樣顏色時應逐步進行，完成一個部分再到另一部分。整理所得色彩，先依照色相將所有顏色排列好，再按照明度（由淺到深）將單個顏色排列好，去掉近似色。最后得到的規律定會令你驚喜。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506749fc32c157a3d67" >

3　嘗試使用各種顏色
將照片放在每種樣色上對比，結果令人滿意，不是嗎？有趣的是，照這種方法搭配的效果總是不錯，因為選用的這些色彩本就存在于照片中。

暖色

以下四種屬于暖色——粉紅色、淺橙色、深褐色、棕色，均提取自紅發的女模特。暖色背景使人物顯得更柔和甜美，所以這種色系適用于傳遞美容或者表達關愛的信息。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=150674efbd5700317733" >


http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=15063b88c063c86804be" >

冷色

冷色系主要是藍色，更擅長表現一種嚴肅務實的感覺，適用于傳達直截切題的信息。注意，色彩的明度值越低，女模特的臉部顯得越明亮，就好像她穿越頁面，向你飛來。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=15063b55ab8867833ec6" >

4　添加色彩
下一步就是添加更多色彩。選擇提取出的任一顏色，并將其在色輪上定位，因為色輪能展示出各種顏色間的關系。

選擇照片上的任一色彩，比如藍色，然后在色輪上找到與它大致相同的顏色。我們將此顏色稱為基色。大家知道，基色與照片已能相互搭配，現在我們要做的就是尋找其他可與基色協調的色彩。記住，如果還要使用文字或其他圖形（這是很典型的情況），需要同時添加深色和淺色，以便各元素形成對比。

5　創建色調
現在我們根據基色，便可以創建出一個與版面協調的色調范圍。不同明度的色彩可混合搭配，比如，中藍色可與藍綠色及深紫色搭配。

單色調

首先是基色的深、中、淺三色的組合，這被稱為單色調。單色調沒有色相變化，卻提供了深、淺的色彩明度對比，這在優秀平面設計中是很重要的因素。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=15067fa31e4adf63d88b" >

近似色色調

與基色緊緊相鄰的顏色便是其近似色。近似色間具有很強的潛在關聯性，如圖中的藍綠、藍色和藍紫色，營造出一種賞心悅目的協調感。近似色色調類別豐富，運用起來也很簡單。

補色

如圖與基色相對的顏色便稱為基色的補色，即橙色系。補色形成對比，一種顏色與其補色配合可傳達出力量、氣勢和活力。通常，強調色的使用量比其補色少，例如上圖所示，在一片藍色區域中使用一點橙色，橙色就作為強調色。

分裂補色

與基色的補色左右相鄰的顏色稱為基色補色的類似色。這些顏色組合在一起形成分裂補色。近似色間柔和的美加上互補色間強烈的視覺沖擊，使得此種色調獨具感染力。本例中，藍色將最可能被用作強調色。

補色/近似色

這種色調與分裂補色色調原理相同，但卻包含了更多色彩。增加的色彩范圍使暖色之間的過渡更柔和協調，并與冷色形成更鮮明的對比。這是一種緊張而激烈的色調
組合。

近似色/補色

基色與其近似色組合制造的協調感被其補色阻斷。記住，兩對比色若明度相同，則趨于沖突；明度不同，則相輔相成。這就是為什么我們要提取同種顏色的深、中、淺三種色調。

對比色相同明度。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=1506fd69051ead41763b" >

對比色不同明度。

6　編輯與應用
現在開始設計版面了。首先決定使用哪種色調。如何選擇呢？關鍵是看內容。根據設計意圖來權衡各種色調，問問自己，哪種色調最能迎合文章首頁列出的內容呢？

理性

大家都喜歡藍色。有意思的是，照片本身就具有藍色和橙色，形成自然而完美的對比。藍色背景淡化了人物衣服，使女子凝視的目光似乎穿越了頁面。整個版面美觀而有條理。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=15065d3552f9d4780f90" >

莊重

這種色調源于女模特頭發的深紅色，并且為強調紅色而選取了臨近的黃色。而在藍色背景上顯得后退的人物眼睛和外衣在紅色背景上卻因對比而突出。注意，紅色在人物頭發上僅作為高光，當填充了頁面時卻具有了真正的影響力。版面莊重而熱情，引人入勝。

熱情

女模特發上的高光色主持整個頁面，藍色調引起對比，帶來縱深感。版面上一個特別的有趣之處就是黃色的標題，它看著很像照片上被挖空的部分。整版顯得很平面，色彩搭配熱情而迷人（它可能會在設計競賽中獲勝）。不過，唯有前衛的客戶才會選擇它。

休閑

藍綠色，偏綠系，是藍色的近似色，照片中并沒有這個美麗的顏色。它用在版面中顯得很特別，并增添了活力和縱深感，還使信息看起來很休閑。現在比較流行這種平易近人的色調。女模特在藍背景下發藍的眼睛，在此處卻趨向發綠。標題字體的淺橙色與背景形成柔和的對比。

小提示：
明度混搭。可選用任意色彩的深、中、淺色。注意此處便同時使用了藍綠色。

http://write.epubit.com.cn/api/storage/getbykey/screenshow?key=15060a29dcfcee6fd7ae" >

精致

紫色也是藍色的近似色，而藍紫色也是照片中沒有的顏色。藍紫色偏紅，使整個圖像顯得更漂亮，因為現在臉、頭發和背景看起來更相似。通常來講，藍紫色是一種溫柔寧靜，生機勃勃的冷色（具有清新的特性）。

本文僅用于學習和交流目的，不代表異步社區觀點。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接。

總結

以上是生活随笔為你收集整理的《超越平凡的平面设计: 版式设计原理与应用》—色轮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。