色彩三要素
色盲檢測
要搭配出好看的色彩，首先不能是一個色盲
色彩
無色彩系，是黑白灰，二種顏色元素，是除了黑白灰以外的，所有色彩，共同組成了顏色體系。
色相
最初的基本色相為紅、橙、黃、綠、藍、紫，在各色中間加插一兩個中間色，其頭尾色相。按光譜順序為：紅、橙色、黃橙、黃、黃綠、綠、綠藍、藍綠、藍、藍紫、紫。紅紫、紅和紫中再加個中間色，可制出十二基本色相。
飽和度
就是色彩的濃度，或者說是鮮豔程度。越鮮豔的色彩通常就被認為越飽和。
明度
也叫色度，指的是色彩的明暗程度。不同色彩有不同的明度，即使同一種色彩，其明度也有不同。
三原色：紅、黃、藍
所有顏色的源頭被稱為三原色，三原色指的是紅色、黃色和藍色。
如果我們談論的是屏幕的顯示顏色，比如顯示器，三原色則分別是紅色、綠色和藍色，也就是我們熟悉的RGB。
間色、複色（三級顏色）
如果將紅色和黃色、黃色和藍色、藍色和紅色均勻混合，就會創建三種間色：綠色、橙色和紫色。
將這些顏色應用進項目中，可以提供很強烈的對比。
三次色來源於間色與原色的混合，主要有：紅紫色、藍紫色、藍綠色、黃綠色、橙紅色和橙黃色
同類色、鄰近色
同類色指色相性質相同，但色度有深淺之分。（是色相環中15°夾角內的顏色）
近似色
同類色指相性質相同，色度深淺比較明顯（是指色相環中夾角50°左右的兩種近似色）
對比色
對比色是人的視覺感官所產生的一種生理現象，是視網膜對色彩的平衡作用。
指在24色相環上相距120°-180°之間的兩種顏色，稱為對比色。
補色
又稱互補色，餘色，亦稱強度比色，就是兩種顏色（等量）混合後呈黑灰色，那麼這兩種顏色一定互為補色。色環的任何直徑兩端相對之色都稱為互補色。
冷、暖、中性色
色彩學上根據心理感受，把顏色分為暖色調（紅、橙、黃），冷色調（青、藍）和中性色調（紫、綠、黑、灰、白）
冷色
青色、藍色、藍紫色等等都屬於冷色系列。
冷色一般跟白色調和可以達到很好的視覺效果，
冷色一般應用於一些高科技、高品質、理性類頁面設計中。
暖色
黃色、橙色、紅色等都屬於暖色系列。暖色跟黑色調和可以達到很好的效果。
暖色一般應用與女性、兒童、食品類等。
也可以體現商品的琳琅滿目，熱情活潑、溫馨等。
同類色和近似色搭配
如黃綠色、黃色和潔色等。近似色的搭配給人的視覺效果很舒適，很自然。所以近似色在設計中極為常見。（註：在用近似色時，要適當加強對比，不然會使畫面顯得平淡）
對比色和補色搭配
最突出，最引人注目的搭配，有強烈的視覺衝擊！
（註：互補色之間的強烈對比，會引起色彩的顫動和不穩定感，處理不好會使頁面衝突，破壞整體感。對於互補色，調整一下互補色的亮度，或者調整互補色的使用面積。有時候是一種很好的搭配）
三角形搭配
使得畫面生動的搭配方式。
在使用三角形搭配方式時，一定要選出一種色彩作為主色，別外兩種作為輔色。
分裂互補色搭配
這是互補搭配的變體，本質是用類似色來代替互補色中的一個顏色，以達到既有互補色對比強烈的特點，又彌補了不穩定的缺點。
對初學者來說是非常好用的搭配方式，畫面對比強烈又不容易產生混亂。
四方色/四方補色
四方色是在色輪上畫一個正方形，取四個角的顏色。
這個顏色超棒，尤其是使用其中一個顏色作為主色，其他的三個顏色作為輔助色的時候。
四立補色和四方色的差別在於四方補色採用的是一個矩形。
通過一組互補色兩旁的顏色建立的色彩組合。
常見色彩搭配方法
色相變化
明度變化
飽和度變化
清晰度變化
案例分析
觀察1
觀察食品頁面的色彩搭配方式、色相、明度、飽和度的應用
觀察2
觀察食品頁面的色彩搭配方式，色相、明度、飽和度的應用
欣賞
多看多練多模仿，首先你得有一個好的欣賞水平
配色小技巧
提取色彩
找圖
關鍵步驟，確定自己想要的風格，找大量的符合風格要求的圖片，進行對比篩選，選出最符合自己要求的幾張圖片開始色彩的提取。
找了一張色彩豐富，精神狀態積極向上，尺寸超大的圖片。
提取顏色
把選中的圖片放入PS中，點擊「存儲為WEB所用格式」
（如果沒有色彩非常合適的圖，可以再PS裡適當的調整顏色再進行顏色提取）
格式選為PNG-8，色塊選擇8
色彩應用
（先看圖）讓圖形、文字、色彩相互協調，而不是做排列顏色的色譜。
分析
這個頁面和現在的主流網站框架差不多，從上到下主要分為三個部分，導航區域、BANNER、內容區。
網頁配色不宜超過三種
色相差異明顯，主要色彩的選取就比較好辦，常見的對比色、臨近色、冷暖色調互補等方式。
可以簡單設定，或直接從成功作品中借鑑主輔色配比都可以，比如常見的朱紅點綴深藍、明黃點綴深綠等。
模仿配色
找參考圖
模仿配色是一些不能完全自己把握配色的中初級設計師必須學會的技能！
在不斷的模仿中吸取經驗！首先，確定設計的方向，找到參考本色案例。
選定後找出參考顏色
因為是大促頁面，所以選擇了顏色比較豔麗的顏色來參考，利益點、主文案與背景對比強烈，衝擊力強！
套用顏色
既然前面的顏色參考已經選定，那接下來我們把它應用到頁面中去，所有色調全部複製過來，完全不需要再考慮配色問題。
輔助色選用
既然前面的顏色參考已經選定，那接下來我們把它應用到頁面中去，調整商品色相、明度、飽和度，讓色彩更加豐富。
快來投票啦~！讓小編更了解你們想要什麼~拉近彼此距離....
歡迎加Q交流感情~~
快來底下留言評論吧
推薦文章，得獎金：