網頁設計中的色彩應用

來源:互聯網
上載者:User
設計|網頁|網頁設計 色彩的運用在網頁中的作用真是太重要了,有些網頁看上去十分典雅、有品位,令人賞心悅目,但是頁面結構卻很簡單、圖象也不複雜,這主要是色彩運用得當,色彩的魅力讓人難以抵擋,你是否明白看似簡單的顏色運用中的原理以及奧秘呢?這就涉及到很多色彩原理的知識,因此我特地將本來屬於圖象製作內的色彩作為一個獨立攔目來介紹。

  1、色彩基本概念
  自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色,而其他所有顏色均屬於彩色。任何一種彩色具有三個屬性:
  (1)色相(Hue):   也叫色澤,是顏色的基本特徵,反映顏色的基本面貌。
  (2)飽和度(Saturation):   也叫純度,指顏色的純潔程度。
  (3)明度(Brightness或Lightness或Luminousity):   也叫亮度,體現顏色的深淺。
  非彩色只有明度特徵,沒有色相和飽和度的區別。

  2、色彩的三原色
  電腦螢幕的色彩是由RGB(紅、綠、藍)三種色光所合成的,而我們可通過調整這三個基色就可以調校出其它的顏色,在許多影像處理軟體裡,都有提供色彩調配功能,你可輸入三基色的數值來調配顏色,也可直接根據軟體提供的調色盤來選擇顏色。

   3、電腦影像的色彩
  電腦影像的色彩是經由位元(BIT)的計算和組合而來,單純的黑白映像是最簡單的色彩結構,在電腦上用到1位元的資料,雖說只有黑色和白色,但仍能透過疏密的矩陣排列,將黑與白組合成近似視覺上的灰色調階。
  灰階(Grayscale)的影像共有256個階調,看起來類似傳統的黑白照片;除黑、白二色之外,尚有254種深淺的灰色,電腦必須以8位元的資料,顯示這256種階調。
    全彩(Fullcolor)是指RGB三色光所能顯示的所有顏色,每一色光以8位元表示,各有256種階調,三色光互動增減,就能顯示24BIT的1677萬色(256*256*256=16,777,216),這個數值就是電腦所能表示的最高色彩,也就是通稱的RGBTureColor。
  8位元色是指具有256種階調,或256種色彩的影像,而我們在常常見到GIF格式的圖象檔案就是帶有256種色彩的圖象檔案。若要把24位元的全彩圖片轉成256色的8位元,通常必須經過索引的步驟(Indexed),也就是在原本24位元的1677萬色中,先建立顏色分布表(histogram),然後再找出最常用的256種顏色,定義出新的調色盤,最後再以新色盤的256色取代原圖。

  讓我們看看每一位元色包含多少種顏色:
1位 2種顏色
2位 4種顏色
4位 16種顏色
8位 256種顏色
16位 65536種顏色
24位 1677萬種顏色
32位 1677萬種顏色和256級灰階值
36位 687億種顏色和4096級灰階值

 通常所稱的標準VGA顯示模式是8位顯示模式,即在該模式下能顯示256種顏色;而高彩色(Hi Color)顯示是16位顯示模式,能顯示65536種顏色,也稱64K色;還有一種真彩色(True Color)顯示模式是24位顯示模式,能顯示1677萬種顏色,也稱16M色,這是現在一般PC機所能達到的最高顏色顯示模式,在該模式下看到的真彩色圖象的色彩已和高清晰度照片沒什麼差別了。
  在圖形製作片中我們已提到過色彩在頁面中的重要性,在頁面中盡量使用看上去比較淡雅、簡潔的色彩;比如背景盡量少用灰暗、深沉的色彩(除非特殊需要),並且根頁面的主題來選擇主色調,可能有一些不搞美術的朋友不知道色彩代表的含義,請參閱下表:
紅色:代表熱情、奔放、喜悅、慶典
黑色:代表嚴肅、夜晚、沉著;
黃色:代表高貴、富有 白色:代表純潔、簡單
藍色:代表天空、清爽
綠色:代表植物、生命、生機 灰色:代表陰暗、消極 紫
色:代表浪漫、愛情
棕色:代表土地

上面舉出的是幾種主要色彩的含義,希望對你有所協助。

  現在我們對色彩有了基本的瞭解,那麼我們如何在一個網頁中合理搭配色彩呢?如果你對美術比較瞭解,那就好辦了。反之你可能要耗費較大的工夫在上面。
  首先在確定首頁的題材後,要瞭解哪些顏色適合哪些網站。比如一個影視的網站,基本上適用任何色彩,但小B認為用黑色或其他教深的色彩為主比較好,因為人們看電視、電影一般在黑暗的環境下觀看的,網頁上使用深色較符合人們的習慣;反之一個介紹醫院、醫學的網站就要使用淺色為主色,忖托其醫學網站的氛圍。
  記住白色的頁面是萬能的風格
  這裡特別要注重的一點:頁面文字的顏色切記與連結的顏色區分開來。
  在設計時,如果你有多餘的時間,可以多換幾種顏色試試。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。