?

顏色不僅僅在我們生活的世界中，在我們的設(shè)計(jì)世界中都扮演著很重要的角色，一套好的配色方案對設(shè)計(jì)的影響是非常重要的。很多小伙伴平時(shí)弄不好配色，今天教大家一下配色的方法小技巧，希望可以幫到大家。

?

一、為什么色彩很重要

?

?

在設(shè)計(jì)中，色彩是最直接的，也是最容易影響頁面整體的，有時(shí)候一個(gè)配色使用好了，整個(gè)設(shè)計(jì)都是賞心悅目，但是如果配色出錯(cuò)不和諧了，那么一張好的作品也就被毀了。

?

?

許多品牌商家同一種物品不同系列的不同產(chǎn)品，都是通過包裝上圖案和明亮的色彩來區(qū)分不同的產(chǎn)品，讓用戶一眼就看出不同。

?

?

瀾湄計(jì)劃用最契合的顏色與圖像結(jié)合代表著許許多多的動(dòng)物，如大象、熊、虎、豹、孔雀等。

?

看到這里大家是不是覺得使用顏色其實(shí)很簡單，只要你大膽一點(diǎn)，豐富一點(diǎn)就可以了。

?

?

但是其實(shí)配色在我們平時(shí)設(shè)計(jì)中，并沒有想象中那么簡單，許多設(shè)計(jì)師在色彩搭配的時(shí)候方法不夠系統(tǒng)，色彩與構(gòu)成掌握的還不是很熟練，就會(huì)導(dǎo)致各種各樣的問題。學(xué)習(xí)色彩，首先帶大家了解一些基本概念。

?

?

1、什么是色相

?

?

?

?

色相是色彩的首要特征，簡單來說就是研究不同光波射線產(chǎn)生的不同視覺感受，我們看到的各種顏色就是色相的一種，比如紅色、藍(lán)色、紫色……

?

?

2、什么是色調(diào)

?

?

色調(diào)簡單來說就是色彩的濃度，深淺。它是通過色彩的名稱和純色來表達(dá)色彩的概念，色調(diào)不是指色彩的具體性質(zhì)，而是對畫面整體顏色的影響概念敘述。

?

?

3、什么是Value

?

?

簡單的解釋Value就是“黑白灰”從白到黑，由淺到深可以劃分出無數(shù)的灰色。但是為了方便將其從0到10劃分為11個(gè)刻度，就像音樂里的高音調(diào)和低音調(diào)，色彩中，一般認(rèn)為白色是最高調(diào)子，黑色是最低調(diào)子。

?

?

在設(shè)計(jì)中Value起到了很重要的作用，可以在視覺上給人不同的感覺，如上圖顏色值100%就是白色，0%就是黑色。

?

?

接下來就分享一些配色方法給到大家。

?

?

?

二、提高配色技巧小方法

?

1、60-30-10規(guī)則

?

?

“60–30–10原則”是保持用戶審美愉悅性和畫面充分平衡性的配色理論?！?0–30–10原則”的目的是讓一種通常是中性的顏色，占據(jù)調(diào)色板的60% ，另一種補(bǔ)充顏色占調(diào)色板的30% ，然后第三種顏色作為一種強(qiáng)調(diào)色，占調(diào)色板的10%。

?

?

這種方法使設(shè)計(jì)師使用原始或不常見的配色進(jìn)行嘗試變得簡單得多，而且不會(huì)超出商業(yè)品牌或行業(yè)中的預(yù)期標(biāo)準(zhǔn)。不常規(guī)的色調(diào)可以提升美感和設(shè)計(jì)感，從而使品牌脫穎而出，使其更加突出和卓越。

?

?

這個(gè)室內(nèi)設(shè)計(jì)規(guī)則是一種永恒的裝飾技巧，可以幫助你輕松地將一個(gè)色彩方案組合起來。60％+30％+10％的比例是為了給色彩帶來平衡。這個(gè)公式之所以有效，是因?yàn)樗軇?chuàng)造出一種平衡感，讓人們的視線從一個(gè)焦點(diǎn)舒適地移動(dòng)到下一個(gè)焦點(diǎn)。在我們的UI設(shè)計(jì)中也是同樣適用的。

?

?

2、從大自然中獲取靈感

?

?

大家知道嗎，我們的眼睛可以看到超過10000萬種顏色嗎，尤其是看向大自然的時(shí)候，樹木、動(dòng)物、空間他們的色調(diào)還充滿著和諧感。所以多多發(fā)現(xiàn)并使用大自然的顏色吧。

