《色彩基礎(chǔ)知識及案例分析》PPT課件（圖文）

1、色彩基礎(chǔ)知識、案例分析色彩基礎(chǔ)知識：色彩是什么？、 色彩光學(xué)原理、三原色、色彩的三要素、色彩分類、常用顏色模式 孟塞爾顏色系統(tǒng) 色彩涵義色彩搭配：單色搭配、近似色搭配、互補色搭配、原色搭配、分裂互補色搭配。色彩在整個圖中的使用比例，如何準確定位你的色彩。案例分析：什么樣的投影色顯得更真實？什么樣的漸變色看起來更舒適？色彩常識色彩是什么色彩是可見光的作用所導(dǎo)致的 視覺現(xiàn)象。光是一種電磁波， 不同波長的可見光投射到物體上， 一部分被吸收，一部分被反射進入人眼，大腦再把這種刺激反映成色彩信息。所以說，沒有光，就沒有色彩可言。在一般情況下，入射光都是由光源發(fā)出的包含各種顏色的自然光，當這些光射到不同的

2、物體上，物體對光的吸收和反射情況并不都相同，于是出現(xiàn)了顏色的差異。我們看到物體呈現(xiàn)白色，是因為物體將射到它上面的所有光都反射了，這些光疊加在一起是白色的，又射到我們眼睛里，所以我們說，這個物體是白色的。而看到物體呈現(xiàn)黑色也是一樣的道理，只是黑色正好相反，物體將射到它上的所有光都吸收了，我們看不到從它上發(fā)出的任何反射光，所以認為它是黑色。色彩光學(xué)原理1665年，牛頓(IsaacNewton)進行了太陽光實驗，讓太陽光通過窗板的小圓孔照射在玻璃三角棱鏡上，光束在棱鏡中折射后，擴散為一個連續(xù)的彩虹顏色帶，牛頓稱之為光譜，表示連續(xù)的可見光譜。而可見光譜只是所有電磁波譜中的一小部分。 牛頓認為白光(太陽

3、光)使復(fù)雜的，由無數(shù)種不同的光線混合，各種光線在玻璃中受到不同程度的折射。棱鏡沒有改變白光而只是將它分解為簡單的組成部分，把這些組成部分混合，能夠重新恢復(fù)原來的白色。利用第二塊棱鏡可以將擴散的光再次合成為白光。三原色三原色應(yīng)用領(lǐng)域的三原色三基色是指紅,綠,藍三色,各自對應(yīng)的波長分別為700nm,546.1nm,435.8nm;三原色原色，又稱為基色，即用以調(diào)配其他色彩的基本色。三原色通常分為兩類， 一類是色光三原色，另一類是顏料三原色。但在美術(shù)上又把紅，黃，藍定義為色彩三原色。配圖中左圖是光的三原色，右圖是顏料的三原色。原色的加減性質(zhì)原色以不同比例混合時，會產(chǎn)生其他顏色。在不同的色彩空間系統(tǒng)中

4、，有不同的原色組合?？梢苑譃椤隘B加型”和“消減型”兩種系統(tǒng)。色光三原色人的眼睛是根據(jù)所看見的光的波長來識別顏色的。 可見光譜中的大部分顏色可以由三種基本色光按不同的比例混合而成， 這三種基本色光的顏色就是紅（Red）、綠（Green）、 藍（Blue）三原色光。這三種光以相同的比例混合、且達到一定的強度， 就呈現(xiàn)白色（白光）；若三種光的強度均為零， 就是黑色（黑暗）。這就是加色法原理，加色法原理被廣泛應(yīng)用于電視機、監(jiān)視器等主動發(fā)光的產(chǎn)品中。使用色光三原色并不足以重現(xiàn)所有的色彩，準確地說法應(yīng)該是“將三原色光以不同的比例復(fù)合后，對人的眼睛可以形成與各種頻率的可見光等效的色覺?！敝挥心切┰谌纳?/p>

