網頁設計中怎麼配色？

12-09

一般用幾種顏色，

首先你要學習的不是多種顏色的搭配，而是熟悉每一個常見的顏色。（所以如果你還不熟練，我並不建議你一上來就去照著人家給定的色盤色號來用，你只知其然，對於顏色的運用依然是生疏的）這裡就會涉及到「顏色心理學」，這個算不上一門嚴肅的學科，你去網上書店搜一搜，找一本評價好的，買回來看完，你對顏色的理解會更加深刻。

研究顏色心理，說白了是為了研究你的受眾。優秀的網頁配色不是單純好看就行了，顏色是有功能和目的的，了解顏色背後所能傳達的信息、氛圍、價值觀......當你在面對已知的觀眾時，你就知道，你應該從什麼傾向的顏色入手。網頁面向的人群的年齡段、性別比例、消費層次、風格偏好等等，都應該作為選色的考量因素。

這只是開始。當你深入了解之後你會發現，顏色心理只能教會你一部分，更多的需要大量的實踐去體會。簡單來說，顏色能對人的情緒產生影響，不同的人對色彩的感知會大不一樣，但現實情況中，不同的顏色究竟能承載多少信息量，能傳遞什麼情緒感覺，與顏色背後的品牌也是息息相關，互相影響的。舉個粗糙的例子，土豪金用在金立手機上會讓你覺得廉價，用在iphone上卻會讓你覺得有質感。道理是相通的，不要拘泥於你對某種顏色的既有印象，要學會結合顏色背後的產品和品牌來思考運用，你不單要了解顏色，你還要了解品牌。

當你對顏色有了進一步的認識，其實顏色之間的搭配是一件水到渠成的事情，相信你的判斷，但不要太依賴自己的審美，多聽取別人的意見，歸納總結，顏色才會越來越親近你，為你所用。

沒忍住多叨了幾句，一點拙見，歡迎討論。

我照例推幾個網站，希望對你有用：

1。Color Claim：每日一粒 | Vol.146 為你的作品增添優雅與設計感的配色方案

設計讓我們相信，世上沒有不好看的顏色，只有不好看的搭配。Color Claim最初是設計師Schneider為自己建立的一個配色收藏集，一個主色加一個輔助色的簡單形式，展示出了她出眾的色感。

2。WebGradients：每日一粒 | Vol.112 你的眼睛想吃什麼口味的冰激凌？

這個叫WebGradients的網頁中收集了180個清爽漂亮的漸變色配方，全是像冰激淋一樣令人眼饞的顏色。可以一鍵複製CSS代碼，也可以直接下載PNG格式圖片。

3。ColorHunt ：每日一粒 | Vol.09 再挑剔的人都能在這裡找到ta愛的配

在這裡你能輕鬆找到各種令人舒服的顏色配搭，無論是做設計，還是繪畫，甚至單純練習色感，它都是一個值得收藏的好地方。

以及，幾個網頁設計評選網站，可以看到全球最優秀的網頁設計，實在不知道從哪裡入手，就先看看好的網頁設計是怎麼配色的吧：

每日一粒 | Vol.123 全球兩百多名專業設計師選出的優秀網頁設計

每日一粒 | Vol.11 Exciting～國外優秀的網站設計都在這裡拼分數！

每日一粒 | Vol.70 想看一流的Web設計，就一定不要錯過它

每日一粒 | Vol.30 FWA：十七年如一日，一直走在設計界最前沿

每日一粒 | Vol.104 這個收錄美好網站的網站，本身就夠美～

如果覺得以上不夠看，可以來找我：

www.seeseed.com

各位答主已涵蓋了色彩搭配的概念，也有講色彩搭配方法的。
那就我來點乾貨吧。
------------------分割線--------------------------

1.The Day#x27;s Color/已搭配好的顏色，直接採取。

2.Material Design, Daily a€「 MaterialUp/色彩搭配的優秀作品

3.Reeoo - web design inspiration and website gallery/優秀配色作品

4.智能配色-指定顏色自動生成配色方案

5.uiGradients - Beautiful coloured gradients/漸變色

6.Material Design Colors/取色工具

7.BrandColors 取色

8.Discover Palettes

9.UI Colors - Get Awesome UI Colors for Your Website

10.Color Hunt

11.Web安全色

12.配色網-致力色彩搭配方案的交流與學習

13.Coolors - The super fast color schemes generator!

14.NIPPON COLORS

圖片上傳失敗。。。這是島國的用色風格

15.Colours

16.設計配色 _圖片素材欣賞

17.http://www.colourco.de/

18.Colors - A nicer color palette for the web.

19.日本の伝統色和色大辭典

20.http://flatcolors.net/

21.https://www.coleure.com/

22.Colours

------------------設計相關回答------------------------
·沒有設計師時，產品經理該如何給產品配色？ - 莫若的回答

·網頁設計中怎麼配色？ - 莫若的回答

·如何做設計月薪上萬？ - 莫若的回答

·UI 設計初學者應該怎樣入門？ - 莫若的回答

------------------12月20日更新--------------------
UI設計交流群：414632028

