色彩網頁設計

1、如何在網頁設計中使用正確的色彩以表達情感

笑天涯說：為什麼Facebook的主題色是藍色的?為什麼淘寶的主題色是橙色的?如何在網頁設計時，正確地使用色彩?欲知個中緣由和方法，且看本文分解! 作者是位顧問，曾幫多家做出適當轉型，讓其營利上升，來看看他有些什麼秘訣。 色彩影響人類心情與思考這件事情是真的，當眼睛看到某種顏色時，會將此訊息傳回大腦的下視丘，經由一系列的神經傳達，甲狀腺分泌賀爾蒙，進而造成情緒、情感或是實際反應。 經由線上 uickSprout 的研究顯示，顏色可以影響 90% 的產品評價;數位行銷專家 Neil Patel 指出，85% 購產品的原因是出自於顏色，而色彩對於網路上各式各樣的設計當然也具有一定影響。 跟相親一樣，第一印象很重要;只要抓住色彩使用的箇中奧妙，就等於抓住讀者的心。 什麼是色彩心理學? 在我們開始談色彩攻略之前，先來談談色彩心理學，字面上來講就是研究色彩如何影響心理的學問，有些人因為還沒有大量文獻研究背書，而對色彩心理學抱持懷疑立場，而我接下來要探討色彩對於人的觀感影響也不是每一項都經由科學證實，但是色彩對於認知行為的影響實在非常巨大，因此仍有探討的必要性存在。 在一篇文獻探討中，Satyendra Singh 認為顧客在 90 秒內就會決定一項產品的觀感，其中色彩就占 62%-90% 的決定性因素，色彩心理學的重要性因此不證自明，產品要成功，選色很重要，領導者、經理人、建築師、主廚、設計師等等都應該正視顏色帶來的影響。 色彩用對地方才能穿透人心 跳到正題，既然顏色這么重要，那要用在哪裡才能真正發揮功效?本文將討論各種網頁上的顏色設計運用，最主要將著重在的主色調上，包含網頁主圖、標題、隔線、背景色、連結紐以及彈出視窗都在討論范圍內。 例如下圖，NinjaJump 在 logo、碼、分類連結、副標題連結、側邊連結都使用綠、黃、紅三色，我們要討論的重點也可以運用到選項欄位、側邊欄位與色彩策略等等。 色彩學真的非常精妙，不僅要用對地方，連天時地利人為因素都要加進去考量，才能展現威力。如果要在網頁上跳跳床，你絕對不會想到要用黑色，看看NinjaJump?。 身為一個跳跳床的，我們可以預期的是明亮有活力的配色，紅色、綠色、再加上一點亮澄澄的黃色對孩童與父母而言都是不錯的選擇。若今天的消費主要客是女性，可能這招就不管用，L&rsuo;Oreal 的就僅使用簡單的黑與白色，加上些許紫色增添層次感。 關於為何 L&rsuo;Oreal 使用黑白兩色是正確的，我留到稍後解釋，首先再一次提醒運用色彩要注意：用對地方、用對時間、針對客、針對目的，我們先來看看以下幾點。 女性不喜歡灰、橘與棕色;她們喜歡藍、紫與綠色。 Patel 利用性別來分類男女對於顏色有何不同的喜好，在一項顏色與性別的研究中，35% 的女性表示她們最喜歡藍色;再來是紫色占 23%、綠色占 14%。33% 的女性表示橘色是她們最不喜歡的顏色，再來是棕色 33% 與灰色 17%。 其他研究也顯示女性較不偏好大地色系，只要看看瞄準女性做為主要客的線上購物就可證實。 化妝品牌 Milani Cosmetics 專供女性場，其首頁上沒有任何一點橘、棕、灰色。 Won&rsuo;s Day 則是把所有女性最愛的顏色 (藍、紫、綠) 都放上網頁設計了。 還是有人以為女生最愛粉紅色，請容我在這先翻個白眼，事實上只有少數女性會將粉紅色選為最喜愛的顏色，雖然粉紅色與女性柔若有相關聯，但使用藍、紫、綠色，反而能夠有效增進女性購物者的造訪率。 男性不喜歡紫、橘、棕色;他們喜歡藍、綠與黑色 如果男性才是的主要針對客，最好別用紫、橘、棕色。藍、綠與黑色在傳統上較常與男性氣息連結在一起，棕色竟然不在此列倒是讓人有點訝異。 藍色可以增進使用者的信任 藍色事實上是最被普遍使用的顏色，而且很多人喜歡，所以藍色是最溫暖的顏色(喂!)。 只要看看有關藍色的文獻探討，就可以發現藍色被認為是信任、和平、秩序、忠誠的象徵;也會讓人有冷靜下來的作用;甚至還可以將藍色直接代表寧靜。 在顏色對於心理影響的調查中，藍色傳達信任感與寧靜的作用是被證實過的，所以看看 Facebook 就知道，將藍色運用在主頁面上用以傳達核心價值：透明與信任。 如果 Facebook 的例子還不夠明顯，我們再來看看 Paypal，作為一個線上支付平台，同樣也選擇藍色增進使用者的信任。如果他們用的是紅色或橘色，大概讓人以為是在跳樓大拍的機率還會高一點。