5、度所定義的顏色三角內(nèi)的顏色，才可以利用三原色的光以非負量相加混合得到。顏料三原色而在打印、印刷、油漆、繪畫等靠介質(zhì)表面的反射被動發(fā)光的場合， 物體所呈現(xiàn)的顏色是光源中被顏料吸收后所剩余的部分， 所以其成色的原理叫做減色法原理。 減色法原理被廣泛應(yīng)用于各種被動發(fā)光的場合。 在減色法原理中的三原色顏料分別是青（Cyan）、品紅（Magenta）和黃（Yellow）。 例如黃色與青色混合可以產(chǎn)生綠色，黃色與品紅色混合可以產(chǎn)生紅色，品紅色與青色混合可以產(chǎn)生藍色。當這三種原色以等比例疊加在一起時，會變成灰色；若將此三原色的飽和度均調(diào)至最大并且等量混合時，理論上會呈現(xiàn)黑色，但實際上由于顏料的原因呈現(xiàn)的是濁

6、褐色。正因如此，在印刷技術(shù)上，人們采用了第四種“原色”黑色，以彌補三原色之不足。這套原色系統(tǒng)常被稱為“CMYK色彩空間”，亦即由青(C)品紅(M)黃(Y)以及黑(K)所組合出的色彩系統(tǒng)。美術(shù)色彩三原色：紅，黃，藍紅、黃、藍 為人們加入了感覺實際，是實際上的三原色。美術(shù)教科書講的是繪畫顏料的使用，色彩調(diào)色是 紅、黃、藍為三原色。美術(shù)色彩色光三原色加色法原理 橙綠紫美術(shù)色彩顏料三原色減色法原理 紅黃藍美術(shù)色彩三原色組成的六色體系 紅黃藍 橙綠紫 給人以實際色彩感受，符合客觀實際，黃、品紅、青是科學(xué)上精確的三原色。不符合人的實際色彩感受，太吹毛求疵，不符合實際使用，如品紅，先輩都沒有給她以一個字的名

7、字命名。綜上所述，無論是從原色的定義出發(fā)，還是以實際應(yīng)用的結(jié)果驗證都足以說明，黃、品紅、青是科學(xué)上精確的三原色。紅、綠、藍 黃、品紅、青是科學(xué)上精確的六色組合。不符合人的實際色彩感受，不符合實際使用。美術(shù)上的三原色色彩的三要素色彩的三要素是指色彩的色相、明度和純度（飽和度）。 色彩的三要素色彩的三要素是指色彩的色相、明度和純度。 色相 色相是色彩的“相貌”，一般根據(jù)其特征命名，如黃、綠、紅等。當黃色加入白色之后，顯出不同的奶黃、麥芽黃等，但它的黃色性質(zhì)不變，依然保持黃色的色相。最初的基本色相為：紅、橙、黃、綠、藍、紫。在各色中間加插一兩個中間色，其頭尾色相，按光譜順序為：紅、橙紅、黃橙、黃、黃

8、綠、綠、綠藍、藍綠、藍、藍紫、紫、紅紫十二基本色相。色彩的三要素明度 色彩的明暗程度，可以用黑、白、灰的關(guān)系來表述。一個色彩加入白色越多，明度也就越高，加入黑色越多，明度就越低。 明度就是色彩的明暗差別、光亮程度，所有色彩都有自己的光亮。其中，暗色被稱為低明度，亮色被稱為高明度。對于有彩色的明度差別包括兩個方面，一是指某一色相在混入黑或者白色后，產(chǎn)生的深淺變化。純度是色彩的飽和鮮艷度。光色中的紅、橙、黃、綠、青、藍、紫都是高純度的。一個色彩只要不加入其他色彩，就是高純度，其他色彩且加得越多，純度就越低。黑、白、灰是無彩色，其純度等于零。色彩的三要素由于顏料三原色,紅、黃、藍比較符合客觀實際。所