一個網頁最好不要超過三種顏色，但是這麼說是不準確的，這裡所謂的三種顏色指的是三種不同色相的顏色，色相也就是顏色的長相，是辨別顏色名稱的屬性，如黃色、橙色、藍色等。
（如果初學者不了解色彩的一些基礎知識請搓這裡：
推薦：色彩基礎知識
推薦：色彩知識大科普
設計師配色寶典！教你從零開始學配色（一）
）
下面來說說色彩搭配吧，其實分兩個步驟，第一步選色，第二步是分配顏色。
選色：這是最基本的一步，當我們開始設計網頁的時候就應該要規劃好選取哪些顏色，顏色的選取不是無中生有的，而是根據網站的產品定位、風格、以及需要傳達出的理念等為基礎進行選取，而不是無中生有隨著自己的喜好來選取。
舉個栗子，你在設計一家公司的官網，客戶要求實現統一的VI風格（logo、名片、宣傳冊、信封等）而採用統一的配色，這個時候網站的配色就要根據這個企業的VI來選取顏色。
再舉個例子你還是在做一家公司的官網，但是客戶要求要高端大氣上檔次（坑爹的理由，但是卻是網站風格的定位），這個時候就要選取那些視覺上給人高端感覺的顏色（什麼是高端的顏色？想要學會根據顏色來表現高端或者其他視覺風格輕搓這裡：3分鐘色彩速成班(18圖)_@、Dance收集（三分鐘色彩速成教程）），風格的傳達通常是需要掌握色調的。
選色的方法：
（1）工具流：這個鏈接包含大量選色工具12個適合設計師的在線色彩搭配工具
（2）參考流：尋找別人的網站作為參考選取顏色（但是注意要風格類似，比如你的客戶要求高雅風格，你就去找類似風格的網站選色），這個方法適用於初學者。
給個教程
設計師必備取色技巧！教你在PS里通過照片創建色板
分配顏色：這是第二步，當你選好顏色之後就該考慮怎麼把他們分配到網頁的每個角落，分配顏色也是很講究的。有句話說的好叫紅配綠賽狗屁，其實這句話還是不準確的，如果在紅綠兩色之間加其他顏色（白色或者黑色）進行調和是可以搭配的很好看的，大家可以腦補一下聖誕節各大電商的banner。
回到正題，之前已經選好顏色，這個時候就考慮分配顏色，知道色彩基礎的都知道色彩分為主色、輔助色、點綴色這三個叫法（還可以分得更細，這裡就不細說了）。主色是能夠傳達出網站整體風格的顏色，面積最大，所以你之前在選色階段選取的幾個顏色中選一個作為主色，然後用在網頁中需求最多的地方，如banner的顏色，導航的背景色、文字標題的顏色等等，輔助色是比主色百分比略少的顏色，點綴色一般是飽和度較高的顏色，一般用在網頁中的強調內容或者突出的內容，如按鈕、鏈接等，三種顏色在整個網頁的比重大概是60%、30%、10%。
色彩入門容易精通難，還有很多東西需要去掌握，不斷的去實踐，包括顏色的調和、分配等等，我一直在學習色彩搭配，自己不斷實踐和總結，教程也會一直更新，希望大家點個贊支持下~謝啦~
下面分享一些不錯的教程來給大家拋磚引玉吧~
色彩教程：
3分鐘色彩速成班(18圖)_@、Dance收集（和上面那個一樣，圖片更清晰一點，但是需要花瓣賬號）
配色新技巧！如何巧用大師的作品幫你搞定色彩搭配？
色彩搭配速成！3個實用方法幫你全面搞定配色
配色達人速成
怒贊！色彩理論大集結
色彩蘊含的含義和色彩心理：
配色講道理！Thinkful網站配色完全學習指南(上)
配色講道理！Thinkful網站配色完全學習指南(下)
取色技巧：
設計師必備取色技巧！教你在PS里通過照片創建色板
參考別人家的網頁配色：
網頁設計中色彩的運用

對於剛開始學習製作網頁的人來說，往往不容易駕馭好網頁的顏色搭配。除了學習各種色彩理論和方法之外，多學習一些著名網站的用色方法，對於我們製作美麗的網頁可以起到事半功倍的作用。總結了一些著名網站的顏色搭配方法，這些方法可以讓我們的學習少走彎路，快速提高我們的網頁製作水平。

配色工具或網站：
1.在線配色網頁配色工具-UI設計第一站
2.http://www.ui001.com/tool/color_scheme_designer_3/
3.印象配色表-設計師最常用的色彩搭配方案-UI設計第一站
4.Adobe Color CC
5.Color Trends + Palettes :: COLOURlovers
6.Color Hunter
7.Blue Colour Website Inspirations
8.Discover — Art Design Inspiration at ColRD.com
9.網頁配色,設計配色,配色圖表,配色卡,配色方案圖譜生成-SDC優設網配色工具
10.【誕生日佔い誕生色大辭典】運気アップ縁結びの誕生日佔い
11.http://www.visibone.com/
12.Fashion Trendsetter
13.ColorBlender.com

不同的網站有著自己不同的風格，也有著自己不同的顏色。網站使用顏色大概分為幾種類型:

1、公司色

在現在企業中，公司的CI形象顯得尤其重要，每一個公司的CI設計必然要有標準的顏色。比如新浪網的主色調是一種介於淺黃和深黃之間的顏色，同時形象宣傳、海報、廣告使用的顏色都和網站的顏色一致。

2、風格色

許多網站使用顏色秉承的是公司的風格。比如海爾使用的顏色是一種中性的綠色，即充滿朝氣有不失自己的創新精神。女性網站使用粉紅色的較多，大公司使用藍色的較多……這些都是在突出自己的風格。

3、習慣色

這些網站的顏色使用很大一部分是憑自己的個人愛好，以個人網站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網站的時候就傾向於這種顏色。每一個人都有自己喜歡的顏色，因此這種類型稱為習慣色。

網頁設計的顏色搭配需要在實踐中不斷的摸索和不斷的創新，認真學習別人的先進方法和經驗，可以快速的提高我們的製作水平。

可以說。網頁顏色搭配得當，成功也就走了一半。

