常用配色基本概念

2021-04-19 18:07:50 字數 4778 閱讀 8641

在實用美術中,常有"遠看色彩近看花,先看顏色後看花,七分顏色三分花"的說法。

這也就說明,在任何設計中,色彩對視覺的刺激起到第一資訊傳達的作用。因此,對色彩的基礎知識的良好掌控,在網頁設計中才能做到游刃有餘。

前面我們介紹了常用的電腦色彩模式rgb、hsb,以及色彩的三大屬性,今天我們介紹常用配色的基本概念和相關例項剖析。

色環是色彩按紅、黃、綠、藍、紅依次過度漸變呈現出來的不同顏色,就可以得到乙個色彩環。色環通常包括12種不同的顏色。 

■原色:

也叫"三原色"。即紅、黃、藍三種基本顏色。自然界中的色彩種類繁多,變化豐富,但這三種顏色卻是最基本的原色,原色是其他顏色調配不出來的。除白色外,把三原色相互混合,可以調和出其他種顏色。

根據三原色的特性做出相應的色彩搭配,有最迅速最有力最強烈的傳達視覺資訊效果。

黃色分析:

選取了主色調黃色為示例。我們看到rgb數值中rg呈現最高值255時,hsb數值中的sb也呈現最高值100%,頁面呈現最高純度亮度——純黃色。因此黃色在三原色中也是亮度最高的顏色。

結論:hsb中sb呈現的數值越高,飽和度明度越高,頁面色彩強烈艷麗,由於黃色是亮度最高的顏色這一特性,也給人視覺產生強烈刺激的狀態,對視覺刺激是迅速的、警戒、醒目的效果,但不易於長時間**。

紅色分析:

我們看到rgb中r的數值是227,混合了g30、b40,因此紅色的純度輕微降低,顏色稍偏深紅。hsb數值中s顯示的飽和度為87%,b為89%,因此顏色還是較為飽和明亮。

結論:主色r227數值較高的時候,由於混合了g30、b40少許顏色,飽和度明度稍微降低,視覺刺激減弱,紅色特性顯得較沉穩。但由於紅色是最溫暖最有視覺衝擊力的顏色特性,該網頁整體看來仍然厚重而熱烈的表達了主題。

藍色分析:

rgb數值中b藍色的數值是131與 r2、g83相混合,藍色的純度降低。結合hsb中數值h色相目前顯示的是203°,而三原色的純藍為240°來看,藍色的色相偏離較大,加上b為51%的明度,顏色偏暗,因此視覺衝擊力較弱。頁面沉穩、凝重。

結論:當藍色色相偏離於三原色的純藍時,視覺衝擊力削弱。頁面呈沉穩、平靜的感受。藍色在三原色裡是視覺傳遞速度最慢的顏色特性,適合用於表達成熟、穩重、安靜的網頁設計主題。藍色在網頁設計裡也是使用得較頻繁的顏色。

■ 間色:

又叫"二次色"。它是由三原色調配出來的顏色,是由2種原色調配出來的。紅與黃調配出橙色;黃與藍調配出綠色;紅與藍調配出紫色,橙、綠、紫三種顏色又叫"三間色"。在調配時,由於原色在份量多少上有所不同,所以能產生豐富的間色變化。

間色分析:

上網頁例圖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飽和度相當,屬較高數值,因此視覺刺激也強。

結論:間色是由三原色中的兩原色調配而成的,因此在視覺刺激的強度相對三原色來說緩和不少。屬於較易搭配之色。

間色儘管是二次色,但仍有很強的視覺衝擊力,容易帶來輕鬆、明快、愉悅的氣氛。

■ 複色

複色分析:

以上4種顏色中深綠色和赭石色為複色,之所以還選擇其它2顏色,為的是更好的配合說明複色的特性,如果沒有另外兩種非複色搭配,頁面配色就可能出現骯等不舒服的感覺。

我們看到深綠及赭石這兩種複色的數值都以乙個份量最多的三位數,另外兩者成份相當,都為兩位數組合而得。rgb之間的數值差距較接近、不明顯,色階較趨於直線平穩,呈灰階。hsb中sb顯示的數值也非常接近,成為符合複色特性的必須條件。

