沒有難看的顏色，只有難看的搭配每一種顏色有其獨(dú)特的作用，令人產(chǎn)生不同的情感。合理使用色彩可以取得宜人的效果。

一、色彩的基本認(rèn)知（本模塊設(shè)計(jì)小白可以了解一下，有基礎(chǔ)的略過）        1、色彩由色相、飽和度、明度三要素構(gòu)成

 色相(Hue)

即各類色彩的相貌稱謂，如大紅、普蘭、檸檬黃等。色相是色彩的首要特征，是區(qū)別各種不同色彩的最準(zhǔn)確的的標(biāo)準(zhǔn)。事實(shí)上任何黑白灰以外的顏色都有色相的屬性，而色相也是由原色、間色和復(fù)色來構(gòu)成。

 

飽和度(Saturation)

飽和度是指色彩的鮮艷程度，也稱色彩的純度。飽和度取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大，飽和度越高；消色成分越大，飽和度越低。

 

明度(Brightness）

明度是眼睛對光源體和物體表面的明暗程度的感覺，主要有由光線強(qiáng)弱決定的一種視覺經(jīng)驗(yàn)。明度不僅取決于物體照明程度，而且取決于物體表現(xiàn)的反射系數(shù)。

 

2、配色的基本認(rèn)識(shí)

 

基本色環(huán)(Color Wheel）

按照光譜順序?yàn)椋杭t、橙紅、黃橙、黃、黃綠、綠、綠藍(lán)、藍(lán)、藍(lán)紫、紫、紫紅、紅和紫中間在加個(gè)中間色。在色相環(huán)的圓圈里，各種色調(diào)按照不同角度排列，則十二色相環(huán)每一色相距30度，24色相環(huán)每一色相距15度。

 

同一色

色相環(huán)中的任意色因明度變化而呈現(xiàn)的色彩。顏色混合是通過在色彩中加入黑、白、灰形成的。統(tǒng)一色調(diào)，色彩的純度和明度是具有共同性，明度按照色相略有變化。

同色系配色是指主色和輔色都在同一色相上，這種配色方法往往會(huì)給人頁面很一致化的感受

 

同類色

同類色又稱類似色。色相環(huán)原色起45度以內(nèi)，含有較多共同的色彩元素的色彩，同類色指色相性質(zhì)相同，但色度有深淺之分。

 

相鄰色

色相環(huán)中相距90度，或者相隔五六個(gè)數(shù)位的兩色，為鄰近色關(guān)系，屬中對比效果的色組。色相彼此近似，冷暖性質(zhì)一致，色調(diào)統(tǒng)一和諧，感情特性一致。

相鄰色不同于同一色的枯燥乏味。稍微跳動(dòng)的的色彩也一樣保持著設(shè)計(jì)的穩(wěn)定性，還能起到強(qiáng)調(diào)單獨(dú)作品的作用

 

對比色

指色相環(huán)上色相對比較大、純度較高的任意兩色。對比色之間無過多的共性，對比效果強(qiáng)烈。當(dāng)對比的兩色具有相同的彩度和明度時(shí)，對比效果越明顯；兩色越接近補(bǔ)色，對比效果越強(qiáng)烈。

主導(dǎo)的對比配色需要精準(zhǔn)掌控色彩搭配和面積，其中主導(dǎo)色會(huì)帶動(dòng)頁面的氣氛，產(chǎn)生激烈的心理感受。

 

補(bǔ)色

補(bǔ)色又稱互補(bǔ)色、余色，亦稱強(qiáng)度比色，就是兩種顏色(等量)混合后呈現(xiàn)黑灰色，那么這兩種顏色以定位互補(bǔ)色。色環(huán)的任何直徑兩端相對之色都稱為互補(bǔ)色

補(bǔ)色對比由于色彩過于沖撞，很少用戶傳統(tǒng)網(wǎng)頁界面，一般用于活動(dòng) banner，起到吸引用戶眼球的作用。

二、HSB色彩模型

1、什么是HSB色彩模型

如果你寫過HTML和CSS，那么肯定熟悉RGB，三個(gè)字母分別表示：R(紅)、G(綠)、B(藍(lán))。這種方式對電腦來說非常直接明了，也是電腦理解顏色的默認(rèn)方式。對電腦友好并不意味對人類易用，這也是HSB誕生的原因。

HSB代表色相(Hue) - 飽和度(Saturation) - 明度(Brightness)，又稱HSV，是一種更人性化的顏色描述方式。為什么這么講？因?yàn)樗c人們描述顏色的自然方法一致。

 