文章來源：網頁設計配色_好搜百科

網址來源：UI設計網址導航

為了幫助你開啟你的配色之旅，我們收集了50個各種配色方案的漂亮網站帶給你靈感。

重點是，附帶配色和色值！！！附帶配色和色值！！！附帶配色和色值！！！

今天先更新20個，如果大家喜歡，我們再來更新其他的30個哦~~

=====================================================================

【中國版】在線平面設計工具 | Fotor - 免費設計及圖片編輯平台，海量設計模板和素材

Fotor是全球1.9億用戶的在線快速平面設計平台。Fotor首創「懶設計」概念，幫助沒有設計基礎的工作者輕鬆完成平面設計。用戶只需拖放設計模板，或使用全能的修圖工具，即可快速完成設計。

=====================================================================

01. 內容激發靈感

當你舉棋不定的時候，可以在你的內容中尋找配色靈感。這個Fabrique創作給Van Gogh Museum的網站使用了炫目的、紋理感的顏色，這也是他的作品廣為人知的特點。通過搭配使用溫暖的黃色、豐富的綠色和冷感的藍色，得到了一個簡單、靈活而又有意義的配色方案。

02. 有趣且專業

這個來自Mark Dearman的乾淨明亮的配色方案完美結合了暖色調和乾淨的湖藍色背景，創造了一種專業的又極受歡迎的配色方案。試一試通過使用高對比度色來營造乾淨的效果的配色方案吧。

03. 柔和色調

這個The Martin Agency設計的網站使用了柔和色調和白色調和尖銳的黑白色對比，營造了一種令人震撼的碰撞感。極簡和優雅，這個配色方案比起精緻複雜的那些更容易上手。

04. 現代且乾淨

Benedict Leicht這個尖銳而具有現代感的例子使用了不同種橘色和藍色的色調來創作出一種有趣且激情的配色方式。當你使用明亮的顏色的時候，試著和一些比較中性的白色或者亮灰色來中和，就好像這個例子一樣，可以讓東西都變得有趣又不會顯得氣勢洶洶。

05. 霓虹燈色調和強烈對比

Play.agency的這個網站大膽使用了強烈對比的配色方案，結合了強烈的黑色背景和突出的霓虹的色調。通過對比黑色和紫色、藍色、粉色，你可以簡單創造出一種令人印象深刻的效果。

06. 柔和的極簡派

這個Inga Gudoniene / MIOS配合了柔和的、低飽和度的顏色來創造出優雅感。你可以通過選擇酷炫的、低飽和度色調的圖片，配合優雅的灰色來獲得這種永恆和優雅感。

07. 溫暖而恍惚

想要美妙地配合溫暖和冷酷的顏色來創造出與眾不同的氛圍吧？看看Lush Digital』s的書吧——把炫目的紅色和藍色與暗系的靛藍和紫色配合起來，營造出一種恍惚的效果。

08. 乾淨而明亮

多虧了柔軟的藍色、灰色和白色，讓Departika的這個配色方案顯得乾淨而嚴肅。但是，通過混合充滿活力特徵的紅色來吸引觀眾注意力，強調焦點。用強而有力的顏色打破你的柔軟優雅的顏色來形成美妙的對比吧！

09. 暖色調

這個Studio Recode的例子同樣也保持乾淨和極簡的風格，但是用了更溫暖的觸感。通過使用暖色調，亮棕色作為背景，通過圖片和文字來平衡這種暖色調，這個配色方案讓東西顯得溫暖又乾淨。

10. 尖銳而現代

一個形成你網站品牌的好方法就是採用凸顯焦點的配色方法，就好像這個Frost Festival的例子做的一樣。通過使用令人印象深刻的藍綠色來作為焦點顏色，用零散的弱橘色、灰色和薄荷色作為補充，這個配色方法讓整個頁面保持清新、現代和簡單。

11. 冷感vs.暖感

通過把暖色調和冷色調結合，你可以簡單地解鎖一個強而有力的配色方式。這個Akaru的例子把暖感的橘黃色和冷感的金屬灰、青銅色結合起來，營造出了勇敢的、充滿活力的效果。

12. 漂亮的彩粉

彩粉色不單單只適用於護士間的牆面：這個B/C Designers的網站使用了乾淨、明亮的彩粉粉色、藍色和橘色，創造出有趣、明亮和誘人的配色。這種配色方法使用了相當大的白色部分中和，以保持畫面整體新鮮和明亮。

13. 剛勁且強力

如果水彩色不是很適合你的胃口的話，考慮看起來明亮、有力、古老的顏色吧，就好像Magoz這個例子一樣。儘管這個例子一次性使用了許多顏色，它仍然妥善有序地結合，保持暖感的一致性。

14. 色彩和色調

增加配色的維度並且保持極簡的一個好方法是，使用同一顏色的不同色調。這個Romain Bouchereau 和 Vincent Fréman的乾淨優雅的頁面正是使用了同一中性桃色輕微不同的色調來強調焦點。

15. 飛濺的顏色

這個 Magnium Themes 的例子注入一對明亮的爆炸顏色，營造出一種有趣且圓滑的效果。藍色、橘色、黃色和灰色背景對比，創造了專業又不失活潑的效果。

16. 優雅精緻

我們都覺得黑色和白色是最精緻的顏色，但是看看這個 Julian Damy的設計案例，通過使用深藍色和精緻的金色來達到精緻的效果。這種配色方法是漂亮且永恆的。

17. 夏季靈感

