淺析網站設計中的色彩搭配

摘 要介紹網站色彩的理論知識，著重論述網站設計中色彩搭配應該注意的幾個問題。

關鍵詞 網站設計；色彩；色彩搭配

中圖分類號：TP393 文獻標識碼：A 文章編號：1671-489X（2008）06－0077-02

Color Collocation in Website Design//Wang Wei

Abstract As the most important factor in website design，color has its permanent artist fascination，to which artists always pay much attention. It stated basic theoretical knowledge of web color design，mostly about some points on color assortment for website design.

Key words website design；color；color collocation

Author's address The Arts Department of the Jining College，Qufu， Shandong273155

對于網站來說，頁面中刺激記憶最初、最持久的元素就是色彩搭配。事實上運用色彩、進行色彩搭配幾乎是大部分設計師感到最棘手的問題。筆者根據多年來的平面設計和網站設計經驗，闡述色彩及搭配中的相關問題。

1 有關網站色彩的理論知識

1.1 基于web網頁安全色的應用Web網頁安全色是指在不同硬件環境、不同操作系統、不同瀏覽器中都能夠正常顯示的顏色集合，使用216網頁安全色進行網頁配色可以避免原有的顏色失真問題[1]。這對于一個網頁設計師來說是必備的常識，利用它可以擬定出更安全、更出色的網頁配色方案。基于Web應用的顏色可以用16進制的數值進行描述，例如標準的紅色可以描述為#FF0000。

1.2 色彩的三原色電腦屏幕的三原色是紅(red)，綠(green)，藍(blue)。網頁設計中的所有顏色均可用紅綠藍3種顏色調和而成，因此計算機就用RGB 3個數值的大小來標示顏色。例如標準的紅色可以用R:255、G:0、B:0 表示。

1.3 色彩的三要素自然界中的顏色可以分為非彩色和彩色2大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。任何一種彩色都具有明度、色相和彩度3大屬性。

色相，指色彩的基本相貌，它是顏色彼此區別的最主要、最基本的特征。色相體現著色彩外向的性格，是色彩的靈魂。同類顏色色系中，也可以分為幾種色相，其中的紅色可以分為橘紅、大紅、土紅等。

明度，是指色彩的明暗程度，也可稱色彩的亮度、深淺度。明度層次一般分為：低明度色、中明度色、高明度色，明度關系可以說是色彩搭配的基礎。

彩度是指色彩的鮮艷程度，即飽和度。彩度越高，色相感越強。任何一個色彩加白、加黑、加灰都會降低它的彩度。

2 網站色彩的情感象征

色彩具有不同的情感特征（表1），色彩運用最終的目的是表達和傳遞感情。設計網站色彩，除注意色彩的科學性之外，應充分認識色彩的感情作用，即對色彩的反映。

此外也和人的年齡、性格、素養、民族、習慣分不開。人們對色彩的這種由經驗感覺到主觀聯想，再上升到理智的判斷，既有普遍性，也有特殊性；既有共性，也有個性。因此，我們在進行選擇色彩作為某種象征和

含義時，應該根據具體情況具體分析，需要反復推敲，才能配出好的色彩關系。

3 網站色彩的搭配

3.1無彩色和彩色搭配無彩色與彩色進行搭配是常用的配色形式。網站采用多種不同色相時，或畫面中含有過于強烈的對比色彩時，都可以加入黑色進行調和。黑色可以穩住跳躍的色彩，使畫面和諧，利于達到統一的視覺效果，同時黑色給人以穩重的心理感覺，常與其他的色彩搭配。在網頁上，白色和灰色常用來做背景色，它們明視度低，對視覺沒有刺激，適合閱讀。白與灰可以協調各種色彩關系，分割色彩，使對比弱化，使網站整體色彩在視覺上達到統一。

3.2 特色鮮明網站設計的色彩運用，必須要有自身獨特的風格，使網站個性鮮明，才能給用戶留下深刻的印象，在眾多的網站中脫穎而出[2]。例如，在Microsoft.com頁面中，只采用了一種色相——藍色。在色彩表現上采取了多種漸變手法，鋪墊到信息格局的背景里，在頁面頂部增加層次感。對于Microsoft.com這樣的想要表達出“一種聲音”的網站來說，單一色相可以給人一種清晰悅目的感覺，整潔、統一反而會加深印象，給人留下深刻的感受。

3.3 確立網站的主色、輔助色、背景色主色是整個畫面的重心點，直接影響到整體視覺效果。主色一經確定，要保持一定的穩定性，用這種色彩來幫助受眾對網站的識別。比如說可口可樂公司網站主色采用紅色調，配以灰色來襯托，取得了很好的視覺效果。不但感覺和諧，而且非常時尚，傳遞著熱烈、激動、健康時尚的信息。

輔助色起到一定量的視覺分散效果。在小范圍內使用能起到突出主題，融合主色效果的輔助作用，使頁面更加鮮明生動。通常應用于圖標、文字、表格、線條、輸入框及超鏈接等。索尼公司的網站主色采用深灰色，輔助色采用黑色、藍色、銀灰色，具有很強的科技感和現代感；局部少量純色的運用，為網站增添了時尚感。

背景色是頁面的底色， 有時和主色是同一色彩，環抱整體色調，起到協調、支配整體的作用。設計背景色時，要考慮頁面底色的深、淺。我們常常遇到的問題其實主要是背景顏色和字體顏色的搭配問題：做到既不顯得呆板，又不至于過于亮麗而造成過強刺激的視覺效果。

3.4 要針對不同的主題來布置色彩網站色彩的運用還要根據主題和內容來定。確定主題之后，要選擇一種適合主題內容的色調作為主色，來表現網站的內容。舉例來說，一個有關于環保的網站，若用大紅色作為網頁底色，不會有人聯想到網頁的內容是與環保有關。而快餐店采用大紅色就比較適合現代的生活節奏，用色彩來吸引顧客，攬招顧客的回頭率，這是設計師用色彩與受眾進行心理溝通的方式。同樣的道理，做新聞類的網站就要考慮到受眾瀏覽網站的目的是攝入大量的信息，所以可用較為強烈的色彩組合，這樣就能使讀者快速地攝入信息，感受到信息的高速傳遞。把握好用色的技巧，是網頁設計成功的一個方面。

當然，每個人的審美觀不同，可能也會對顏色的代表性看法不同，但既然網站不只是寫給某個人看的，就應該要顧及大多數人的審美取向和審美情趣，從大多數人的欣賞眼光出發來設計網頁。不同內容的網頁在用色時有較大的區別，作為網頁設計師，做到有針對性的用色是相當重要的，合理地使用色彩，把握色彩的情感象征以體現網站的主題及特色。

3.5 注重網站色彩的平衡與整體規劃色彩的平衡主要表現在色彩的面積、色彩的位置、文字信息的排版和頁面的其他元素的協調。網站所有頁面的風格，色彩調子和色彩搭配都要保持一致。網站整體的色彩設計要有計劃性，是設計師先理智后感性的思維過程。

4 結束語

互聯網已成為人們生活中不可缺少的工具，頁面設計日益被人們重視，在如此復雜的色彩環境中，我們對色彩要予以更多的關注，培育出豐富的、有規律的色彩文化。設計師不僅要具備網站制作的技術，還要具有很好的信息結構，對色彩的駕馭能力，這需要不斷地思考、感受和實踐。

參考文獻：

[1]梁景紅.網站設計與網頁配色實例精講[M].北京:人民郵電出版社，2004:50

[2]郭永燦，孟凡奇，王軍.網頁美工設計[M].上海:上海交通大學出版社，2005:37