2、HSB色彩模式設(shè)置及優(yōu)點(diǎn)

1)、比起 RGB 系統(tǒng)，HSB使用了更貼近人類感官直覺的方式來描述色彩 ，對于設(shè)計(jì)師來說更容易理解

 

HSB 的概念很接近色彩學(xué)所常使用的色彩空間模型，由于是由三個(gè)屬性所組合而成，因此常以色立體表示，

但由于我們常用的操作系統(tǒng)依然為二度空間的系統(tǒng)，因此在計(jì)算機(jī)系統(tǒng)的選色接口中常以不同的接口出現(xiàn)，我想其實(shí)大家都很熟悉，像是下圖為sketch中的選色器，可以看見一個(gè)全彩的色相條，和一個(gè)顏色的窗口，滑動(dòng)色相條即可得到不一樣的顏色

 

2)、HSB可以更加科學(xué)地保證設(shè)計(jì)師所使用的不同顏色處于同一明度和飽和度，使用戶的視覺體驗(yàn)感更好

也許你會(huì)覺得 HSB 并沒有比較簡單，但是實(shí)際使用過就會(huì)發(fā)現(xiàn)，它是多么的好用。例如下圖的男女比例的背景色塊，如果用RGB調(diào)色只能通過設(shè)計(jì)師的眼睛和經(jīng)驗(yàn)來調(diào)整他們是否處于同樣的色調(diào)中，但是用HSB來調(diào)色，保持S和B值相同，只需要滑動(dòng)色相條即可得到完全一樣的色調(diào)，省時(shí)省力還科學(xué)

                   

 

三、色彩使用規(guī)則

       

1、色調(diào)的分類

色調(diào)（color tone）是不同色相但是具有同樣亮度和純度的顏色進(jìn)行的分組，

     

 

極淺vp（very pale）色調(diào)：

是純度最低、亮度最高的，干凈清淡的顏色，給人清的，柔弱的，女性的，年輕的，淡的，可愛的印象。

 

亮灰色lg（light grayish）色調(diào)：

純度低，中高亮度的色調(diào)，給人高貴、安定、古樸的印象和輕柔的感覺。

 

中灰色mg（medium grayish）色調(diào)：

低純度中亮度，具有濁，不起眼，古樸，穩(wěn)健，安定的氣氛。

 

深灰dg（dark grayish）色調(diào)：

低純度和中低亮度，給人漂亮、安定、自然的感覺。

 

極暗vd（very dark）色調(diào)：

是純度和亮度都最低的色調(diào)，具有厚重牢固的感覺，給人非常暗，陰暗，厚重，堅(jiān)固、男性的印象。

 

淺的pl（pale）色調(diào)：

中純度和高亮度的色調(diào)，給人干凈、淺、爽朗的感覺。

 

柔軟sf（soft）色調(diào)：

中純度和中高亮度，給人穩(wěn)健溫柔的感覺。相比淺色給人感覺更安定。

 

晦暗dl（dull）色調(diào)：

中純度和中亮度的色調(diào)，給人安心高雅的感覺，一般說的中間色就是晦暗色調(diào)。

 

暗dk（dark）色調(diào)：

中純度和低亮度的色調(diào)，具有結(jié)實(shí)，成熟，古樸的色調(diào)印象。

 

亮It（light）色調(diào): 

高純度高亮度的色調(diào)，具有明亮、健康、活潑，年輕而穩(wěn)定的印象。

 

強(qiáng)st（strong）色調(diào)：

高純度和中高亮度的色調(diào)，充滿活力，冗長，熱情，開放的印象。

 