當我們想到關於夏天的設計的時候，總是聯想到紅色和橘色，但是看看這個StrADegy Advertising網站，嘗試使用珊瑚色、藍色和棕褐色來捕捉這個季節的溫暖。這是一個簡單、樸素和容易使用的夏季靈感的配色方法。

18. 專業且現代

又有超專業感但是又不會無聊老舊的配色方法是什麼？看看這個曾經在Avondale Type Co上使用的例子吧。灰色、深海軍色和振奮人心的明亮黃色調配合，創作出尖銳而又單調現代的布局，真是專業又新鮮的好設計。

19. 醒目的黑色和亮點

如果你所在的市場需要更加突出的、潮流的設計，嘗試配合醒目的黑白色和一些醒目的顏色吧，就像這個Cantina dei Colli Ripani的例子一樣。亮色和黑色的對比營造出了有力、剛勁和有趣的效果。

20. 乾淨的漸變和鮮藍色

你想做一個網站讓它看起來十分「乾淨」嗎？一個達到目的好方法，就像SHIBUI做的這個網站配色一樣，使用漸變色。這個網站的配色由鮮藍色和松石綠漸變組成，達到了平靜、乾淨和新鮮的效果。

======================================================================

【中國版】在線平面設計工具 | Fotor - 免費設計及圖片編輯平台，海量設計模板和素材

自己總結分享的配色技巧和學習方法，希望對你有用哈，這裡就不重複copy內容了，博客文章的SEO都要被各種平台吃完了！
談談(web)UI設計如何零配色,無參考創建安全配色方案2016版

分享收藏已久的配色指南：

設計原則101——色彩理論

第一印象決定一切！大家都可以從各自的外表上大概看出一個人的性格。同樣的，這個理論也可以延伸到設計工作里。但是影響設計工作的因素有很多，但是第一時間被關注到的應該是顏色。顏色反映了設計的整體感覺，有時候單憑顏色就可以調度起一個人的情緒、情感甚至回憶。如果沒有掌握色彩理論的基礎知識，你會發現在日常工作和生活中，你忽略掉了很多細節。

找出哪些顏色配搭在一起很美膩並不是一件偶然的事兒，這其實是一項很科學道理的工作。不同的顏色組合適合不同的作品，而且這種類似固定搭配的組合規則並不能輕易被打破。讓我們從最基礎的部分開始了解色彩理論吧！

原色

所有顏色的源頭被稱為三原色，三原色指的是紅色、黃色和藍色。如果我們談論的是屏幕的顯示顏色，比如顯示器，三原色則分別是紅色、綠色和藍色，也就是我們熟悉的RGB。

間色

如果將紅色和黃色、黃色和藍色、藍色和紅色均勻混合，就會創建三種間色：綠色、橙色和紫色。將這些顏色應用進項目中，可以提供很強烈的對比。

三級顏色

三次色來源於間色與原色的混合，主要有：紅紫色、藍紫色、藍綠色、黃綠色、橙紅色和橙黃色。現在，你應該了解了顏色到底都是怎麼衍生出來的，也可以了解色輪上的顏色組合都是從何而來。理解了色彩的原則將有助於在項目中選擇顏色。為自己的設計選擇一個合適的調性，並創建適量的對比度，讓設計工作更好地展開吧！

接下來我們聊聊基於色輪我們可以得到的基本色彩組合。

互補色

互補色是指色輪上那些呈180°角的顏色。比如藍色和橙色、紅色和綠色、黃色和紫色等。互補色有非常強烈的對比度，在顏色飽和度很高的情況下，可以創建很多十分震撼的視覺效果。

相似色

相似色是指在色輪上相鄰的三個顏色。相似色是選擇相近顏色時十分不錯的方法，可以在同一個色調中製造豐富的質感和層次。一些很好的色彩組合有：藍綠色、藍色和藍紫色；還有黃綠色、黃色和橘黃色。

三角色

三角色也是一組顏色。是通過在色環上創建一個等邊三角形來取出的一組顏色，可以讓作品的顏色很豐富。在上面的例子中，藍紫色和黃綠色就可以形成十分強烈的對比。

分散的互補色

分散的互補色和互補色的區別在於分散的互補色並不是取目標顏色正對面的顏色。拿上面的圖做例子來說吧，黃色的互補色應該是紫色，但是我們取紫色旁邊的兩個顏色——紫紅色和藍紫色。這樣子不僅可以有一個強烈的對比度，而且還可以讓顏色更豐富。

四方色

四方色是在色輪上畫一個正方形，取四個角的顏色。在上面的例子中是：紫紅色、橙黃色、黃綠色和藍紫色。這個顏色真的超棒的，不信可以自己用用感受一下，尤其是使用其中一個顏色作為主色，其他的三個顏色作為輔助色的時候。

四方補色

四方補色和四方色的差別在於四方補色採用的是一個矩形。通過一組互補色兩旁的顏色建立的色彩組合。如上圖中的互補色橙色和藍色，分別選用他們兩旁的顏色來建立矩形，最終取得橙紅色、橙黃色、藍綠色和藍紫色。

明暗

顏色的色調也可以影響顏色給人的感覺，就拿上圖的藍色來說，第一張是原圖，第二張添加了白色，第三張添加了黑色，同樣的藍色產生了不同的感覺。在實際應用中，可以在採用單色配色方案時，通過改變顏色的色調來創建不同的感覺。

暖色

暖色可以創造溫暖的感覺，暖色通常會讓人聯想起太陽、火焰和愛情。紅色是血的顏色，感覺是溫暖的，橙色和黃色會給人夏天的感覺。給圖像添加一個橙色的濾鏡，圖像看起來就會有溫馨快樂的感覺。

冷色

