什麼樣的網頁配色可以讓眼睛更舒服？

01-15

我的網站需要一種讓眼睛更舒服的配色，這個網站是我架起來跟朋友交流的，但是我一位朋友眼睛不太好，所以想找出一種讓眼睛更舒服的配色，減輕朋友眼睛的負擔。
現在我的網站底色為白色，很扎眼，白底色的方案，基本可以否決掉。
在看了大家的答案之後，做了一些嘗試。

無論怎麼配，都覺得黑色比較順眼，是不是我的眼睛有問題？
雖然嘗試過用淺色調來配，但是都覺得淺色調配起來沒黑色那麼舒服。
會不會是因為液晶屏的問題？
我的網站： http://www.ciiaii.com/
找過一些人幫我測試，都覺得受不了這種配色，而我則受不了白色的，眼睛很容易不舒服。

可以嘗試底色為接近於白色的灰色，例如#f4f4f4，可以有其它的比如藍色，而藍色可以嘗試下#308ac2，一般顏色會接近於高飽和度，但是會有輕微的灰度的顏色，這樣整體顏色不會因為灰度過多，顯得界面很臟，也不會因為界面飽和度過高，造成界面顏色長期觀看對人言的刺激，其它的小面積的配色也可以是這種模式，所有顏色中唯一不適合帶有灰度值的就是黃色或橙色了，這兩種顏色可以考慮用高飽和度的顏色，但是不是和大面積的使用。

幾個我在工作中可能會用到的取色技巧：

一. 根據現成圖片找配色靈感

有圖有真相，請看下圖，我隨便搜了一張蘭博基尼的圖片，作為靈感的來源。當然，你選擇的這張圖應該你覺得顏色搭配感覺還不錯的例子，而不是反面教材。

有兩種方式可以處理此圖

1. 大幅度模糊

模糊會把圖片中很「跳」的過飽和色給中和掉，模糊本來就是一種把顏色平均化的工作，所以大幅度模糊後的圖，顏色一般比較「熟」，不「生」，但在有些情況下很容易臟。

一般我會通過這種方式獲取一些相對沉著的有一定灰度的顏色。

PS: iOS7的毛玻璃效果大幅度模糊背景圖，其實也是中和掉了那些太突出的顏色，能適應大多數壁紙。

2. 濾鏡「染色玻璃」

染色玻璃這個濾鏡在設計過程中估計極少會有人用，它可以把圖片中的顏色按一定的面積「取樣」變成一個個色塊（其實也類似馬賽克）。可以利用這個濾鏡，把圖片中許多有代表性的顏色提取出來，比自己在圖上手動吸取要可靠一些。

一套配色的整體性

配色其實說到底就是在找顏色之間的關係，我這也有一種很簡單基礎的方法能給一個看似沒有太多關係的配色賦予一定的顏色關係。如下圖：

最右側是隨便選擇的一堆顏色，搭配起來感覺並不合適，可能其中的顏色兩兩來看是不錯，但從中選取三至四個顏色搭配出的結果就比較不好了。

我通過一個橙色（#ff9000）的層對這個配色進行「濾色」處理（此處橙色只是一個溫暖青春的顏色傾向，濾色也只是一種影響底層的方式而已，在實際運用中可以多嘗試其他比如疊加，比如柔光，比如正片疊底等等等）。並給予它70%的透明度。

得出的新配色中的每一個顏色，都有一個相同的關係，那就是都曾經被（#ff9000）「濾色」處理過。這就是它們的共同點。

然後我從這套新的配色中選擇幾個顏色組成了最右側的色塊圖，這個配色我覺得可以適用於青春，美食，校園等主題的設計中。

以上都是自己臨時整理的一點心得，希望有幫助，語句措辭如有不準確請見諒。

------------------------------------------------------------------------

以上來自我的另一個回答如何學習配色？

另外，我想說，專業的事情交給專業的人來做，而不是遇到什麼問題都需要求助，尤其是創業之類的項目，需要把工作責任分散出去就應該分散出去，找靠譜的人來操心這部分內容，比臨時抱佛腳來問知乎可能更靠得住，能更快更好解決問題。當然也要付出成本。

最讓我舒服的是Twitter 的配色

學會使用色輪（以下是轉載，陳述的比我自己總結的要專業）