2、網頁設計中的色彩有何應用原則

看看優秀的網站能夠給我們帶來很多啟示。下面我們就先看看這些主色調的象徵意義和這些色調中做的比較優秀的網站。

灰色：象徵冷靜、中立；（蘋果、維基百科、紐約時報……）

綠色：象徵健康、生命；（BP石油、食品超市whole foods、星巴克……）

藍色：象徵可靠、力量；（戴爾、大眾汽車、IBM……）

紫色：象徵智慧、想像；（雅虎、T-Mobile、科幻主題電視台Syfy……）

紅色：象徵血氣、年輕；（可口可樂、樂高、肯德基……）

橙色：象徵歡樂、信任；（芬達、亞馬遜、火狐……）

黃色：象徵溫暖、透明；（百思買、法拉利、麥當勞……）

網頁設計色彩搭配原則

網頁美工設計中，最常用的幾個顏色為藍色、綠色、橙色，以及暗紅色。

藍為主調。藍色多與白、橙搭配，。白底，藍標題欄，橙色按鈕或ICON做點綴;藍天白雲，沉靜整潔的感覺。

綠為主調。綠色多與白、蘭兩色搭配。白底，綠標題欄，蘭色或橙色按鈕或ICON做點綴，綠白相間，雅緻而有生氣。

橙為主調。橙色多與白、紅搭配。白底，橙標題欄，暗紅或桔紅色按鈕或ICON做點綴，橙色活潑熱情，標準的商業色調，因此多用於商業網站的網頁美工設計。

暗紅為主調。暗紅色顯得寧重、嚴肅、高貴，需要配黑和灰來壓制刺激的紅色。黑或灰底，暗紅標題欄，文字內容背景為淺灰色。

網頁設計師需要注意的幾點

盡管三原色的相互搭配創造出了無數顏色，可不是所有的顏色都適用於網頁設計，不同的顏色在搭配上也有著其中的學問，網頁設計就相當於平面設計，網頁設計師可以將平面設計中的審美觀點套用到這上面來，所以平面設計上的審美的觀點在網頁設計上非常實用。

在網頁設計師中對於色彩的使用特別忌諱臟、純、跳、花、粉這幾種情形。

忌臟是指背景與文字內容對比不強烈，灰暗的背景令人沮喪!

忌純是指艷麗的純色對人的刺激太強烈抗議，缺乏內涵。

忌跳是指再好看的顏色，也不能脫離整體。

忌花是指要有一種主色貫穿其中，主色並不是面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領導者一樣，雖然在人數上居少數，但起決定作用。