冷色也有其獨特的含義，通常會讓人聯想起涼爽的氣候、冬季、死亡、悲傷、冰、夜晚和水這些事物。冷色可以給人平靜、安寧、新人、乾淨的感覺。紫色與尊貴經常聯繫在一起，看起來十分內斂。

顏色的意義

紅色

紅色是代表愛情和激情的顏色。情人節的禮物通常都有一個紅色的盒子，或者是粉紅色，也就是添加一些白色的紅色。紅色也代表憤怒和血液。在火焰中可以同時找到紅色、橙色和黃色。紅色也表示危險，所以很多表示停止的標識牌都是紅色的，因為紅色可以很好地吸引人們的注意。紅色是很強勢的顏色，當它和其他顏色相遇時，比如搭配黑色，可以創建非常強勢的感覺。紅色可以搭配一些嚴肅的語氣和強硬的命令。

推薦：淺談色彩學：以紅色為主的色彩配色

橙色

橙色代表了溫暖，但是並不像紅色那樣咄咄逼人。橙色能夠創建一個有趣的氛圍，因為它充滿了活力，而且橙色創造出的活躍氣氛並沒有危險的感覺。橙色可以與一些健康產品搭上關係，比如維生素C，畢竟橙子里也有很多維生素C。

黃色

提到黃色，經常可以聯想到太陽和溫暖。使用橙色的時候，可以創造出一種夏天的好玩的感覺，黃色則帶給人口渴的感覺，所以經常可以在賣飲料的地方看到黃色的裝飾。黃色也可以和懦弱與恐懼聯繫起來，這個則是因為以前「yellow」這個詞也代表著這個意思。當黃色與黑色搭配在一起時，十分吸引人的注意力，一個絕佳的例子就是很多國家的計程車都採用這種配色。

推薦：10個國外黃色網站欣賞

綠色

在西方國家，綠色是錢的顏色，這與他們的文化和財富有關。因為大多數植物都是綠色的。綠色也代表著經濟增長和健康。綠色經常用作一些保健食品的LOGO，因為看起來就十分貼近自然。綠色還意味著利潤和收益。如果搭配上藍色，通常會給人健康、清潔、生活和自然的感覺。

藍色

藍色是一個神奇的顏色，因為不同明度的藍色會給人不同的感受、想法和情緒。如下圖中所示，深藍色可以給人一種悲傷的感覺，讓人聯想起傷心時怎麼聽都不夠的藍調音樂。而淺藍色則通常會讓人聯想起天空和水，給人以提神、自由和平靜的感覺。藍天永遠都是平靜的，水流可以沖走泥土，清洗傷口，所以藍色也代表著新鮮和更新。藍色給人冷靜的感覺，會幫助人放鬆下來。

紫色

紫色總是讓人不禁想起皇室成員的長袍。紫色可以更多地與浪漫、親密、柔軟舒適的質感產生聯繫。紫色給人一種奢華的感覺，也有一種神秘感。下面這個葡萄酒網站就是極好的例子。

白色

白色通常與醫院聯繫在一起，因為醫生們都是穿著白大褂的，而且醫院內部的裝修通常也是白色的。此外，宗教繪畫有時候也是沒有色彩的，白色也代表著聖潔。白色通常給人乾淨的感覺，比如白色的床單和衣服都讓人感覺很乾凈。也可以代表棉花和柔軟的雲朵。心理健康相關的事物也可以選用白色，白色也同樣適用於衛生、清潔相關的設計。比如下面這個網站，就很好地利用了白色。

黑色

黑色通常與死亡有關，尤其是在美國。它可以代表腐壞，因為很多食物腐壞變質以後就是黑色的。黑色也代表邪惡，因為是白色的對立顏色，而白色通常代表著純潔美好善良。黑暗和未知也會給人焦慮的感覺。很多圖像中，黑色表達了抑鬱、絕望和孤獨。雖然黑色有很多負面的含義，但是黑色也是一個萬能色彩，當黑色遇上其他顏色的時候會產生其他的意義。比如當黑色邂逅金黃色，就可以給人一種奢華、高檔的感覺；當黑色偶遇銀灰色，則會給人一種成熟穩重的感覺。下面的網站就完美詮釋了這一點。

推薦：遊戲中的色彩學：黑白沒有你想像的那麼陰暗

作為一名設計師，了解色彩是一件必不可少的事兒。在設計的時候應該慎重地考慮和選用顏色。通過不同的顏色，可以創造出不同感覺的圖像。合適的組合可以獲得關注，通過視覺傳達設計師所想，進一步拉近設計師與觀眾的距離，讓圖像更具力量。

adobe color cc

另建議使用 web安全色

之前對於排版版式做過一些培訓的經驗，與網頁設計也有很大的聯繫。先放幾張之前PPT的圖。

圖片來自互聯網，扶桑收集整理總結

題主問得主要是配色方面，那就說一下配色。

基本上大部分的網站都可以用黑白灰+一個主色來完成。不同之處就是黑白灰的比例和這個主色的選取。〈這裡說的黑色大部分情況下都是深灰，幾乎沒有直接使用黑色的網頁〉
比如說醫療類別的網站可以用白色淺灰和藍色，比較酷的產品網站可以深灰中灰和紅色或者深灰中灰和綠色，工程機械類的可以用中灰淺灰和黃色，食品飲料相關可以白色淺灰和黃色或者橙色或者綠色，每個行業都有一個自己行業里認同度比較高的顏色，但這個不是死的。
黑白灰的顏色搭配里也應該盡量有主有次。
這是比較保守的一些搭配方案。

