網頁設計配色 色彩的調和

2021-06-20 15:18:46 字數 2606 閱讀 1347

網頁頁面中總是由具有某種內在聯絡的各種色彩,組成乙個完整統一的整體,形成畫面色彩總的趨向,稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍,是影響配色視覺效果的決定因素。

兩種或兩種以上的色彩合理搭配,產生統一諧調的效果,稱為色彩調和。色彩調和是求得視覺統一,達到人們心理平衡的重要手段。

調和就是統一,下面介紹的四種方法能夠達到調和頁面色彩的目的。

■ 同種色的調和

相同色相、不同明度和純度的色彩調和。使之產生秩序的漸進,在明度、純度的變化上,彌補同種色相的單調感。

→ 同種色的調和網頁例圖:http://www. solar1.org 

同種色的調和分析:

同種色給人的感覺是相當協調的。它們通常在同乙個色相裡,通過明度的黑白灰或者純度的不同來稍微加以區別的,產生了及其微妙的韻律美。為了不至於讓整個頁面呈現過於單調平淡,有些頁面則是加入極其小的其他顏色做點綴。該頁面使用了同種色的黃色系,淡黃、檸檬黃、中黃、通過明度、純度的微妙變化產生緩和的節奏美感。

結論

同種色被稱為最穩妥的色彩搭配方法。

■ 類似色的調和

在色環中,色相越靠近越調和。主要靠類似色之間的共同色來產生作用。

→ 類似色的調和網頁例圖:http://www. solar1.org 

類似色的調和分析:

類似色相較於同類色色彩之間的可搭配度要大些,顏色豐富、富於變化。

以上頁面主要取的是色環中的黃色、綠色、藍色通過明度、純度、面積上的不同實現變化和統一的。雖然主色調的公尺黃色在頁面中使用面積最大,但是我們看到由於它的明度非常高,飽和度就降低了,因此在頁面中處在不明顯的角色。而綠色的純度最高,且使用面積次之,頁面顯示較顯眼,因此用於次級導航位置上。整個頁面主次的視覺引導分明。

結論

不是每種主色調都是極其顯眼的位置,通常多扮演著用於突出主體的輔助性配角。而重要角色往往在頁面中用的份量極少,卻又起到突出主體的作用。

■ 對比色的調和

調和方法有:

基本上可以說是黃色和紫色的對比色做頁面的主要色調。黃色紫色組合在網頁中使用率較低,原因是這組顏色適用範圍相對其他兩組對比色要小很多,配色難度也較兩組大。

這裡黃色加入了紅色呈中黃色,紫色加入了紅色,偏玫瑰色,所以這組顏色不是嚴格意義上的對比色,也因此使這組顏色看起來協調、舒服。這個頁面都調低了亮度使整體降低了純度,緩和視覺刺激。白色是這組對比色裡加入的協調色。

結論:

從上面的分析我們可以知道,通過上面的這些色值調配--當需要使用這組對比色配色時候該如何達到協調的目的。

不是對比色為主色調的頁面就一定會有不舒服的感覺的,主要可以通過調低亮度、降低飽和度、加入少許白色來調和。 

■ 漸變色的調和

漸變色實際是一種調和方法的運用。是顏色按層次逐漸變化的現象。色彩漸變就像兩種顏色間的混色,可以有規律地在多種顏色中進行。暗色和亮色之間的漸變會產生遠近感和三維的視覺效果。

→ 漸變色的調和網頁例圖:http:// www.macromedia.com 

漸變色的調和分析:

該頁面背景使用了漸變的效果,增加了視覺空間感。在導航欄、廣告區域、產品技術的大標題塊,都使用了漸變的技術手法來表達,產生三維的視覺效果,統一了整個頁面的設計語言,也是區別於其他**頁面的個性體現,達到讓人印象深刻的目的。

結論:

漸變色能夠柔和視覺,增強空間感,體現節奏和韻律美感,統一整個頁面的目的。

除了統一當然也可以起到變化頁面視覺形式的作用。該設計語言可做需要的時候適當的使用。 

本部分小結:

本節主要對色彩的對比與調和做了例項分析。例如當頁面平淡單調,需要用對比手法做些變化來豐富頁面的色彩設計;當頁面變化過多,顯得刺眼、凌亂,可以通過以上介紹的調和方法進行調整,使得頁面看起來更統一協調。

● 主要是通過面積大小、冷暖對比來表達體現頁面的主次關係、中心思想。

● 顏色平淡可加入適當類似色對比色來使頁面產生變化。顏色凌亂可以適當加入同類色或者類似色、白色、黑色、灰色做到統一調配的目的。

● 對比色的搭配並不是就是說是絕對值的紅或者綠,藍或橙、黃或紫。對比色的第一視覺傾向越明顯配色難度就越大,也就是說越難調和;反之,傾向越不明顯的對比色越容易調和。請參照剛才對比色調和頁面分析例子方法。

● 不是一種色彩面積用得越多或者越少、純度、明度越高就是能突出主體的主角色,主要是根據色彩相互之間的搭配關係來體現的。

● 乙個頁面中單純絕對的使用某種顏色或是使用絕對非常多種顏色搭配,容易產生個性效果,那叫玩色彩了,限於色彩運用得非常熟練的朋友,但不推薦初學者使用。

網頁設計配色應用 色彩的調和

為了使網頁的整體畫面呈現穩定協調的感覺,以便充分的把握其規律來更好的分析學習,我們前面介紹了色調的視覺角色主次位置的幾個概念,也介紹了色彩的對比。今天我們介紹色彩的調和。兩種或兩種以上的色彩合理搭配,產生統一諧調的效果,稱為色彩調和。色彩調和是求得視覺統一,達到人們心理平衡的重要手段。調和就是統一,...

網頁設計配色

網頁設計配色基礎 rgb與hsb 在實用美術中,常有 遠看色彩近看花,先看顏色後看花,七分顏色三分花 的說法。這也就說明,在任何設計中,色彩對視覺的刺激起到第一資訊傳達的作用。因此,對色彩的基礎知識的良好掌控,在網頁設計中才能做到游刃有餘。為了使下面的網頁配色分析更易於理解,我們先來了解色彩的rgb...

網頁設計配色精彩十例

顏色的使用在網頁製作中起著非常關鍵的作用,有很多 以其成功的色彩搭配令人過目不忘。但是對於剛開始學習製作網頁的人來說,往往不容易駕馭好網頁的顏色搭配。除了學習各種色彩理論和方法之外,筆者認為多學習一些著名 的用色方法,對於我們製作美麗的網頁可以起到事半功倍的作用。所以,筆者總結了一些著名 的顏色搭配...