忌粉是指顏色淺固然顯的干凈，但如果對比過弱，顯得蒼白無力了，就象病夫一樣無可救葯。

另外，藍色忌純，綠色忌黃，紅色忌艷。

當然，作為網頁設計師，我們最需要時刻提醒自己的是不要為了設計而設計。

一切的設計都要以用戶的需求為導向。一個優秀的網站，會給用戶非常直觀簡介明了的體驗和簡明的導航。

3、網頁設計的色彩如何搭配

並不固定，只是與人的視覺有關。要看你的總的顏色基調，比如冷色基調，就大都以冷色，如要用暖色（多指亮色）就要多加註意，大多會影響視覺，使游覽者眼睛不適。
我認為你的問題不應放在什麼配什麼！而是色彩應用的風格（基調）！就是你的一面必須有一個顏色為主線，後在圍繞這條主線搭配，目的是為從整體視覺優秀，使游覽者感到舒適！
當然，亮色的使用是更吸引人的眼球的，但極難搭配。比如在過節時，各大網站會加強溫馨度，多用紅、黃、橙來渲染。
不知道我的回答你是否滿意？

4、網頁設計需要色彩基礎嗎

網頁設計需要了解電腦操作意外 還需要美術設計方面的了解 其實都是一系列的。。 現在的美術生在抱專業的時候就有設計這一塊的 包括平面設計和服裝等許多的 所以當然需要 不過也不是一定的 大多數人對美的感覺都是差不多的 如果你的美術或這方面的天賦很好 那也差不多了 基本上了解下色彩的搭配就可以了 如果想更深一步美化自己的網頁 當然還是有些色彩的基礎比較好 使用一些互補的顏色會使得畫面等價美觀的（這是我一個一個字打得，希望採納，謝謝）

5、RGB色彩與CMYK色彩區別在哪裡？網頁設計用什麼色彩模式，為什麼？

網頁設計用RGB模式，色彩多。

先來說一下RGB的理論知識：RGB是Photoshop中默認的模式（屏幕顯示一般是RGB），RGB是一種「光」可以反映到人們的眼中，RGB是有紅、黃、藍三種顏色構成。所有繪圖工具和濾鏡都可以使用，通道調板中有3個8位的顏色通道，從而形成24點陣圖像，可以容納1670多萬種顏色。
步驟閱讀
再來說一下CMYK的理論知識：CMYK是一種「油墨「主要用於列印或是印刷色澤連續的圖像，CMYK可以進行四色印刷有4個8位的顏色通道，是32點陣圖像。四種油墨是：（C青色、M洋紅、Y黃色、K黑色）

CRGB和CMYK的區別：RGB模式下處理圖像比較方便，比CMYK文件小得多，可以節省很多空間，但是列印出來的圖像卻會和電腦顯示屏出現的圖像出現較大差異，而CMYK則接近電腦顯示屏中的圖像，因此在實際的廣告印刷中，通常都是用CMYK模式，也就是4色印刷。
文件—新建的參數中就有顏色模式，根據自己的需要選擇建立圖像的模式。

在菜單欄中的圖像—模式可以知道自己的圖像現在是RGB模式。

也可以在自己的標題屬性欄中看到是RGB模式

如果想要列印照片，就必須轉成CMYK模式，這樣的話，圖像列印出來的效果才會和電腦上的圖片出現較小的色，怎麼改呢？點擊菜單欄中的圖像—模式—CMYK顏色
步驟閱讀

檢查一下，是否轉化成功，看標題屬性即可。

6、設計作品的色彩,特別是網頁的色彩應注意什麼?