色輪的形成

選定紅色、藍色和黃色三種顏色（這三種顏色叫做三原色，更確切的說，叫消減三原色。在調製顏料時，唯有這三種顏色不能通過其它顏色組合出來）等距（彼此120°夾角）放置放到圓周上，分別等量混合相鄰的兩種顏色得到三種間色。再次混合每組相鄰的顏色又會得到6種顏色（這六種顏色稱為「第三色」）。這樣，我們就得到了一個由12種顏色組成的12階色輪。同樣的道理，我們將這種間色混合的過程重複無限次就會得到一個漸變的色輪。

將色輪展開，就會得到PPT中我們經常用到的調色盤。在繪圖軟體中，我們也經常看到色輪式的調色板，不過如果你注意觀察的話，就會發現有些色輪與我們剛剛製作的色輪並不相同。下圖中就是http://paint.net的調色盤，你會看到與紅色相對的是湖藍而不是綠色。實際上，這種色輪是以藍綠色（Cyan）、品紅色（Magenta）和黃色（Yellow）三種顏色為原色形成的，這三種顏色為加和三原色（Additive color），我將在本文末尾解釋一下兩種色輪的不同。

那麼為什麼要製作色輪，色輪有什麼作用呢？

互補色
色輪上相對的顏色稱為互補色。如紅色和綠色、黃色和紫色，藍色和橙色，每一對互補色看起來都非常對立，非常適合以一種為主色，另一種用於強調。當然，不分主次大面積使用互補色的結果就不是互補了，而是對立，會顯得很不和諧。在很多商用模板中，穩重起見一般都不會使用太多顏色，這時候互補色即為一種很好的選擇。比如你可以選擇藍色作為整個PPT的主調，然後對於要強調的內容使用橙色，非常醒目。

三色組

色輪上彼此等距地三種要色即為一個三色組，比如我們選用的三原色紅黃藍就是一個三色組（紅黃藍的色彩很顯眼，適合用於氣氛比較活潑的場合，在兒童刊物里經常會看到這種組合），三色組放到一起的時候看起來是很舒服的。

分裂三色組

一種顏色和其互補色兩側的兩種顏色即可組成一個分裂三色組。分裂三色組可以起到很好的強調作用，又不失協調，是一種非常常用的色彩組合。

類似色

色輪上彼此相鄰的顏色即可組成類似色。「不論組合兩種顏色還是三種顏色，他們都有相同的基礎色，這就形成了一個協調的組合。用不同的亮色和暗色組合一組類似色，效果將相當醒目！」

多色組

除了上面介紹的簡單的色組以外，你還可以對其進行衍生而創造出更為複雜的色組。比如兩組互補色組成四色組，分裂三色組與類似色衍生出五色組。這些色組看上去都是非常和諧的。在TG的模板中，你經常可以看到這些多色組的使用。

你可能已經注意到了，上面的截圖與我們初始創建的12階色輪除了更多混合而成為漸變外，從圓的外圍到圓心，沿著半徑方向，顏色是逐漸變淡的。在創建完色輪所給的最後一個PPT調色板的截圖中，顏色沿著向下的方向是逐漸變灰的。這就牽扯到一些色彩理論的問題。毫無疑問，使用這些淡色或深色會大大加寬我們顏色的選用範圍，所以這些問題還是到下一篇中在做交代好了。

2.其他配色方法

當然，在PPT設計中，除了色輪我們還常用到其他的配色方法。

1).LOGO取色

你公司的LOGO可能由一種或者多種顏色組成的，如果你用取色管將這些顏色吸取出來，就非常合適創建一個適合你公司的顏色主題。選擇一款取色工具請到這裡。

2).背景圖片取色

你可能已經做好了模板的首頁。這時，通常可以用取色管去下模板背景圖片的顏色作為模板的顏色主題。

3).使用他人創建好的顏色主題

常用的網站有Kuler，等，這類網站有很多專業設計師設計的顏色主題，你可以在需要的時候直接到這些地方找找。

3.常用配色網站和軟體

說了這麼多，你肯定在想有沒有什麼軟體可以幫助我們使用色輪原理配色呢？

如果使用色輪配色，你可以到Colorjack、Color Scheme Designer這類網站用下在線的色輪工具：

