網頁設計的顏色理論

一：每種顏色代表的情感

#顏色分為暖色（紅色/橙色/黃色），冷色（藍色/紫色），中性色（黑色/白色/灰色）。暖色更刺激，冷色能夠使人鎮定#

#紅色：最刺激的顏色，用來獲取注意力和提高警惕。作為能量色，被用來象徵權力和年輕活力，對於想打造休閑感的站點不適用#

#橙色：帶有紅色的能量屬性，但是要稍微鎮定一些。通常用於展示興奮和娛樂性#

#黃色：溫暖有活力，明亮的黃色極其富有刺激性，中性黃色更加熱情，深黃有種復古和永恆的氣息#

#綠色：居於暖色和深色之間，綠色混合了能量和舒適。典型象徵積極上升趨勢，在西方國家代表金錢和環境#

#淺藍：友好、安全、誘人，Facebook和twitter都使用了這個顏色#

#深藍：鎮定，但是比淺藍更可靠、憂鬱。專業性強的公司比較實用#

#紫色：皇家的顏色，紫色能引出奢華的感覺，甚至頹廢。淺紫散發出浪漫，深紫展現出神秘元素#

#黑色：所以顏色中最強的顏色，所以字體和文本使用這個顏色。能夠撐起周圍的顏色，單獨使用可以創造力量和精緻感#

#白色：作為主色調，白色釋放出乾淨、純潔無暇。作為次要色，能夠讓人更加註意刺激元素，因此完美適用於支撐色#

#灰色：灰色代表中立，在大師手中最能展現功力#

二：對比和補充：顏色組合的藝術

#對比色：在顏色轉盤上相隔至少兩格（見下圖）。用來吸引注意力或者將某顏色分離，適用於「召喚行動」#

#互補色：能夠創造愉悅的美感，顏色轉盤對面的顏色就是互補色（見下圖），同一種顏色的不同深淺也可以作為互補色。當兩個互補色並列開來，他們會將對方代表的情感推向極端。紅色放在綠色旁邊，會顯得更加「刺激、激進、有力量」，綠色也會顯得更加舒適。#

三：配色方案：混合顏色的最佳方法

#單一色：只使用一種顏色，或者同一顏色的不同層次。單一配色能夠產生視覺愉悅並增強呼應感，但是很難將單個元素分隔開來。由於極簡主義非常強調內容，單一配色方案經常用於極簡主義設計#

#相似色：相似色比單一配色更具有多樣性，更加容易區分元素。採用相似色配色的網站給人鎮定和和諧感，相似色在大自然中很常見。採用相似配色方案的網站通常會選取一種主色調，主色調的情感連寫最為強烈。次級色用來區分特定元素，如果還有第三種顏色那僅僅用來表示強調#

#互補色：互補色使用相對的顏色創造動態感和感官刺激頁面。這種配色方案的優勢是各個元素能夠明顯區分，創造層次感。使用互補色時盡量不要降低飽和度，否則會降低效果。#

#三色系：三色系是最安全的配色方案，轉盤上三個角的顏色能夠確保視覺平衡，採用三色系的網站在配色上雖略顯創意不足但是卻十分安全。大多設計師認為三色系是最好的配色方案，但是還要看項目的具體情況，對於用戶範圍很廣的網站這是非常好的選擇，略帶愉悅感的同時不顯乏味。然而，由於缺少對立，在單個元素的吸引力上效果會降低。並且安全的同時意為著缺少激進 — 這種時尚和音樂網站需要風格。醫療網站適用於這種配色方案。#

#分撒互補色系：分散互補色系帶有互補色的特徵如吸引力，同時創造了顏色的多樣性。如今的網頁有很多採用這種配色方案，最普遍的是使用黑白作為支撐色，第三個顏色用來突出單個元素（通常紅色或綠色）。如果需要更加風格化的效果，可以將三個色顏色加深#

#矩形互補色：由兩對互補色組成，想要用好是有一定難度的。選擇顏色的時候要盡量平衡暖色和冷色。#

四：一些顏色工具

#Stylify ME：輸入網址就能解析出網站使用的所有顏色，並給出具體的色值，參考其他網站配色的神器#

#Adobe Color CC：老牌的配色輔助工具（前身是 Kuler）#

#flatuicolorpicker：扁平 UI 顏色拾取器，快速方便的顏色選取工具#

#Pletton：新手實戰利器，確定單個顏色的不同方案#

#Material Palette：物料設計配色方案推薦，選擇兩種顏色自動輸入配色值，Material Design 配色神器#

#Coolors：生成複雜的配色方案，比其他工具要複雜一點#

#Color Combos：網頁設計配色論壇，可以閱讀博客，瀏覽案例並獲取其他資源#

註：以上部分網站需要科學上網