9、以以下配色方案都根據(jù)美術(shù)上的來三原色做的配色方案。色彩的三要素色彩分類1.原色：三原色由三種基本原色構(gòu)成。原色是指不能透過其他顏色的混合調(diào)配而得出的“基本色”。通原色能合成出其它色，而其他色不能還原出原色。2.間色：由兩個原色混合得間色。3.復(fù)色：由原色與間色混合，或間色與間色混合而成的色彩。復(fù)色中包涵全部三原色，只是三原色的比例不同。常用顏色模式常見的色彩模式有RGB，CMYK，HSB幾種。1加色法三原色（RGB）色彩模式 加色法又稱為RGB顏色模型，也是絕大多數(shù)電子顯示頻運用的模式。 RGB是從顏色發(fā)光的原理來設(shè)計定的，通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈，當它們的光相互疊合的

10、時候，色彩相混，而亮度卻等于兩者亮度之總和，越混合亮度越高，即加法混合。藍（B）+ 綠（G）= 青（C） 綠（G）+ 紅（R）= 黃（Y）紅（R）+ 藍（B）+ 品（M）（又稱：洋紅） 藍（B）+ 綠（G）+ 紅（R）= 白色常用顏色模式2減色法(CMYK)色彩模式CMYK通常指的是印刷色彩系統(tǒng)，顏料的特性與色光相反，越疊加越黑，所以顏料的三原色必須是可以吸收R,G,B的色彩，也就是RGB的補色：青，洋紅，黃色，由于不存在完美的顏料，所以完美的黑色是無法通過疊加調(diào)和的，所以在這三色基礎(chǔ)上加入了黑色。RGB與CMYK雖然是不同的色彩系統(tǒng)，但通常情況下，他們是可以互相轉(zhuǎn)化的。藍（B）+ 青（C）=

11、 綠（G）青（C）+ 品（M）= 藍（B）品（M）+ 藍（B）= 紅（R）藍（B）+ 青（C）+ 品（M）= 黑色所以減色法也稱色彩重疊。也可理解為：凡兩種顏料疊加，色光減少者為減色法。常用顏色模式HSB模式的色彩原理更符合色彩屬性原則即色相，明度與飽和度。這也更符合人眼的判斷原理。H代表色相Hue,S代表飽和度Saturation,B代表亮度Brightness。在實際使用的時候較RGB與CMYK模式都要方便一些，在此推薦設(shè)計師在調(diào)色的時候可以嘗試這用一下。繪圖軟件通常都裝有這個色彩模式。常用顏色模式色相（H,hue）：在0360的標準色輪上，色相是按位置度量的。在通常的使用中，色相是由顏色

12、名稱標識的，比如紅、綠或橙色。黑色和白色無色相。飽和度（S,saturation）：表示色彩的純度，為0時為灰色。白、黑和其他灰色色彩都沒有飽和度的。在最大飽和度時，每一色相具有最純的色光。取值范圍0100%。亮度（B,brightness或V,value）：是色彩的明亮度。為0時即為黑色。最大亮度是色彩最鮮明的狀態(tài)。取值范圍0100%。孟塞爾顏色系統(tǒng)孟塞爾顏色系統(tǒng)（Munsell Color System）是色度學(xué)（或比色法）里透過明度（value）、色相（hue）及色度（chroma）三個維度來描述顏色的方法。這個顏色描述系統(tǒng)是由美國藝術(shù)家阿爾伯特孟塞爾（Albert H. Munsell

13、，18581918）在1898年創(chuàng)制的，在1930年代為USDA采納為泥土研究的官方顏色描述系統(tǒng)。至今仍是比較色法的標準。孟塞爾顏色系統(tǒng)經(jīng)度=色相（hue）。南北軸=明度（value），從全黑（N0）到全白（N10）。距軸的距離=色度（chroma），表示色調(diào)的純度。孟塞爾顏色系統(tǒng)具體顏色的標識形式為：色相+明度+色度。例如5B 5/10是中等明度（5），高色度（10）的正藍色（5B）。色彩涵義其實色彩本身是沒有意義的，但色彩可以使我們聯(lián)想到某種事物，或某段回憶，進而影響我們的情緒。人其實是靠著經(jīng)驗與習(xí)慣生活的，而色彩能夠使我們聯(lián)想到曾經(jīng)的經(jīng)驗與習(xí)慣，于是色彩也就有了意義，這意義不是色彩本身的