那麼對於個性化要求比較高，彩色元素佔據大部分的網站，最好還是選取一個或兩個主色，其餘的色彩都通過主色來選取，在主色基礎上可以進行明度加減，飽和度加減等，注意幅度不能太大。

其實顏色選好之後，還有很多其他的點也要注意的，整個網站的div框架版式、字體及其粗細顏色、圓形與方形的元素搭配、部分地方的動效搭配等等，這裡就不一一說了。

不知道用什麼顏色的時候用藍色，多半不會丑。

一、需要配色的是你的畫布，而不是你的圖片

你的配色方案永遠不應該比它呈現的內容的更加「響亮」。你的設計應該是在後台，目的是幫助突出網站的內容。

二、選擇簡單的灰色作為你網站的基調

一般來說，你的文字最好避免使用墨黑色，深灰色一般更容易閱讀。提供一個比較舒服的文字顏色範圍：＃333333到＃666666。

對於你的背景色，全白色（#FFFFFFF）是可以搭配任何文本的最安全的顏色。如果你想選用其他的背景顏色，我們建議採用#FFFFFF到#CCCCCC

三、只選擇一種顏色突出顯示

如果你選擇好幾種不同的色調來，那麼你的配色方案絕大多數是有問題的。你最好只選擇一種鮮艷的顏色來作為你想要突出的事物，比如標題、菜單、按鈕等等。你的高亮顏色可以是藍色、紅色、綠色，等等。最好選擇與你的基調顏色相關的高亮顏色。

打開你的顏色選擇器，並單擊你彩色方塊的中心。向上或向下移動你的滑塊，你可以仔細選擇你認為最合適的顏色。

現在，你設計的頁面應該有三個基本的顏色：背景色、文本色和高亮色。

四、如果有疑問，請使用藍色

如果你對你的高亮色的選擇有疑惑的話，不妨使用藍色。藍色是一種彈性比較大的顏色，可以和很多種顏色搭配。黃色和紫色也很不錯，但是如果使用不當會適得其反。

另一方面，如果你是用藍色，那麼你用錯顏色的概率就會很低。如果你正猶豫著不知道用什麼顏色好，不妨使用藍色。比較安全的藍色包括從H235到H190，從海軍藍到深藍色。

五、給你的高亮色增加變化

你一旦選擇了高亮的顏色，從該點移動滑塊來選擇接下來的顏色。在你的設計中也需要其他的顏色，高亮色的稍微變化會讓你的顏色選擇變得簡單。

六、盡量不要使用顏色選擇器右上角的顏色

顏色選擇器的右上角是一塊肥沃的土地。在右上角的顏色就像F1賽車; 他們可以執行出驚人的效果，而且非常誘人，但通常想用好需要大量的經驗。如果沒有這種經驗，他們可能會導致事故的發生，所以最好以削弱你的顏色，最好都保持比較淡化的色彩。

文章到這裡就結束了。

整理/yoga

原文地址：blog.enqoo

轉一篇我們官方blog上的配色理論，希望對你有所幫助。網站設計 | Photoshop 教程 | 設計技巧

【顏色基礎知識】

打開你的Photoshop，新建文檔，有兩個非常重要的選項，一個是顏色模式（點陣圖／灰度／RGB顏色／CMYK顏色），一個是位數（1位／8位／16位／32位）。

【什麼是顏色模式？】

新建一個文檔，選擇顏色模式為：點陣圖和1位（為什麼其它位不能選擇？請往下看）。

選擇「窗口」－「顏色」（或者直接按F6），調出顏色面板：

把K值（灰度值用K表示）拉到50％以下及以上，或者選擇色彩不同的亮度（同樣只有K值變化，深色的K值變大，淺色K值變小），選擇矩形框（只能選擇路徑和像素模式）畫畫，看看出現什麼效果？只能畫白的和黑色。為什麼會這樣？

【什麼是位？】

還記得中學的時候老師講過的嗎：「Bit（位）是計算機存儲器里的最小單元」。一比特等於二進位（0和1）中的一位，多少0和1就是多少位。1像素用1位表示的話，2的位次冪記錄。黑白兩種單色，每個像素只有1位顏色（2的1次冪）。這就是為什麼上面我們新建一個顏色模式為「點陣圖」和「1位」，只能使用黑色和白色了。也就有了點陣圖這個概念。

【灰度模式】

打開PS，同上，新建文檔，選擇「灰度」和「位」，和RGB能選擇的範圍一樣，可以選擇8位／16位／32位。

打開顏色面板，把RGB調成同一個數值看看，是不是RGB相等的時候，變成灰的了？其實，256色，也稱256灰度級。

把RGB全部調成255，是全白（等於灰度模式0%）；全部調成0，是全黑（等於灰度模式100%）。點擊右上角下來箭頭，選擇灰度模式對比一下是不是這樣的。

那麼RGB和灰度之間有什麼聯繫呢？這裡我們需要聊兩個概念：亮度和通道。

隨意打開一副圖像，「窗口」－「通道」，打開通道面板，分別單獨選擇紅，綠，藍試試：

RGB模式

紅色通道

綠色通道

藍色通道

除了灰以外，還有比較亮的白色，和比較暗的黑色，它們統稱為亮度的變化。

每個通道中的顏色都是由像素亮度決定的，控制單一通道的亮度其實就是在控制顏色。這也涉及到亮度合併問題了，後面調整照片顏色的時候，我們詳解。

RGB與灰度的計算關係：RGB近似色值＝ 256 x （1-灰度數％）（注意關閉色彩管理模式，Photoshop 中「編輯」—「顏色設置」－顯示器顏色。色彩管理主要用於印刷領域。）

