哈咯，大家好敌卓！
我先做個自我介紹：
本人在帝都互聯(lián)網(wǎng)設(shè)計圈混跡 7 年有余，一直想做一些知識沉淀伶氢，無奈?太懶?工作太忙趟径，一直沒有落實。本篇文章是我的第一篇原創(chuàng)文章癣防，后續(xù)也會把自己的一些設(shè)計經(jīng)歷 /?經(jīng)驗分享給大家蜗巧，如果有緣你看到此文章，我們可以交個朋友蕾盯。
從此篇文章起幕屹，我們的故事就開始了~~~
本次分享的主題是：
【設(shè)計師必須掌握的色彩知識】
預(yù)計閱讀時間 15 分鐘，知識點較多刑枝，建議收藏慢慢看香嗓。
一? 顏色的本質(zhì)
當(dāng)今是色彩的世界，物體顏色的不同装畅，帶給我們的情緒也截然不同靠娱。想要掌握顏色，首先就要研究顏色的本質(zhì)掠兄。
顏色分為光學(xué)三原色和顏料三原色像云。
1）光學(xué)三原色
光學(xué)三原色由：紅、綠蚂夕、藍組成迅诬。
色值分別是：
紅（red ）：#FF0000? RGB（255，0婿牍，0）
綠（green）：#00FF00? RGB（0侈贷，255，0）
藍（blue）：#0000FF ?RGB（0等脂，0俏蛮，255）
2）顏料三原色
顏料三原色由：品紅撑蚌、黃、青組成搏屑。
色值分別是：
品紅（magenta）：#FF00FF ?CMYK（42争涌，64，0辣恋，0）
黃（yellow）：#F8F400? CMYK（0亮垫，11，92伟骨，0）
青（cyan）：#00FFFF? CMYK（38饮潦，0，16携狭，0）
理論上害晦，原色可以調(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ā)出光線秃励。因而只有采用吸收特定光波而反射其它光的顏色氏仗，所以需要用減色法來解決。
運用場景：
光學(xué)三原色：RGB模式夺鲜，燈光色彩中皆尔；
顏料三原色：CMYK模式呐舔，繪畫和印刷領(lǐng)域。
二? 冷暖色調(diào)
冷暖色由三種原色床佳、三種間色和六種復(fù)色組成的系統(tǒng)就稱為十二色環(huán)滋早，從紫色至黃綠為冷色，黃色至紫色為暖色砌们。
冷色可以讓人聯(lián)想到海洋杆麸、天空、雨雪等浪感，讓人產(chǎn)生理智昔头、寒冷、沉寂的感覺影兽。
暖色可以讓人聯(lián)想到火焰揭斧、太陽等，讓人產(chǎn)生溫暖峻堰、熱情讹开、開放的感覺。
實際案例中捐名，冷暖色調(diào)的搭配旦万，直接決定了觀賞者的第一感官。觀賞者第一眼的情緒感觸镶蹋，就由此而來成艘。
三? 顏色的三個屬性
顏色的三個屬性分別為：色相（Hue）、明度（Brightness）贺归、飽和度（Saturation）淆两。
1）色相
色相指的是這些不同波長的色的情況。波長最長的是紅色拂酣，最短的是紫色秋冰。
色彩是由于物體上的物理性的光反射到人眼視神經(jīng)上所產(chǎn)生的感覺。色的不同是由光的波長的長短差別所決定的踱葛。把紅丹莲、橙、黃尸诽、綠甥材、藍、紫和處在它們各自之間的紅橙性含、黃橙、黃綠、藍綠苛谷、藍紫独悴、紅紫這 6 種中間色——共計 12 種色作為色相環(huán)自沧。在色相環(huán)上排列的色是純度高的色孝偎，被稱為純色荡陷。
2）明度
明度是表示色所具有的亮度和暗度被唉地。計算明度的基準是灰度測試卡。黑色為 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°）的兩個顏色棺聊。
色彩中的互補色有紅色與綠色互補，藍色與橙色互補贞谓，紫色與黃色互補限佩。
補色并列時，會引起強烈對比的色覺裸弦，會感到紅的更紅祟同、綠的更綠。
互補色是很難把控的一種色彩搭配理疙。由于色彩沖擊力極強晕城，用好了可以達到視覺峰值，反之則會很“村氣”
3）鄰近色
鄰近色是指在色環(huán)上相鄰的兩三個顏色窖贤，在色相環(huán)上相距 60°
它們色相彼此相近砖顷，冷暖性質(zhì)一致、色調(diào)統(tǒng)一和諧主之、感情特性一致择吊。鄰近色是選擇相近色彩時很不錯的方法，可以在同一個色調(diào)中制造豐富的質(zhì)感和層次槽奕。一些效果不錯的色彩組合有藍綠色几睛、藍色和藍紫色，還有黃綠色粤攒、黃色和橘黃色等所森。
4）對比色
對比色是人的視覺感官所產(chǎn)生的一種生理現(xiàn)象，是視網(wǎng)膜對色彩的平衡作用夯接。指在相環(huán)上相距 120° 到 180° 之間的兩種顏色焕济。
對比色能使色彩效果表現(xiàn)更明顯，形式多樣盔几，極富表現(xiàn)力晴弃。需要注意的是，互補色一定是對比色逊拍，但是對比色不一定是互補色上鞠。
五? 色彩的視覺呈現(xiàn)
1）光源色
物體只有在光的照射下我們才能看到他們的顏色。
發(fā)光體發(fā)出的光芯丧，形成了不同的色彩芍阎，我們將這些色光稱之為光源色。
2）固有色
固有色就是我們平時看到物體的顏色缨恒。
比如在正常光照下我們看到一個物體是紅色谴咸，那他的固有色就是紅色轮听。
3）環(huán)境色
環(huán)境色是物體周圍環(huán)境的顏色。
環(huán)境色對我們看到物體顏色的影響非常大岭佳。大家平時肯定也遇到過一個物體在不同的光照下血巍，呈現(xiàn)出來的物體顏色也不盡相同。比如驼唱，一個在藍色天空下的蘋果會呈現(xiàn)部分淡藍色藻茂，就是環(huán)境色的影響。
六? 色彩格式
1）RGB
RGB 色彩模式是工業(yè)界的一種顏色標準玫恳，是通過對紅(R)辨赐、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的京办，RGB 即是代表紅掀序、綠、藍三個通道的顏色惭婿，這個標準幾乎包括了人類視力所能感知的所有顏色不恭，是目前運用最廣的顏色系統(tǒng)之一。
2）HSB
在 HSB 模式中财饥，H(hues)表示色相换吧，S(saturation)表示飽和度，B（brightness）表示明度钥星。
3）HSL
在 HSB 模式中沾瓦，H(hues)表示色相，S(saturation)表示飽和度谦炒，L（Lightness）表示明度贯莺。
4）HSB 和 HSL 的區(qū)別
HSB 和 HSL 都是表示色相、飽和度和明度宁改，不同的點在于應(yīng)用開發(fā)中缕探，不同開發(fā)語言下可調(diào)節(jié)的明度值名詞不同，所以這兩個格式不用過于糾結(jié)哪個用的更多还蹲，具體使用中就是需要哪個用哪個爹耗。
七? 不同顏色的感受
1）黑色
黑色代表著品質(zhì)、權(quán)威谜喊、嚴肅潭兽、穩(wěn)重、高級锅论。它是所有顏色重最有力量的，黑色+金色凸顯高貴感楣号，黑色+紅色凸顯時尚感最易。
黑色是永不過時的顏色怒坯。
2）白色
白色代表純潔、信任藻懒、樸素剔猿、簡單。黑色和白色經(jīng)常會被用作無色嬉荆，這兩個顏色沒有色彩傾向归敬，屬于中性色，所以常常被忽略掉鄙早。在界面設(shè)計中汪茧，白色常常被用作背景色，提高畫面明度限番，凸顯其他內(nèi)容舱污，提高文字的易讀性。
3）紅色
紅色代表喜慶弥虐、熱情扩灯、奔放、自由霜瘪、歡樂珠插。它是很強勢的顏色，一出現(xiàn)就會使人熱血沸騰，常常出現(xiàn)在電商活動中尚洽，讓人有購物的沖動其掂。同時，紅色也有一種警告的含義布讹。一些產(chǎn)品高危操作的 Button，都是用紅色來提醒用戶训堆。
4）藍色
藍色代表冷靜描验、商務(wù)、未來坑鱼、科技膘流、安全，它是一種比較理智的顏色鲁沥，在色彩心理學(xué)的測試中發(fā)現(xiàn)呼股，幾乎沒有人對藍色反感。主色調(diào)用藍色的太多了：知乎画恰、Twitter彭谁、Behance、釘釘?shù)仍噬龋{色的運用給用戶一直安全缠局、放心的感覺则奥。
5）黃色
黃色代表輝煌、高貴狭园、信心读处。它的明度極高，雖然沒有紅色給人那么強烈的感官唱矛，但是黃色給人一種警示的意思罚舱。黃色經(jīng)常會以高貴的含義被用到：網(wǎng)站的 VIP。
6）綠色
綠色代表健康绎谦、活力管闷、生命、安全燥滑、和平渐北、寧靜。綠色可以治愈心靈铭拧，當(dāng)你不開心的時候赃蛛，看一下綠色的東西，會讓你的愉悅值增加搀菩。它在生活中用到最多的含義是安全：綠色通道呕臂、綠燈等。
7）紫色
紫色代表浪漫肪跋、時尚歧蒋、性感、夢幻州既、創(chuàng)造力谜洽。紫色+粉色經(jīng)常在女性化妝品被用到，紫色在自然生活中很少看到吴叶，所以也有一種稀有阐虚、高貴的感覺。
八? 色彩在設(shè)計中的應(yī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% 的原則歹嘹，是達到色彩平衡的最佳比例。在 60% 的空間使用主色孔庭，可以運用到導(dǎo)航欄尺上、按鈕、圖標等關(guān)鍵的元素中圆到，使之成為整個 App 的視覺焦點和色彩關(guān)系怎抛；30% 的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞芽淡；最后剩下 10% 的空間為點綴色马绝，可以用在一些不太重要的元素又需要區(qū)分的時候。6:3:1 原則構(gòu)建了一種豐富的色彩層次挣菲，讓界面看上去和諧富稻、平衡和不雜亂。
4）顏色禁忌
禁用純黑白胀、純灰椭赋，純黑和純灰會給使用戶陷入負面情緒中，可以在黑色和灰色中加入一些色調(diào)或杠，會讓顏色看上去更柔和哪怔，另外純黑色看時間久了會使人疲憊，在實際產(chǎn)品中向抢，也很少有用純黑的认境。
5）文字中的使用
超鏈接顏色用藍色，為什么呢挟鸠？
最早期電腦中用的是深灰色背景+黑色字叉信，那時候能用非黑色最深的顏色就是藍色，所以這個習(xí)慣一只延續(xù)至今兄猩。這種用戶習(xí)慣非常一致的情況下茉盏，盡量不要去改顏色，因為改成別的顏色就會顛覆用戶認知枢冤，學(xué)習(xí)成本就會增加鸠姨。
6）卡片陰影
一定不要用純黑色陰影，陰影的顏色會受到環(huán)境色和固有色的影響淹真，對于有顏色卡片的背景讶迁，盡量使用比卡片更深的同色系顏色來調(diào)陰影，會使得陰影更干凈核蘸、整潔巍糯。
九? 配色網(wǎng)站推薦
1）https://webgradients.com/
Wbgradients 是一個在線調(diào)整漸變色的網(wǎng)站 啸驯，可以根據(jù)你想要的調(diào)整效果，同時支持復(fù)制 CSS 代碼祟峦，可以更好的與開發(fā)對接罚斗。
2）https://www.grabient.com/
Grabient 一個非常漂亮且實用的漸變配色網(wǎng)站，支持 CSS 樣式代碼復(fù)制宅楞、360度漸變旋轉(zhuǎn)针姿、自由增加或刪除漸變顏色等功能。設(shè)計師可以在色塊下方自由添加和調(diào)整漸變的色系厌衙、以及線性漸變方向距淫。
3）https://www.0to255.com/740941
該網(wǎng)站隨意選色值，它自動換算出已選色值的 32 種明度色值婶希，簡單易用榕暇。
4）https://colors.eva.design/
Eva Design System 是一個基于深度學(xué)習(xí)算法的配色網(wǎng)站。適用于給我們的產(chǎn)品或品牌生成一個系統(tǒng)的配色方案喻杈。右上角可以切換淺色模式和深色模式的對比彤枢。
5）https://colorhunt.co/
Color Hunt 是開放的調(diào)色板集合，可以添加到 chrome 瀏覽器筒饰，方便隨時隨地使用堂污。
End
未經(jīng)許可，嚴禁轉(zhuǎn)載龄砰！
好了盟猖，文章到此結(jié)束！
如有疑惑换棚，可以加我好友或者在評論區(qū)留言式镐！
如果覺得有用，可以分享給身邊的設(shè)計師朋友固蚤。
你的認可是我最大的動力娘汞。
走之前點個贊吧！
我們下期見~~~