14、，而是色彩背后所代表的事物帶給我們的。色彩是很難被理性衡量的，不同的人看到色彩有各自不同的感受。色彩的對比調(diào)和色彩的對比調(diào)和是一種色彩使用的基本技能。其中，我們需要掌握以下幾個概念。暖色系 暖色系是指色相環(huán)中包括黃、紅、褐、赭等色彩在內(nèi)的色彩系列。暖色系給人以熱烈、歡快、溫暖、奔放的感覺。色彩的對比調(diào)和冷色系 冷色系是包括綠色、藍色、紫色等色相在內(nèi)的色彩系列，它給人以清冷、寧靜、涼爽的感覺。冷色和暖色并非是絕對的，一些冷色在它所屬的冷色系中通過對比，會具有偏暖的傾向；暖色則有可能通過與更暖顏色的對比而取得偏冷的傾向。色彩的對比調(diào)和補色對比冷色系是包括綠色、藍色、紫色等色相在內(nèi)的色彩系列，它給人

15、以清冷、寧靜、涼爽的感覺。冷色和暖色并非是絕對的，一些冷色在它所屬的冷色系中通過對比，會具有偏暖的傾向；暖色則有可能通過與更暖顏色的對比而取得偏冷的傾向。由于補色對比的作用，橙色和綠色互相強調(diào)這幅作品有多少顏色？事實上只有三種：橙色、綠色和深藍色色彩的對比調(diào)和同類色 相同類別的色彩稱為同類色，如檸檬黃、淡黃、中黃、土黃，就屬于同類色。近似色 同類別色彩或相近的不同類別色彩稱為近似色，如桔黃與桔紅、朱紅與大紅就是近似色，而桔紅與朱紅、中黃與桔黃也是近似色。不同類別但明度相近的冷暖色彩也是近似色，如淡綠與湖藍、群青與紫、曙紅與紫羅蘭等。協(xié)調(diào)色 協(xié)調(diào)色是指所使用的色彩在形式、內(nèi)容、表現(xiàn)、手段上，都處

16、于相互襯托、相互制約、協(xié)同一致的搭配關(guān)系，如原色與間色、間色與復(fù)合色、復(fù)合色與灰色的協(xié)調(diào)等。色彩搭配搭配方式常見的搭配方式有同類色搭配，近似色搭配，補色搭配，分裂補色搭配，三角色搭配。如下圖。色彩搭配單色搭配(0):由一種色相的不同明度組成的搭配，這種搭配很好的體驗了明暗的層次感。2022/7/11色彩搭配近似色（60)：色環(huán)上距離相距非常近的色彩。近似色搭配：相鄰的兩到三個顏色稱職為近似色。如下圖（橙色/褐色/黃色），這種搭配比較讓人賞心悅目，低對比度，較和諧。色彩搭配互補色（180)：（對比色），色輪上距離最遠相對的色彩。色環(huán)中相對的兩個色相搭配。顏色對比強烈，傳達能量、活力、興奮等意思，

17、補色中最好讓一個顏色多，一個顏色少。如下圖（紫色和黃色）。色彩搭配.原色的搭配（120)：大部分是在兒童產(chǎn)品上，色彩明快，這樣的搭配在歐美也非常流行，如藍紅搭配，frickr的logo以及 麥當勞的logo色與主色調(diào)紅黃色搭配等。色彩搭配分裂互補色（120180)：分裂補色搭配：同時用補色及類比色的方法確定顏色關(guān)系，就稱為分裂補色。這種搭配，既有類比色的低對比度，又有補色的力量感，形成一種即和諧又有重點的顏色關(guān)系，如下圖，紅色文字就顯得特別的鏗鏘有力，特別突出。色彩使用比例色彩的搭配方法有很多種，這里介紹一種我個人比較認同的方式。日本設(shè)計師提出70%，25%，5%的配色比例原則，畫面中70%為