你可以嘗試關閉單一通道（如紅），留下綠和藍的組合，看看圖片是什麼顏色？是不是變青色了？為什麼會這樣？留意下一篇的色彩理論，你就明白了。

【RGB顏色】

計算機屏幕的顯示是色光三原色（紅red，綠green，藍blue）組成的，每一個像素的顏色都用三原色值來顯示。

RGB模式中，每種顏色的單像素用8位存儲，2的8次冪等於256，三種顏色256x256x256=16777216 ，簡稱1600萬色（千萬色或真色彩），也稱24位色（8位 x 3個顏色通道）；16位是高彩色；如果是32位，就成HDR（高動態範圍成像）了。

顯然，位越多，色彩越豐富，相應的存儲空間也大。

【CMYK顏色】

CMYK模式用於印刷領域，用百分值表示，當CMYK全等於0%時顯示白色，反之100%是黑色。

【Lab顏色】

為什麼這個Lab顏色只能選擇8位和16位呢？這就是涉及到色域了。Lab顏色模式主要根據人眼的正常能查看的色彩範圍，所以也就不會更豐富的32位了。

【顏色理論】

色彩圓盤上可以用一句詩來記住：紅、橙、黃、綠、青、藍、紫

我們上節已經了解到顯示器所有顏色是由色光三原色RGB混合成，那其它顏色是如何計算的呢？色環中，相鄰的原色混合成二次色（近似色），如：

紫色＝紅色＋藍色

青色＝藍色＋綠色

橙色＝紅色＋黃色

用二次色混合就形成三次色（三元色），如

藍紫色

青藍色

橙黃色

對立的兩種顏色形成反轉色（互補色），冷色調和暖色調相對。紅色色值是255, 0, 0，綠色色值是0, 255, 0，藍色色值是0, 0, 255，如果你想得到黃色，那麼意思就是沒有藍色，純黃色的色值就是255, 255, 0。同理，紫色（255, 0, 255）是紅色和藍色的混合，沒有綠色。

【顏色術語】

當我們用肉眼看一種顏色：

色相（Hue）就是一種顏色，如紅，黃，綠；

飽和度（Saturation，色度／彩度）指的是顏色的強度；

明度（Brightness，亮度）顯然就是明暗程度，加入黑或白色而形成；

色調可以理解為整體色彩的給人的感覺，如偏紅，偏藍；

暖色調，紅，橙，黃及其近似或組合，給人強烈，溫暖，激情的感覺；

冷色調，綠，藍，紫其其近似或組合，給人冰冷，平靜，舒緩的感覺；

中性色，黑灰白，可用作中和暖色和冷色；

【色譜理論】