深dp（deep）色調(diào)：

高純度和低亮度的色調(diào)，具有力量感和深度，給人深的，濃的，傳統(tǒng)的等印象。

 

活潑VV（vivid）色調(diào)：

高純度和中亮度的色調(diào)，較為鮮艷，鮮明，華麗，鮮艷，鮮活的印象。

 

2、色調(diào)配色技巧

同色相環(huán)配色技巧原理一樣，色調(diào)也有3種基本的配色技巧。

 

1）同色調(diào)的配色：

同色調(diào)的顏色幾乎沒有亮度和純度差，是比較容易統(tǒng)一和協(xié)調(diào)的配色。

     

 2）鄰近色調(diào)配色：

具有一定的亮度和純度差但是差值不大，比較容易調(diào)和，容易傳達(dá)原有印象。有縱向鄰近、橫向鄰近、和斜向鄰近三種。

     

3）對比色調(diào)配色：

亮度與純度差很大，是極具張力的配色方法。是色調(diào)圖上相隔很遠(yuǎn)的色調(diào)的配色。自由選擇色相，有亮度對比、純度對比、亮度和純度對比這三種配色方式。

      

配色網(wǎng)站推薦

推薦是三個(gè)比較好用的、簡單操作的配色網(wǎng)站，有需要的可以收藏

1、coolors.co

2、designspiration.com

3、materialpalette.com

四、常用色分析

除了醫(yī)療作用外，顏色還有一定的象征意義和社會(huì)屬性，對人類生活有著舉足輕重的影響。顏色心理學(xué)領(lǐng)域的佼佼者，美國羅切斯特大學(xué)安德魯.埃利奧特說，以前從來沒有人做過這種聯(lián)系。他表示：“顏色研究表明的是，我們的行為會(huì)受到我們沒有留意，習(xí)以為常的事物的影響?！?/span>

據(jù)國外媒體報(bào)道，人們常常認(rèn)為，穿著紅色服裝是自信的表現(xiàn)。同時(shí)，科學(xué)家們也認(rèn)為，運(yùn)動(dòng)員身穿紅色運(yùn)動(dòng)服更容易取得好成績。然而，英國羅徹斯特大學(xué)的安德魯·埃里奧特等人開展的一項(xiàng)最新研究卻顯示，紅色會(huì)抑制人們思維的活躍性。

埃里奧特和他的研究小組共對一些中學(xué)的高年級學(xué)生和部分大學(xué)生進(jìn)行了四次研究。期間，他們向被測試者發(fā)放了一些用于進(jìn)行智力水平測試的紙片——在各張紙片的右上角分別用紅色、灰色或綠色表明了序號。

結(jié)果，凡是所持紙片上用紅色標(biāo)明序號的學(xué)生，其所獲得的智力水平評分均明顯低于那些手持灰色或綠色序號紙片的學(xué)生。先前的研究已經(jīng)證實(shí)，人們在日常生活中所接觸到的顏色會(huì)對人的潛意識(shí)產(chǎn)生影響，只不過這種影響非常短暫。

埃里奧特教授認(rèn)為，紅色首先會(huì)使人們聯(lián)想到錯(cuò)誤和失敗。談到這一點(diǎn)，大多數(shù)人肯定都會(huì)想到老師在判卷時(shí)所使用的紅墨水。當(dāng)然，有關(guān)禁止的信號通常也以紅色表示。而在自然界中，紅色則是一種警示色。隨后進(jìn)行的另外兩項(xiàng)研究則證實(shí)，當(dāng)受測試者眼看著紅色回答問題時(shí)，他們通常會(huì)選擇那些較為簡單的問題進(jìn)行解答－－這是人們在面對困難時(shí)所選擇的最經(jīng)典的方法。

與紅色相對的是，藍(lán)色能夠促進(jìn)創(chuàng)新；黃色，則是最令人愉快的顏色，它被認(rèn)為是愉快的象征，可以刺激神經(jīng)系統(tǒng)和改善大腦功能，激發(fā)人的朝氣，令人思維敏捷。另外還有，橙色，是新思想和年輕的象征，令人感到溫暖、活潑和熱情，能啟發(fā)人的思維，可有效地激發(fā)人的情緒和促進(jìn)消化功能。