無論你是個怎樣的死硬派，你不得不承認色彩和生活的親密程度，差不多到了難舍難離的地步。小如每天上班該穿著什麼顏色的衣服，大如設計一國之國旗應用什麼顏色，全反映出色彩在我們的生活中，擔當了個吃重的腳色。事實上，除了黑白影片的人物外，沒有人可以生活在一個無色世界中。色彩令這個世界變得繽紛，它能改變我們的心情，影響我們對某事某物的看法。企業因此願意把花綠綠的鈔票投資在設計代表企業的顏色上，設計師絞盡腦汁去表現每種顏色的特質，為的是他們相信，在你和顏色相遇的一剎那，你可以意會到在那或溫柔，或暴烈的色彩底下，它所傳遞給你的訊息。

色彩運用是門學問，它在設計中占的位置到底有多重要？就這方面我們專誠向設計師蔡啟仁先生請教。蔡啟仁先生表示，一件設計作品，一般包含三個元素：色彩、圖像、文字。這三個元素中，以色彩較為重要。蔡先生解釋，人對色彩是相當敏感，當他們首次接觸一件設計作品，最先攫取其注意力的，就是作品的顏色，其次是圖像，最後才是文字。色彩給其他人的印象特別強烈，所以設計師最容易通過色彩去表達他的設計意念，而身為設計師，就必須懂得和色彩溝通，了解他們。
..........

我們以前做過這個課題的

可以和我們探討###

7、網頁設計基本能用到的顏色都是多少RGB值？求大神幫助

這樣說吧: 先看看8位色深的RGB色值代表.例如白色: R:255 G:255 B:255. 然後用網頁代碼表示為: #ffffff 再如 黑色: R:0 G:0 B:0 網頁代碼表示為: #000000 你在Photoshop的調色板中可以直接找到代表當前顏色的網頁代碼; 其中的奧秘就是其實網頁代碼就是RGB的16進制寫法.表示方式是#RRGGBB. 0的16進製表示為 00, 255的16進制是ff. 結論: 網頁代碼可以表示8位色深的RGB的任意顏色. 可以通過軟體查詢網頁代碼的方式得到.photoshop.Dreamweaver.flash都可以.(當然,如果不嫌棄麻煩,已知RGB色分值,自己換算也能得到相應代碼 (*^__^*) )

8、怎樣學會網頁設計色彩搭配

去看看相關色彩搭配書籍吧

9、網頁設計中的色彩設計有哪些注意事項？

學會使用色輪

一半是科學，一半是藝術，色輪是我們認識顏色關系的工具。

那裡有光，那裡就有顏色。有時我們會認為顏色是獨立的——這是藍色，那是紅色，但事實上，顏色不可能單獨存在，它總是與另外的顏色產生聯系，就象音樂的音符，沒有某一種顏色是所謂的「好」或「壞」。只有當與其它顏色搭配作為一個整體時，我們才能說，是協調或者不協調。色輪告訴我們顏色之間的相互的關系。我們在本文中將闡述這一點。

將無窮的顏色簡化：

白色光包含了所有的可見顏色，我們看到是由紫到紅之間的無窮光譜組成的可見光區域，就象你所看到的彩虹顏色。為了在使用顏色時更加實用，人們對它進行了簡化，將它們分為 12 種基本的色相。 12 種顏色——記起來了嗎，和你小時候第一次買彩色蠟筆時，盒子里裝了那 12 只蠟筆差不多。

色輪由 12 種基本的顏色組成。首先包含的是三原色（ Primary colors ），即藍、黃、紅。原色混合產生了二次色（ Secondary colors ），用二次色混合，產生了三次色（ tertiary colors ）。

原色是色輪中所有顏色的「父母」。在色輪中，只有這三種顏色不是 由其它顏色調合而成。上圖可以看出，三原色在色環中的位置是平均分布的。

二次色所處的位置是位於兩種三原色一半的地方（見上圖）。每一種二次色都是由離它最近的兩種原色等量調合而成的顏色。

三次色是由相鄰的兩種二次色調合而成。

共同的顏色：

你可能會發現，每一種顏色都擁有部分相鄰的顏色，如此循環成一個色環。共同的顏色是顏色關系的基本要點，必須對此有深入的了解。