單色 ( Monochromatic）單一顏色，可以在飽和度和明度上做變化，同樣很協調和舒適的感覺。

近似色 ( Analogous) 色輪中相鄰或相近的顏色，視覺上會很協調。

互補色 (Complementary) 兩種相反的單色，180°對立關係，色差較大，形成互補。通常在想某一種顏色中特別凸顯出來可以使用互補色。

三元色 ( Triad ) 3種顏色等距離分布在120°上，形成一定的對比，但沒有互補色強烈。

【顏色引起的情緒變化】

色彩不僅能引起情緒變化，往往也能表達自身文化。另外，在實際使用中，也會根據場景而表達的信息不同組合，總之，顏色，你大膽去使用。因為篇幅所限，我們簡明扼要概括常用顏色，以便你快速入門。下面節選部分應酷Enqoo客戶案例進行分析。

紅色

好的：激情，熱烈，豪放，力量…

壞的：危險，禁止，恐怖…

文化：正紅在中國文化中表示喜慶，幸福；西方則認為紅色為邪惡的象徵；南非，紅色則是喪服的顏色。

橙色

好的：溫暖，活力，運動，誘人

黃色

好的：快樂，陽光，溫和，明亮，愉悅

壞的：警示，懦弱，有色情的味道

文化：在埃及，黃色是奔喪的顏色；在日本，黃色代表勇氣；在印度，黃色則是商人的顏色。

綠色

好的：生命，活力，環保，新生，健康，生活…

藍色

好的：專業，高效，冷靜，放鬆…

黑色

好的：穩重，炫酷，高雅，時尚，現代…

壞的：沉悶，凝重，死亡…

灰色

好的：嚴謹，正式，專業，現代…

壞的：哀悼色..

白色

好的：純凈，簡潔，柔和…

文化：西方，白色是婚禮的象徵；中國傳統白色是喪服。

【如何進行色彩搭配？】

配色不是科學，而是藝術。也就是說顏色的選擇你要去感知，而不是去計算。這裡提供些小技巧，讓你搭配色彩的時候更專業。

多色彩的搭配，調整飽和度或明度，處理柔和點。

色彩鮮艷的配中性色（黑，灰，白）

好了，先到這裡，希望對你有所幫助。blog上還有很多關於顏色理論及配色的相關知識，你可以點擊回答開始處的blog的鏈接登錄blog瀏覽。如果你有什麼不明白的，也歡迎在應酷設計Blog留言。

分享配色大師 Patrick Multani 的色彩搭配技巧。也許這10個技巧，會成為你的配色體系的可靠補充~

分享一下配色大師 Patrick Multani 的色彩搭配技巧。也許這10個技巧，會成為你的配色體系的可靠補充~（轉載自公眾號設計三腳貓）

技巧1：謹記配色策略

在開始著手挑選配色之前，我常常會翻看 Dustin Senos 關於設計原則的短文。他在文章中，闡述設計原則的方式非常有意思，幹練而有趣，「方向優於選擇」，「合適優於一致」，「發展性優於總結」。其實如果借用這種句式來總結配色也不錯：「白色優於灰色」，「和諧優於錯位」，「沉靜優於熱烈」。當我在工作的時候，我會時刻謹記這些配色策略，它們更像是一種感覺上的規範，就像用戶角色引導UX設計師來設計體驗一樣。

技巧2：取色一條線

當我在調色板上選擇色彩的時候，我會傾向於沿著直線路徑來挑選色彩，從左到右，從上到下，或者沿著對角線來選取色彩。這樣所獲得的一套配色可以兼顧到不同的按鈕狀態（可用/不可用，活動/非活動），兼顧到視覺主體和邊框，背景等。我們也可以在取色器的同一個位置取色，調整色調，獲得的一組色度接近色調不同但是高度協調的色彩組合。上圖中，中間那個就是。

技巧3：保持敏感，小幅調整

調配這這麼多配色方案，給我最深刻的經驗教訓就是：哪怕輕微的色彩調整，都會對整個配色方案帶來巨大的影響。所以，我覺得在配色的時候，要保持敏感，小幅度調整和改變。你可以試著挑選偏冷或偏暖的灰色，運用到你的配色方案中，你會發現它們會不同程度地調和整個配色方案的協調度。根據這樣的策略，你可以挑選出一大堆色彩作為備選，反覆迭代，變得對於微妙的色彩變化更加敏感。

技巧4：善用疊加模式

如果你能善用混合模式，就能創造出令人著迷的配色方案。通過簡單的疊加兩個色塊，選擇「Multiply」（乘法）混合模式，就能得到匹配的第三種色彩。在白色背景上，我們還能通過調整透明度來快速調整色彩的明暗。不過我始終覺得在黑色背景上來調整色彩更有意思，搭配混合模式來探索色彩的可能性，總能創造新的搭配。這種同色彩的交互方式，為許多經驗豐富的設計師所使用。

技巧5：沉靜而集中的配色

選好色彩是一回事，在視覺設計中有效地運用它們是另外一回事。有的配色方案非常漂亮，但是一旦運用在特定的設計項目當中，整個視覺就崩壞了。盡量讓配色方案中色彩不要那麼龐雜，讓整個設計更加沉靜。比如，文本、圖標和邊框採用不同類型的藍色，能讓整個設計顯得協調。當你想要高亮突出什麼東西的時候，可以採用這種方法。

技巧6：在不同背景下查看配色

我記得之前參與過一個可拓展的色彩系統項目，當時我挑選了大量微妙而接近的色彩，當我仔細審視它們的時候發現很難區分彼此。這個時候，我將這些色彩複製了一份，然後添加了一個黑色的背景，這個時候，色彩和色彩之間的區別就變得明晰了，讓我能夠更好的作出選擇。

技巧7：明艷的色彩更吸引人

在取色器的右上角取色能夠找到更加安全、更加吸引人的色彩，供你運用在配色方案中。色彩越靠左、靠下，色彩上所疊加的灰度和黑色就越多，色彩本身的重量就越重，而過重的色調會在潛意識上給人以壓力。所以，我更傾向於使用清晰明亮的色調來進行設計。

技巧8：疊加圖層調色

想像有一張半透明的紙，當我們將它置於色彩上方的時候，它能夠從視覺上「消減」色度。我們可以在PS和Sketch中來模擬這樣的「紙」，新建形狀，通過調整透明度和混合模式，或者搭配使用來實現不同的效果，我們還可以調整紙張本身為白色或者黑色，在疊加混合模式下，能對色彩的飽和度產生不同的影響。在有的UI設計項目當中，會藉助這樣的技術來暫時調整整個區域的敏感色度，這比改色更加輕鬆，還保持了色彩之間的協調度。

上圖中的三種效果：

黑色圖層，疊加混合模式，不透明度50%（增加飽和度）
白色圖層，正常混合模式，不透明度50%（變亮）
黑色圖層，正常混合模式，不透明度50%（變暗）

技巧9：根據前景色來挑選背景色

當我選取背景色的時候，我更喜歡根據前景色來搭配，吸取前景色，調亮或者變暗，而不是選擇純粹的中性灰色。這樣的方式會讓背景色是或冷或暖的淺灰，給人一種協調的感覺。

技巧10：色彩的明暗與前後

最後，我們應該始終謹記色彩的明暗所帶來的視覺深度原理。在較深的背景下，淺色會顯得更靠前，而在較淺的背景下，深色會顯得突出而靠前。

網頁製作其實不是很難的，自己也可以製作。凡科網頁製作可以在做好的模板上再補上我們的資料，或者是可以在空白的頁面自己設計，後台會自動生成相對應的代碼

看項目風格要求而定。

偏活躍，顏色可以多一些（4種以上）並且色彩範圍可以放寬，偏穩重的顏色就要少（3種以下）並且顏色盡量要近似，包括明度、色相和彩度。

初期可以用一下色庫，而且網上一搜一大把，但配色不要完全依賴色庫和模板，更重要的是培養色感，有了良好的色感，再找色庫去用，才能變通，讓自己的作品配色更生動。長期這樣做，是一種練習，是設計工作的長久之計。建議下載配色遊戲經常玩一下。如，Blendoku

一般是根據企業VI色，行業色，客戶喜歡的顏色。

從圖片採集色彩搭配，用在網頁上

首先要搞清楚行業，其次搞清楚調性，再次搞清楚你所設計的網站針對的瀏覽人群

去學習學習了啊

可以看看這個

Coolors – 超級快速配色方案生成器

千萬不要讓色盲來配色
千萬不要讓色盲來配色
千萬不要讓色盲來配色
P.S.沒有歧視的意思，我就是色盲。