賞心悅目的色彩能夠通過視神經(jīng)傳遞到大腦神經(jīng)細(xì)胞，從而有利于促進(jìn)人的智力發(fā)育。在和諧色彩中生活的少年兒童，其創(chuàng)造力高于普通環(huán)境中的成長者。若常處于讓人心情壓抑的色彩環(huán)境中，則會(huì)影響大腦神經(jīng)細(xì)胞的發(fā)育，從而使智力下降。所以，我們在平時(shí)日常生活中，正確的應(yīng)用色彩心理學(xué)，改善生活環(huán)境色彩，讓我們的心情更舒適，思維更敏銳。

所以一定不要讓自己孩子在高考的時(shí)候穿什么紅色的外套，旗開得勝什么的，可能會(huì)影響思維活躍度，導(dǎo)致考試成績不理想

橙色稍稍混入黑色或白色，會(huì)變成一種穩(wěn)重、含蓄又火熱的暖色，但混入較多的黑色，就成為一種燒焦的色；橙色中加入較多的白色會(huì)帶來一種甜膩的感覺。由于位于可見光的中低頻頻段,橙色在空氣中的衍射能力僅次于紅色，而其色感比紅色更暖，最飽和的橙色應(yīng)該是色彩中感受最暖的顏色，能給人有莊嚴(yán)、尊貴、神秘等感覺，所以基本上屬于心理色性。歷史上許多權(quán)貴和宗教界都用以裝點(diǎn)自己，現(xiàn)代社會(huì)上往往作為標(biāo)志色和宣傳色。不過也是容易造成視覺疲勞的色。

英國埃塞克斯大學(xué)做了一項(xiàng)研究顯示，綠色是很特別的顏色，在四季分明之地方，如見到春天之樹木、有綠色的嫩葉，大自然的顏色。在綠色環(huán)境中鍛煉能提高情緒、活力和愉悅感。也就是說，戶外鍛煉有益身心。

色彩心理學(xué)家早就指出，人們在高頻率顏色(如綠色，藍(lán)色和紫色)的環(huán)境下會(huì)產(chǎn)生平靜的感覺，而在中低頻率顏色(如紅色，橙色和黃色)的環(huán)境下更容易興奮和激動(dòng)。這一現(xiàn)象可能是在人類進(jìn)化的過程出現(xiàn)的。因?yàn)閷τ谠既祟悂碚f，綠色的環(huán)境意味著充足的食物和水源，對綠色的積極感覺在進(jìn)化過程中融入大腦。

英國埃塞克斯大學(xué)的研究者選取十四名男大學(xué)生，要求他們在室內(nèi)固定單車上騎行5分鐘，并觀看關(guān)于森林的紀(jì)錄片。隨后，研究者將視頻背景由綠色轉(zhuǎn)換為黑色、白色和紅色，讓志愿者在觀看這3種顏色視頻的同時(shí)，又分別騎行了5分鐘。結(jié)果發(fā)現(xiàn)，他們在觀看綠色視頻時(shí)疲勞感低，情緒也能保持愉悅；而觀看紅色背景視頻時(shí)，他們更容易情緒不穩(wěn)。

紫色跨越了暖色和冷色，所以可以根據(jù)所結(jié)合的色彩創(chuàng)建與眾不同的情調(diào)。帶些紅色的深紫色可以產(chǎn)生一個(gè)暖色盤。淺紫色是較貴的，常常會(huì)聯(lián)想到浪漫。當(dāng)結(jié)合玫紅色的時(shí)候，可以創(chuàng)建一個(gè)很女性化的色盤。一個(gè)比較男人的色盤可以使用偏紅偏黑的深紫色。泥土和自然的色彩可以結(jié)合紅紫色和淺褐色或者亮紫色+綠色。黃色和紫色是對比色，可以創(chuàng)建強(qiáng)對比度的色盤。

     

作者：木子淺談    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司