18、底色，面積最大的一塊，往往畫面的色調(diào)是有底色決定的。25%面積的為主色，畫面的核心區(qū)域多使用主色區(qū)。5%為強調(diào)色，強調(diào)色在畫面中起到華龍點睛的作用，強調(diào)色多使用與主色對比度較大的顏色，也可以嘗試利用色彩的互補關(guān)系來突出。色彩使用比例當然，在實際工作中，很多時候畫面不會只有3中顏色。遇到這種情況時，主張在現(xiàn)有的配色方案中進行切割，從而不影響配色比例。2022/7/11如何準確定位你的色彩前面分析的是通過顏色去感覺情緒。這里簡單寫，如何根據(jù)產(chǎn)品去捕捉色彩，也就是所謂的MOODBOARD(情緒版)。情緒版是指對要設(shè)計的產(chǎn)品以及相關(guān)主題方向的的色彩，影像，圖片等其他材料的收集，從而引起某些情緒反應(yīng)，以

19、此作為設(shè)計方向或者是形式的參考。（具體請參考情緒版(Moodboard)操作流程的新思考曉千）1.原生關(guān)鍵詞選擇首先，通過對產(chǎn)品的理解與認識，以及用戶調(diào)研等得出體驗關(guān)鍵詞。2022/7/11如何準確定位你的色彩2.衍生關(guān)鍵詞針對所得到的關(guān)鍵詞，擴容信息，通過頭腦風(fēng)暴畫出關(guān)鍵詞的思維導(dǎo)圖，尋找擴展關(guān)鍵詞。3.收集相關(guān)圖片，提取圖片生成情緒版通過“原生關(guān)鍵詞”和“衍生關(guān)鍵詞”，通過網(wǎng)絡(luò)渠道，收集了大量的對應(yīng)的素材圖并配合定性訪談。4.衍生關(guān)鍵詞的分析分維詮釋2022/7/11如何準確定位你的色彩5.對情緒版進行“色彩分析”和“質(zhì)感分析”2022/7/11網(wǎng)頁案例剖析“網(wǎng)頁配色不宜超過三種?！闭胬?，

20、這沒錯，但更多是從色相（赤橙黃綠青藍紫等不同顏色）上來說的。色相差異明顯，主要色彩的選取就比較好辦，常見的有對比色、臨近色、冷暖色調(diào)互補等方式，可以簡單設(shè)定，或直接從成功作品中借鑒主輔色配比都可以，比如常見的朱紅點綴深藍、明黃點綴深綠等。但通常，我們需要面對的設(shè)計需求在色彩分配上會有更多的問題出現(xiàn)：2022/7/11網(wǎng)頁案例剖析2022/7/11網(wǎng)頁案例剖析如上所示，根據(jù)網(wǎng)頁信息的多寡，會有更多色彩區(qū)域的層級劃分和文字信息層級區(qū)分需求，那么在守住“網(wǎng)頁色彩（相）不超過三種”的原則下，只能尋找更多同色系的色彩來完善設(shè)計，也就是在“飽和度”和“明度”上做文章。這也就是本文為解決這一問題所要分享的“

21、天然”配色技巧：疊柔配色法。疊柔配色技巧分享這個方法非常簡單，無需知道三角函數(shù)、四則運算，無需理解色彩指數(shù)和直方圖，甚至不用了解色階曲線和亮度強弱甚至，你可以對色彩毫無知覺。 只需要明白三個關(guān)鍵詞：疊加、柔光和透明度（填充）。如果連這三個關(guān)鍵詞都不甚明了，那就記住他們所在的位置（下圖）：2022/7/11網(wǎng)頁案例剖析2022/7/11網(wǎng)頁案例剖析注意：透明度與填充略有不同，填充不會影響到“混合選項”的效果，而透明度則是作用于整個圖層。配色技巧的原理：即：用純白色（#ffffff）和純黑色（#000000）通過“疊加”和“柔光”的混合模式（效果類似調(diào)整飽和度和明度），在任意一個色彩上得到最匹配的顏色（然后通過調(diào)整透明度選取最適合的輔色）。2022/7/112022/7/11網(wǎng)頁案例剖析（上圖示例中，調(diào)整疊/柔模式的黑白色塊的不同透明度（取10%到100%整數(shù)值為例）就可以得到差異較明顯的40