可以到上面提到的Kuler、Daily Color Scheme、ColorLovers等網站找一個喜歡的顏色主題，還可以上傳圖片到Color Hunter讓它自動給你生成一個顏色主題。關於Kuler還得再提一下，Kuler有一個Adobe AIR應用程序，在本地直接運行此軟體既可以查看Kuler網站上的顏色主題。

說起來這個Adobe AIR真是個好東西，不認識它的同學請到這裡補補課，除了Kuler，我們PPT製作還能用得上的兩個軟體是Color Browser、Fractal4D和merlin，Color Browser功能很簡單，就是幫助你保存創建好的顏色主題，如果碰到了好的主題，就可以把它放到Color Browser里建成自己的配顏倉庫了。Fractal4D可以很隨意的畫出非常漂亮的線條，merlin可以幫你整理一下你混亂的字體（如果你的字體成百上千的話可以用用看），不過安裝這些軟體之前你需要安裝AIR平台，更多的AIR程序推薦請到這裡。

Kuler客戶端：

Color Browser:

Fractal4D：

強大的ColorSchemer Studio

當然，如果你在家。。呵呵，這些步驟都省了，般若黑洞強烈推薦你使用ColorSchemer Studio。這是Paralife感覺最為順手，最為靈活，也最為強大的配色工具。你可以使用色輪、上傳圖片、或者聯機搜索或者查看它網站上的主題並直接使用和修改，廢話不多說，截幾張圖看看：

這張是由圖片取色：

這張是色輪配色啦：

這張是直接從網站上載入主題：

是不是垂涎欲滴呢？不過很遺憾，它是收費軟體。你當然可以去下載一個破解版本，但Paralife建議如果你口袋裡有些銀子，還是物質上支持一下這個軟體的發展吧。

附：Additive color VS Subtractive Color

我們之所以能夠看到一個物體，大致可分為兩種情況：

1.物體本身發出的光線傳入到我們的眼睛裡，比如太陽、顯示器顯示的內容。

2.物體反射的光線傳入到我們的眼睛裡，比如月亮、書燈一切本身不發光的東西。

眾所周知光是一種電磁波，波長的不同決定了顏色的不同（或者更科學一點叫做色調），人眼能夠感知的波長在390nm~770nm之間，波長短於390nm的光為紅外光，長於770nm的光為紫外光。

所以我們看到一個物體為某種顏色，比如紅色，就存在兩種可能性：1.物體反射到我們眼中的光為紅色。2.物體本身發出的光為紅色。那麼為何物體會反射紅色的光呢？因為其他顏色的光被它吸收掉了。可以想見，對於油漆、顏料這類東西，如果將多種顏色混合起來，我們得到的會是黑色或者灰色（這是因為不同顏色的物料吸收了不同顏色的光，多種顏色的物料即吸收了多種顏色的光）。而如果將多種顏色的光源放到一起，從很遠的地方看來，則應該為白色了，因為這時候我們眼睛接收到了很多不同顏色的光。對於以上兩種顏色方式，我們稱前者為消減色（subtractive color），後者為加和色（additive color）。消減色原理用在塗料、顏料、染料等場合，而加和色則用於計算機顯示等領域。

個人感覺淡青色和淺灰色讓眼睛會舒服一些。。。

最常見的藍色調，藍色感覺時間會比實際時間短~ 再有淺色系列也會減輕心理負擔

不要糾結了，你的網站就算用一些css框架比如bootstrap做的都比你現在的要好，所以要麼你就用白色，去掉一切多餘；要麼就簡單點用現成的css樣式方案。

明度相同的顏色放在一起會產生衝突、易採用不同明度的組合看過去比較舒適，

另可以考慮不同配色方案，比如單色不同明度配色、互補色、分裂互補色，間色配色等

我的小站就是用的#f4f4f4，布局很簡單，感興趣可以看下，就是簡介里的這個。

顏色總體上分為暖色與冷色，暖色容易使人興奮同時也易使人眼疲勞；

相對而言，冷色調可能更適合您的選擇。

可以選擇類似知乎的藍色、騰訊朋友的綠色等色彩作為參考，但不建議您在同一畫面上使用過多的色彩，一方面容易造成主次不清，一方面感覺比較混亂。

淺見。。