常用配色基本概念及精彩相關實例剖析
色環色環是色彩按紅、黃、綠、藍、紅依次過度漸變呈現出來的不同顏色，就可以得到一個色彩環。色環通常包括12種不同的顏色。
三原色 原色：也叫"三原色"。即紅、黃、藍三種基本顏色。自然界中的色彩種類繁多，變化豐富，但這三種顏色卻是最基本的原色，原色是其他顏色調配不出來的。除白色外，把三原色相互混合，可以調和出其他種顏色。根據三原色的特性做出相應的色彩搭配，有最迅速最有力最強烈的傳達視覺信息效果。→ 黃色網頁例圖：http://www.uni-leipzig.de/studienart/i_flash.htm
黃色分析：選取了主色調黃色為示例。我們看到RGB數值中RG呈現最高值255時，HSB數值中的SB也呈現最高值100%，頁面呈現最高純度亮度——純黃色。因此黃色在三原色中也是亮度最高的顏色。結論：HSB中SB呈現的數值越高，飽和度明度越高，頁面色彩強烈艷麗，由於黃色是亮度最高的顏色這一特性，也給人視覺產生強烈刺激的狀態，對視覺刺激是迅速的、警戒、醒目的效果，但不易於長時間觀看。→ 紅色網頁例圖：http://www.doritos.com
紅色分析：我們看到RGB中R的數值是227，混合了G30、B40，因此紅色的純度輕微降低，顏色稍偏深紅。HSB數值中S顯示的飽和度為87%，B為89%，因此顏色還是較為飽和明亮。結論：主色R227數值較高的時候，由於混合了G30、B40少許顏色，飽和度明度稍微降低，視覺刺激減弱，紅色特性顯得較沉穩。但由於紅色是最溫暖最有視覺衝擊力的顏色特性，該網頁整體看來仍然厚重而熱烈的表達了主題。→ 藍色網頁例圖：http://www.voxhon.com
藍色分析：RGB數值中B藍色的數值是131與 R2、G83相混合，藍色的純度降低。結合HSB中數值H色相目前顯示的是203°，而三原色的純藍為240°來看，藍色的色相偏離較大，加上B為51%的明度，顏色偏暗，因此視覺衝擊力較弱。頁面沉穩、凝重。結論：當藍色色相偏離於三原色的純藍時，視覺衝擊力削弱。頁面呈沉穩、平靜的感受。藍色在三原色里是視覺傳遞速度最慢的顏色特性，適合用於表達成熟、穩重、安靜的網頁設計主題。藍色在網頁設計里也是使用得較頻繁的顏色。
間色 間色：又叫"二次色"。它是由三原色調配出來的顏色，是由2種原色調配出來的。紅與黃調配出橙色；黃與藍調配出綠色；紅與藍調配出紫色，橙、綠、紫三種顏色又叫"三間色"。在調配時，由於原色在份量多少上有所不同，所以能產生豐富的間色變化。→ 間色網頁例圖：http://cidadefm.clix.pt
間色分析：上網頁例圖4種間色搭配一起非常明快、鮮亮。從RGB數值顯示上看，綠色含量較高達到208，混合了R189的黃色光，因此顏色偏黃綠色，由於添加了B18，飽和度相對降低。玫瑰色中R的含量最高，與B109混合為主要組成色，添加了少量的G27黃，純度偏高。橙色中R的含量很高為255，混合了G145黃為主要組成色，添加了第三色B34，飽和度稍降低。紫色是由藍色和紅色調配而成，B為170，R為148，混色份量相當也就成為了組合紫色這一間色的主要成份，但是由於添加了G87，也是4組顏色中的間色混合第三色數值最高的，HSB中S數值相對其他三色，降低很多，因此顏色相對於其它3種較沉穩，緩和。以上4組顏色RGB數值的共同點是以兩色混合為主，都是三位數值，另外一色份量較少，為兩為數值，因此飽和度較高，色相傾向明顯。HSB數值的共同點是，除了紫色，其他三色的S飽和度相當，屬較高數值，因此視覺刺激也強。結論：間色是由三原色中的兩原色調配而成的，因此在視覺刺激的強度相對三原色來說緩和不少。屬於較易搭配之色。間色儘管是二次色，但仍有很強的視覺衝擊力，容易帶來輕鬆、明快、愉悅的氣氛。
複色 複色：也叫"複合色"。複色是由原色與間色相調或由間色與間色相調而成的"三次色"，複色是的純度最低，含灰色成份。複色包括了除原色和間色以外的所有顏色。→ 複色網頁例圖：http://www.benharper.net
複色分析：以上4種顏色中深綠色和赭石色為複色，之所以還選擇其它2顏色，為的是更好的配合說明複色的特性，如果沒有另外兩種非複色搭配，頁面配色就可能出現骯等不舒服的感覺。我們看到深綠及赭石這兩種複色的數值都以一個份量最多的三位數，另外兩者成份相當，都為兩位數組合而得。RGB之間的數值差距較接近、不明顯，色階較趨於直線平穩，呈灰階。HSB中SB顯示的數值也非常接近，成為符合複色特性的必須條件。結論：複色是由兩種間色或原色與間色混合而成，因此色相傾向較微妙、不明顯，視覺刺激度緩和，如果搭配不當，頁面便呈現易臟或易灰朦朦的效果，沉悶、壓抑之感，屬於不好搭配之色。但有時複色加深色搭配能很好的表達神秘感、縱深感空間感；明度高的多複色（參看明度的網頁例圖）多用來表示寧靜柔和、細膩的情感，易於長時間的瀏覽。
補色 補色：是廣義上的對比色。在色環上劃直徑，正好相對（即距離最遠）的兩種色彩互為補色。如：紅色是綠色的補色；橙色是藍色的補色；黃色是紫色的補色。補色的運用可以造成最強烈的對比。→ 補色網頁例圖：http://www.upsod.org
補色分析：選用了一組紅綠對比色，極賦視覺衝擊力、所表現出的性格異常鮮明。我們看到RGB中綠色的數值顯示情況符合複色的條件，因此註定了該顏色明度稍暗、純度較低的特性，而紅色R數值118構成了該色的主要成份，其他G72，B61數值接近，純度和亮度相對綠色較高，因此2色在構成色彩空間差距上拉大。HSB中2色的S數值也顯示出，它們的飽和度相差較大。結論：補色最能傳達強烈、個性的情感。純度稍低的綠色為背景的大面積使用，對比並突出了前景純度明度較高的面積較小紅色的圖形，形成了視覺中心重點突出，達到主次分明的主題效果。紅綠、橙藍、黃紫這三組補色中，前兩種使用得最頻繁。這三組補色搭配出的最終效果和目的，可以用兩個字來概括——強烈！
鄰近色 鄰近色：是在色環上任一顏色同其毗鄰之色。鄰近色也是類似色關係，只是範圍縮小了一點。例如紅色和黃色，綠色和藍色，互為鄰近色。→ 鄰近色網頁例圖：http://www.artoyz.com
鄰近色分析：上圖選用了紅色、黃色為鄰近色示例，主要在色相上做區別豐富了頁面色彩上的變化。RGB數值上看，以上5色R的數值都很高，僅是微妙的不同。其中淺黃色的B為138，因此在HSB數值中純度S顯示最低，為46%；5色RGB中G的數值都不同，色相、明度也產生相應的不同。從數值上分析整體看來，5色都有在同一頻率的變化。結論：由於是相鄰色系，視覺反差不大，統一、調和，形成協調的視覺韻律美，相較顯得安定、穩重的同時不失活力，是一種恰到好處的配色類型。
同類色 同類色：比鄰近色更加接近的顏色，它主要指在同一色相中不同的顏色變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、土黃、中黃、桔黃、淡黃、檸檬黃等等區別。它起到色彩調和統一，又有微妙變化的作用。→ 同類色網頁例圖：http://www.misspato.com
同類色分析：選用紅色系4種同類色示例，主要在明度上做區別變化。由於是紅色系，4色RGB數值中的R，數值都很高，且相當。從HSB數值看出，明度越高的顏色飽和度越低。這4種同類色相來看，明度在強中弱的節奏中的緩和的進行變化。結論：第一眼看上去給人溫柔、雅緻、安寧的心理感受，便可知該組同類色系非常調和統一。只運用同類色系配色，是十分謹慎穩妥的做法，但是有時會有單調感。添加少許相鄰或對比色系，可以體現出頁面的活躍感和強度。
暖色 暖色：指的是紅、橙、黃、這類顏色。暖色系的飽和度越高，其溫暖特性越明顯。可以刺激人的興奮性，使體溫有所升高。→ 暖色網頁例圖：http://www.mrwong.de
暖色分析：由於是暖色系，以上3種顏色RGB數值中R的含量為主導，B都為0，暖度強度傾向在G的添加黃色成份變化中可以看到，較規律的數值變化、較有視覺節奏感。HSB中純度S和明度B都達到最高值，是鮮艷奪目的搭配色組合。結論：高明度高純度的色彩搭配，把頁面表達得鮮艷炫目，有非常強烈刺激的視覺表現力。充分體現了暖色系的飽和度越高，其溫暖特性越明顯的性格。
冷色 冷色：指的是綠、青、藍、紫等顏色，冷色系亮度越高，其特性越明顯。能夠使人的心情平靜，清爽，恬雅。→ 冷色網頁例圖：http://www.portaldemoda.pt
冷色分析：該網頁示例主要選用了鄰近色系藍色綠色和同類色的明度變化。其中3種藍色系的RGB數值從二位數到三位數，隨著明度的遞增的同時，由低到高在有規律有節奏的變化。HSB的數值SB也相對隨著同比變化，純度S的含量都不大，因此這幾組色彩相對含蓄柔和。綠色系RGB數值G的色相明顯，相應添加了高亮度的黃色R，使色彩較鮮艷明快。HSB數值SB也顯示出其高純度高亮度的特性。結論：冷色系的亮度越高，其特性越明顯。單純冷色系搭配視覺感比暖色系舒適，不易造成視覺疲勞。藍色、綠色是冷色系的主要系，是設計中較常用的顏色，也是大自然之色，帶來一股清新、祥和安寧的空氣。本部分小結：● 從以上例子可看出三原色視覺衝擊力最強，也最是刺目的，容易製造衝突、煩燥、不舒適的心情，所以是較難掌握的配色，大面積大範圍使用要慎重。間色是由三原色中的兩色調配二次，間於原色和複色之間，屬於中性色，視覺衝擊力次之，顏色的刺激緩和不少，給人舒適、愉悅的心情，是較容易掌握的配色，也是在設計中使用得比較多的顏色。複色是由兩種間色或原色與間色相混合而產生的顏色，呈灰色階，視覺衝擊力更弱，柔和但是使人沉悶壓抑。複色調配好了，能體現出高層次高素養的成熟特性魅力，也稱為高級灰，是很經看的顏色。由上可知，顏色相互混合的越多，飽和度越低，視覺衝擊力越弱。● 色彩運用到一定程度後，應該逐漸認識到在一個環境、區域範圍里，色彩的屬性、性能特性是相對的。例如黃色在藍色、綠色這兩個區域環境下，黃色可以說這個時候是呈暖色，而出現在桔紅、朱紅、深紅這幾個區域環境下，黃色可以說在這個時候是呈冷色。同樣的，藍色相對綠色是冷色，紫色相對藍色是暖色等等。可根據網頁設計主題的目的要求，環境協調度的需要等等做相應的搭配調整。● RGB三者的數值越接近，色階較趨於直線平穩，呈灰階，網頁對視覺的刺激性越緩慢、柔和；RGB三者的數值相互間差距越大，色階曲線波動就大，網頁對視覺的刺激性越迅速、強烈。HSB數值中SB相應數值越高，視覺刺激度越強烈。抓住以上這些規律及色彩特性，在以後的網頁設計配色中，根據不同的需要配置不同的顏色，來達到某些不同的目的和效果。通過RGB數值和HSB數值的計算，能幫助更科學理性的分析判斷，為的是更準確的研究分析網頁設計配色的協調性、合理性、掌握其規律性。有經驗的設計師通常僅僅憑目測、直覺，就能隨心所欲的掌控色彩的配置了。但如遇到困惑，不防也使用一下模式計演算法(作者：黎芳)
推薦閱讀：
※建設工程中保修期和缺陷責任期有什麼區別？
※產品數據分析基本概念整理 | 產品壹佰
※我們常常講概念，那麼概念這個詞具體指的什麼？
※新概念英語第二冊（第8課）