在上圖這七種顏色中，都共同擁有藍色。越遠的顏色（如草綠色）含有的藍色就越少。綠色及紫色這兩種二次色都含有藍色。

在上圖七種顏色中，都擁有黃色。同樣的，離得越遠的顏色，擁有的黃色就越少。綠色及橙色這兩種二次色都含有黃色。

在上圖七種顏色中，都擁有紅色。向兩邊散開時，紅色就含得越少。橙色及紫色這兩種二次色都含有紅色。

顏色有明暗之分——或者稱為顏色數值。為了顯示顏色的明暗，所以色輪有多個環。兩個外圍的大環是暗色（ Shadow colors ），裡面兩個小環是明色 (tint colors) 。

色輪有五個同心環組成，從暗到亮——暗色處於大環，明色處於小環，而中間是顏色的基本色相。

從上圖我們可以看出，處於右邊的暗色就是加上黑色，而左邊的明色則是加上白色。五個圓環已經清楚表示了顏色如何由暗到亮的過程。但這種明色及暗色的關系只是相對而言。

顏色關系

下面我們列出六種基本的顏色關系。每一種顏色關系都可以有無數種搭配的可能，當你掌握它們時，你對顏色的視野才會顯得開闊。

單色搭配（ Monochromatic ）：

一種色相由暗、中、明三種色調組成。這就是單色。單色搭配上並沒有形成顏色的層次，但形成了明暗的層次。這種搭配在設計中應用時，出來的效果永遠不錯，其重要性也可見一斑。

類比色搭配（ Analogous ）

相鄰的顏色我們稱為類比色。類比色都擁有共同的顏色（在上圖中，是黃色及紅色）。這種顏色搭配產生了一種令人悅目、低對比度的和諧美感。類比色非常豐富，在設計時應用這種搭配同樣讓你輕易產生不錯的視覺效果。

補色搭配（ Complement ）

在色輪上直線相對的兩種顏色稱為補色，在上圖中，是橙色及藍色。補色形成強列的對比效果，傳達出活力、能量、興奮等意義。補色要達到最佳的效果，最好是其中一種面積比較小，另一種比較大。比如在一個藍色的區域里搭配橙色的小圓點。

分裂補色（ Split complement ）

如果我們同時用補色及類比色的方法來確定的顏色關系，就稱為分裂補色。這種顏色搭配既具有類比色的低對比度的美感，又具有補色的力量感。形成了一種既和諧又有重點的顏色關系。如在上面三種顏色中，紅色就顯得更加突出。

原色搭配（ Primary ）

除了在一些兒童的產品中，三原色同時使用是比較少見的。但是，無論是在中國還是在美國的文化中，紅黃搭配都是非常受歡迎。紅黃搭配應用的范圍很廣——從快餐店到加油站，我們都可以看見這兩種顏色同時在一起。藍紅搭配也很常見，但只有當兩者的區域是分離時，才會顯得吸引人，如果是緊鄰在一起，則會產生沖突感。

二次色搭配 (Secondary)

二次色之間都擁有一種共同的顏色——其中兩種共同擁有藍色，兩種共同擁有黃色，兩種共同擁有紅色——所以它們輕易能夠形成協調的搭配。如果三種二次色同時使用，則顯得很舒適、吸引，並具有豐富的色調。它們同時具有的顏色深度及廣度，這一點在其它顏色關繫上很難找到。

看了這么多理論，還是考一下自己吧：

下面這四個封面中，都各自運用了我們在上面所述的其中一種顏色搭配。你能說出它們是運用了哪一種顏色搭配嗎？（提示：眼睛只集中在一些大區域的顏色，不要理會細微的顏色區域。也不用理會黑白兩種顏色）

（答案見本頁底部）

答案:

當我們用色輪對其分析後，就很容易得到答案:

A:單色搭配;

B:補色搭配;

C:三原色搭配;

D:類比色搭配

原文出自：http://www.bamagazine.com