?

?

綠色植物搭配綠色系的設(shè)計(jì)，讓網(wǎng)站頁面充滿大自然的感覺。

?

?

像是海報(bào)中牛油果的青綠色，搭配黃色面包的藍(lán)色，這些都是我們生活中的顏色使用在設(shè)計(jì)上。

?

?

3、暗不等于黑，亮不等于白

?

?

當(dāng)我們使用顏色來表達(dá)明暗時(shí)，有一個(gè)很普遍的錯(cuò)誤，那就是使用不透明度的黑色表達(dá)陰影，不透明度的白色來表達(dá)光亮。

?

但如果我們借鑒一下現(xiàn)實(shí)生活，會(huì)發(fā)現(xiàn)黑暗總是有一些基調(diào)的。

?

?

黑暗從來都不是黑色的，黑暗只是被物體明度遮蔽的色調(diào)。

?

就如上圖中，檸檬的影子是非常深的綠色，而木板的影子是非常的深棕色，它們都不是黑色的。只有在完全沒有光線的情況下，才會(huì)出現(xiàn)黑色。

?

?

除了這三個(gè)小技巧，還有一個(gè)更好的配色方法介紹給大家。

?

?

?

三、簡單8步學(xué)會(huì)一個(gè)配色方法

?

1、第一步：將你的顏色模式設(shè)置為HSL

?

?

一般來說，我們平時(shí)使用sketch的時(shí)候顏色模式都是十六進(jìn)制值，比如#DB17DF。現(xiàn)在我們將把它改成HSL模式，HSL分別代表Hues（色調(diào)）、Saturation（飽和度）和Lightness（明度）。

?

?

2、第二步：選擇任何一個(gè)你喜歡的顏色

?

?

隨意選擇你喜歡的顏色，比如，我選擇了我最近的喜歡的紫色，#DB17DF。

?

?

3、第三步：改變L值

?

?

然后根據(jù)當(dāng)前的 L 值創(chuàng)建一組差異為10的L值。范圍從0到100。

?

注意：變化數(shù)字不一定是10，你可以選擇任何數(shù)字。

?

?

4、第四步：創(chuàng)建10個(gè)初始顏色的副本

?

?

復(fù)制10個(gè)你一開始選擇的顏色。

?

?

5、第五步：替換L值

?

?

?

把第四步創(chuàng)建的10個(gè)顏色副本中的L值從小到大依次更改成第三步你確定的10個(gè)L值。

?

你可以采用這些顏色并運(yùn)用到項(xiàng)目中，而且，我們還可以把它提高一個(gè)檔次，例如創(chuàng)建一種輔助色。

?

?

6、第六步：尋找你的輔助色

?

?

要?jiǎng)?chuàng)建輔助色，可以把 30、120、150、180、210、240或300添加到主色的H值。舉個(gè)??，我是添加了30。

?

注意：在色輪上查看你的顏色。這些數(shù)字為我們指出了互補(bǔ)色和臨近色。由于色輪是一個(gè)圓，你的H值最大只能是360。

?

?

把你的輔助色方案重復(fù)上面第四步和第五步。就可以得到你需要的輔助色。

?

?

7、第七步：選擇主要和次要顏色

?

?

根據(jù)你的想法，選擇適合你項(xiàng)目的顏色。這邊我選擇較深的陰影作為主要顏色，選擇較淺的陰影作為次要顏色。

?

?

8、第八步：選擇你項(xiàng)目其他元素的顏色

?

?

為項(xiàng)目的其它元素選擇顏色，比如背景、文字等。一般來說，灰白是一個(gè)很好的背景顏色。

?

?

9、最終結(jié)果

?

?

一個(gè)漂亮的配色方案就出來了，你可以在你的項(xiàng)目中盡情使用了。

?

?

?

四、最后

?

?

上面就是今天分享關(guān)于設(shè)計(jì)配色的技巧了。配色的學(xué)習(xí)其實(shí)也是需要一個(gè)過程的，就像生活中的每一件小事一樣，配色也需要我們反復(fù)的練習(xí)，剛開始或許我們會(huì)覺得非常困難和復(fù)雜，但只要堅(jiān)持下去，后面就會(huì)越來越容易。今天的分享就到這里，期待每天一個(gè)小知識(shí)點(diǎn)，可以給你的設(shè)計(jì)路上增加一點(diǎn)點(diǎn)能量。

?