結論:複色是由兩種間色或原色與間色混合而成,因此色相傾向較微妙、不明顯,視覺刺激度緩和,如果搭配不當,頁面便呈現易髒或易灰朦朦的效果,沉悶、壓抑之感,屬於不好搭配之色。但有時複色加深色搭配能很好的表達神秘感、縱深感空間感;明度高的多複色(參看明度的網頁例圖)多用來表示寧靜柔和、細膩的情感,易於長時間的瀏覽。

■ 補色:

是廣義上的對比色。在色環上劃直徑,正好相對(即距離最遠)的兩種色彩互為補色。如:紅色是綠色的補色;橙色是藍色的補色;黃色是紫色的補色。

補色的運用可以造成最強烈的對比。

補色分析:

選用了一組紅綠對比色,極賦視覺衝擊力、所表現出的性格異常鮮明。

我們看到rgb中綠色的數值顯示情況符合複色的條件,因此注定了該顏色明度稍暗、純度較低的特性,而紅色r數值118構成了該色的主要成份,其他g72,b61數值接近,純度和亮度相對綠色較高,因此2色在構成色彩空間差距上拉大。hsb中2色的s數值也顯示出,它們的飽和度相差較大。

結論:補色最能傳達強烈、個性的情感。純度稍低的綠色為背景的大面積使用,對比並突出了前景純度明度較高的面積較小紅色的圖形,形成了視覺中心重點突出,達到主次分明的主題效果。

紅綠、橙藍、黃紫這三組補色中,前兩種使用得最頻繁。這三組補色搭配出的最終效果和目的,可以用兩個字來概括——強烈!

■ 鄰近色:

是在色環上任一顏色同其毗鄰之色。鄰近色也是類似色關係,只是範圍縮小了一點。例如紅色和黃色,綠色和藍色,互為鄰近色。

鄰近色分析:

上圖選用了紅色、黃色為鄰近色示例,主要在色相上做區別豐富了頁面色彩上的變化。

rgb數值上看,以上5色r的數值都很高,僅是微妙的不同。其中淺黃色的b為138,因此在hsb數值中純度s顯示最低,為46%;5色rgb中g的數值都不同,色相、明度也產生相應的不同。從數值上分析整體看來,5色都有在同一頻率的變化。

結論:由於是相鄰色系,視覺反差不大,統

一、調和,形成協調的視覺韻律美,相較顯得安定、穩重的同時不失活力,是一種恰到好處的配色型別。

■ 同類色:

比鄰近色更加接近的顏色,它主要指在同一色相中不同的顏色變化。例如,紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類,黃顏色中又有深黃、土黃、中黃、桔黃、淡黃、檸檬黃等等區別。它起到色彩調和統一,又有微妙變化的作用。

同類色分析:

選用紅色系4種同類色示例,主要在明度上做區別變化。

由於是紅色系,4色rgb數值中的r,數值都很高,且相當。從hsb數值看出,明度越高的顏色飽和度越低。

這4種同類色相來看,明度在強中弱的節奏中的緩和的進行變化。

結論:第一眼看上去給人溫柔、雅緻、安寧的心理感受,便可知該組同類色系非常調和統一。只運用同類色系配色,是十分謹慎穩妥的做法,但是有時會有單調感。新增少許相鄰或對比色系,可以體現出頁面的活躍感和強度。

■ 暖色:

指的是紅、橙、黃、這類顏色。暖色系的飽和度越高,其溫暖特性越明顯。可以刺激人的興奮性,使體溫有所公升高。

暖色分析:

由於是暖色系,以上3種顏色rgb數值中r的含量為主導,b都為0,暖度強度傾向在g的新增黃色成份變化中可以看到,較規律的數值變化、較有視覺節奏感。hsb中純度s和明度b都達到最高值,是鮮豔奪目的搭配色組合。

結論:高明度高純度的色彩搭配,把頁面表達得鮮豔炫目,有非常強烈刺激的視覺表現力。

充分體現了暖色系的飽和度越高,其溫暖特性越明顯的性格。

■ 冷色:

指的是綠、青、藍、紫等顏色,冷色系亮度越高,其特性越明顯。能夠使人的心情平靜,清爽,恬雅。

冷色分析:

該網頁示例主要選用了鄰近色系藍色綠色和同類色的明度變化。其中3種藍色系的rgb數值從二位數到三位數,隨著明度的遞增的同時,由低到高在有規律有節奏的變化。hsb的數值sb也相對隨著同比變化,純度s的含量都不大,因此這幾組色彩相對含蓄柔和。

綠色系rgb數值g的色相明顯,相應新增了高亮度的黃色r,使色彩較鮮豔明快。hsb數值sb也顯示出其高純度高亮度的特性。

結論:冷色系的亮度越高,其特性越明顯。單純冷色系搭配視覺感比暖色系舒適,不易造成視覺疲勞。藍色、綠色是冷色系的主要系,是設計中較常用的顏色,也是大自然之色,帶來一股清新、祥和安寧的空氣。

本部分小結:

● 從以上例子可看出三原色視覺衝擊力最強,也最是刺目的,容易製造衝突、煩燥、不舒適的心情,所以是較難掌握的配色,大面積大範圍使用要慎重。間色是由三原色中的兩色調配二次,間於原色和複色之間,屬於中性色,視覺衝擊力次之,顏色的刺激緩和不少,給人舒適、愉悅的心情,是較容易掌握的配色,也是在設計中使用得比較多的顏色。複色是由兩種間色或原色與間色相混合而產生的顏色,呈灰色階,視覺衝擊力更弱,柔和但是使人沉悶壓抑。複色調配好了,能體現出高層次高素養的成熟特性魅力,也稱為高階灰,是很經看的顏色。

由上可知,顏色相互混合的越多,飽和度越低,視覺衝擊力越弱。

● 色彩運用到一定程度後,應該逐漸認識到在乙個環境、區域範圍裡,色彩的屬性、效能特性是相對的。例如黃色在藍色、綠色這兩個區域環境下,黃色可以說這個時候是呈暖色,而出現在桔紅、朱紅、深紅這幾個區域環境下,黃色可以說在這個時候是呈冷色。同樣的,藍色相對綠色是冷色,紫色相對藍色是暖色等等。可根據網頁設計主題的目的要求,環境協調度的需要等等做相應的搭配調整。

● rgb三者的數值越接近,色階較趨於直線平穩,呈灰階,網頁對視覺的刺激性越緩慢、柔和;rgb三者的數值相互間差距越大,色階曲線波動就大,網頁對視覺的刺激性越迅速、強烈。hsb數值中sb相應數值越高,視覺刺激度越強烈。抓住以上這些規律及色彩特性,在以後的網頁設計配色中,根據不同的需要配置不同的顏色,來達到某些不同的目的和效果。

通過rgb數值和hsb數值的計算,能幫助更科學理性的分析判斷,為的是更準確的研究分析網頁設計配色的協調性、合理性、掌握其規律性。

有經驗的設計師通常僅僅憑目測、直覺,就能隨心所欲的掌控色彩的配置了。但如遇到困惑,不防也使用一下模式計算法。

基本概念 C 基本概念

由於工作中需要用到c 編寫的一些工具,有時候需要根據需求修改或者定製工具,所以現在不得不學習一下c 的基礎語法,此為筆記,不成章法!機器語言 組合語言 高階語言 面向過程的程式設計方法 物件導向的程式設計方法 泛型程式設計方法 1 演算法設計 2 源程式編輯 3 編譯 4 連線 5 執行除錯 輸入裝...

C 基本概念 常用基本內建型別

c 語言在設計之初,就盡可能在遵循接近硬體的原則,由於硬體本身的複雜性,也導致了c 資料型別的複雜性。複雜性和靈活性往往都是相對的,程式設計師應該盡可能的選用合適的資料型別,來簡化相關操作。下面是計算機資料型別選擇的經驗準則 在實際使用資料型別的過程中,我們不可避免的會遇到不同的資料型別的混合使用。...

基本概念 數控系統基本概念

第一章 基本概念 數控工具機cnc是一種按事先編制好的加工零件程式進行加工的高效 自動化加工裝置。是 computer numerical control machine tools 的簡稱。數控工具機較好地解決了複雜 精密 小批量 多品種的零件加工問題,是一種柔性的 高效能的自動化工具機。西門子系...