2020-12-31 周周
當今是色彩的世界，物體顏色的不同，帶給我們的情緒也截然不同。想要掌握顏色，首先就要研究顏色的本質。
顏色分為光學三原色和顏料三原色。
1. 光學三原色
光學三原色由：紅、綠、藍組成。
色值分別是：
2. 顏料三原色
顏料三原色由：品紅、黃、青組成。
色值分別是：
理論上，原色可以調制出絕大部分的其他色，而其他色都調不出原色。
那么，這兩種有什么區別呢？
3. 區別
光學三原色和顏料三原色最主要的區別就是他們的混合原理不同，分為相加混色和相減混色。
光學三原色為相加混色（可以理解為光的疊加），混合后顏色的明度提高，三色混合即為白色。
相反，顏料三原色采用相減混色（可以理解為光的吸收），混合后顏色的明度和純度都會下降，三個混合即為黑色。
在設計中我們可以區分為 RGB（光學三原色）和 CMYK（顏料三原色）。
RGB 模式本質上與 CMYK 模式沒有區別，只是產生顏色的方式不同。顯示器采用RGB模式，就是因為顯示器是電子光束轟擊熒光屏上的熒光材料發出亮光從而產生顏色，當沒有光的時候為黑色，光線加到最大時為白色。而打印機呢？它的油墨不會自己發出光線。因而只有采用吸收特定光波而反射其它光的顏色，所以需要用減色法來解決。
運用場景：
冷暖色由三種原色、三種間色和六種復色組成的系統就稱為十二色環，從紫色至黃綠為冷色，黃色至紫色為暖色。
冷色可以讓人聯想到海洋、天空、雨雪等，讓人產生理智、寒冷、沉寂的感覺。
暖色可以讓人聯想到火焰、太陽等，讓人產生溫暖、熱情、開放的感覺。
實際案例中，冷暖色調的搭配，直接決定了觀賞者的第一感官。觀賞者第一眼的情緒感觸，就由此而來。
顏色的三個屬性分別為：色相（Hue）、明度（Brightness）、飽和度（Saturation）。
1. 色相
色相指的是這些不同波長的色的情況。波長最長的是紅色，最短的是紫色。
色彩是由于物體上的物理性的光反射到人眼視神經上所產生的感覺。色的不同是由光的波長的長短差別所決定的。把紅、橙、黃、綠、藍、紫和處在它們各自之間的紅橙、黃橙、黃綠、藍綠、藍紫、紅紫這 6 種中間色——共計 12 種色作為色相環。在色相環上排列的色是純度高的色，被稱為純色。
2. 明度
明度是表示色所具有的亮度和暗度。計算明度的基準是灰度測試卡。黑色為 0，白色為 10，在 0~10 之間等間隔的排列為 9 個階段。
色彩可以分為有彩色和無彩色，但后者仍然存在著明度。作為有彩色，每種色各自的亮度、暗度在灰度測試卡上都具有相應的位置值。彩度高的色對明度有很大的影響，不太容易辨別。在明亮的地方鑒別色的明度比較容易的，在暗的地方就難以鑒別。
3. 飽和度
飽和度是用數值表示色的鮮艷或鮮明的程度。
飽和度為 0 時，就是黑白灰。有彩色的各種色都具有彩度值，無彩色的色的彩度值為0，對于有彩色的色的彩度（純度）的高低，區別方法是根據這種色中含灰色的程度來計算的。
1. 單色
單色指的是某個顏色純度的變化，就是在原有色上疊加 10%~90% 的白色/黑色得到的一個顏色。
這種方法運用到產品中，會給人一種樸素、低調干凈的感覺；同時，也會給人一種單調的感覺。單色的顏色搭配適合沉浸式的產品中使用，不會因為色彩而打亂用戶的體驗。
產品案例：MUJI
2. 互補色
互補色是指在色相環上對立（180°）的兩個顏色。
色彩中的互補色有紅色與綠色互補，藍色與橙色互補，紫色與黃色互補。
補色并列時，會引起強烈對比的色覺，會感到紅的更紅、綠的更綠。
互補色是很難把控的一種色彩搭配。由于色彩沖擊力極強，用好了可以達到視覺峰值，反之則會很“村氣”
3. 鄰近色
鄰近色是指在色環上相鄰的兩三個顏色，在色相環上相距 60°
它們色相彼此相近，冷暖性質一致、色調統一和諧、感情特性一致。鄰近色是選擇相近色彩時很不錯的方法，可以在同一個色調中制造豐富的質感和層次。一些效果不錯的色彩組合有藍綠色、藍色和藍紫色，還有黃綠色、黃色和橘黃色等。
4. 對比色
對比色是人的視覺感官所產生的一種生理現象，是視網膜對色彩的平衡作用。指在相環上相距 120° 到 180° 之間的兩種顏色。
對比色能使色彩效果表現更明顯，形式多樣，極富表現力。需要注意的是，互補色一定是對比色，但是對比色不一定是互補色。
1. 光源色
物體只有在光的照射下我們才能看到他們的顏色。
發光體發出的光，形成了不同的色彩，我們將這些色光稱之為光源色。
2. 固有色
固有色就是我們平時看到物體的顏色。
比如在正常光照下我們看到一個物體是紅色，那他的固有色就是紅色。
3. 環境色
環境色是物體周圍環境的顏色。
環境色對我們看到物體顏色的影響非常大。大家平時肯定也遇到過一個物體在不同的光照下，呈現出來的物體顏色也不盡相同。比如，一個在藍色天空下的蘋果會呈現部分淡藍色，就是環境色的影響。
1. RGB
RGB 色彩模式是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。
2. HSB
在 HSB 模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示明度。
3. HSL
在 HSL 模式中，H(hues)表示色相，S(saturation)表示飽和度，L（Lightness）表示明度。
4. HSB 和 HSL 的區別
HSB 和 HSL 都是表示色相、飽和度和明度，不同的點在于應用開發中，不同開發語言下可調節的明度值名詞不同，所以這兩個格式不用過于糾結哪個用的更多，具體使用中就是需要哪個用哪個。
1. 黑色
黑色代表著品質、權威、嚴肅、穩重、高級。它是所有顏色中最有力量的，黑色+金色凸顯高貴感，黑色+紅色凸顯時尚感。
黑色是永不過時的顏色。
2. 白色
白色代表純潔、信任、樸素、簡單。黑色和白色經常會被用作無色，這兩個顏色沒有色彩傾向，屬于中性色，所以常常被忽略掉。在界面設計中，白色常常被用作背景色，提高畫面明度，凸顯其他內容，提高文字的易讀性。
3. 紅色
紅色代表喜慶、熱情、奔放、自由、歡樂。它是很強勢的顏色，一出現就會使人熱血沸騰，常常出現在電商活動中，讓人有購物的沖動。同時，紅色也有一種警告的含義。一些產品高危操作的 Button，都是用紅色來提醒用戶。
4. 藍色
藍色代表冷靜、商務、未來、科技、安全，它是一種比較理智的顏色，在色彩心理學的測試中發現，幾乎沒有人對藍色反感。主色調用藍色的太多了：知乎、Twitter、Behance、釘釘等，藍色的運用給用戶一直安全、放心的感覺。
5. 黃色
黃色代表輝煌、高貴、信心。它的明度極高，雖然沒有紅色給人那么強烈的感官，但是黃色給人一種警示的意思。黃色經常會以高貴的含義被用到：網站的 VIP。
6. 綠色
綠色代表健康、活力、生命、安全、和平、寧靜。綠色可以治愈心靈，當你不開心的時候，看一下綠色的東西，會讓你的愉悅值增加。它在生活中用到最多的含義是安全：綠色通道、綠燈等。
7. 紫色
紫色代表浪漫、時尚、性感、夢幻、創造力。紫色+粉色經常在女性化妝品被用到，紫色在自然生活中很少看到，所以也有一種稀有、高貴的感覺。
1. 數量
一個頁面中盡量不要超過 3 種顏色（黑白除外），顏色過多會讓用戶的興奮值上升，不易長期查看。
2. 統一性
每一個產品都有自己的主色調，所有的頁面的色彩搭配都要和主色調呼應，主色調的合理運用直接關系到用戶對產品的信任值。同一組件、場景中，顏色使用要保持一致，切忌“自由發揮”，毫無規范可言。
3. 60-30-10原則
60%、30%、10% 的原則，是達到色彩平衡的最佳比例。在 60% 的空間使用主色，可以運用到導航欄、按鈕、圖標等關鍵的元素中，使之成為整個 App 的視覺焦點和色彩關系；30% 的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10% 的空間為點綴色，可以用在一些不太重要的元素又需要區分的時候。6:3:1 原則構建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。
4. 顏色禁忌
禁用純黑、純灰，純黑和純灰會使用戶陷入負面情緒中，可以在黑色和灰色中加入一些色調，讓顏色看上去更柔和，另外純黑色看時間久了會使人疲憊，在實際產品中，也很少有用純黑的。
5. 文字中的使用
超鏈接顏色用藍色，為什么呢？
最早期電腦中用的是深灰色背景+黑色字，那時候能用非黑色最深的顏色就是藍色，所以這個習慣一直延續至今。這種用戶習慣非常一致的情況下，盡量不要去改顏色，因為改成別的顏色就會顛覆用戶認知，學習成本就會增加。
6. 卡片陰影
一定不要用純黑色陰影，陰影的顏色會受到環境色和固有色的影響，對于有顏色卡片的背景，盡量使用比卡片更深的同色系顏色來調陰影，會使得陰影更干凈、整潔。
1. Wbgradients
網站鏈接：https://webgradients.com/
Wbgradients 是一個在線調整漸變色的網站 ，可以根據你想要的調整效果，同時支持復制 CSS 代碼，可以更好的與開發對接。
網站鏈接：https://www.grabient.com/
Grabient 是一個非常漂亮且實用的漸變配色網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。設計師可以在色塊下方自由添加和調整漸變的色系、以及線性漸變方向。
3. Color Grid
網站鏈接：https://www.0to255.com/740941
該網站隨意選色值，它自動換算出已選色值的 32 種明度色值，簡單易用。
4. Eva Design System
網站鏈接：https://colors.eva.design/
Eva Design System 是一個基于深度學習算法的配色網站。適用于給我們的產品或品牌生成一個系統的配色方案。右上角可以切換淺色模式和深色模式的對比。
5. Color Hunt
Color Hunt 是開放的調色板集合，可以添加到 chrome 瀏覽器，方便隨時隨地使用。
文章來源：優設網 作者：友設青年
藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務