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