在設(shè)計(jì)師的日常設(shè)計(jì)中，配色的調(diào)整也是關(guān)鍵的一部分，一個(gè)優(yōu)質(zhì)的配色對(duì)于用戶來說也有著不錯(cuò)的用戶體驗(yàn)，可能更加吸引用戶的眼光；本文作者分享了關(guān)于配色的技巧流程以及創(chuàng)意配色，我們一起來學(xué)習(xí)一下。

這是一篇關(guān)于如何配色的技巧流程，幫助大家更好的進(jìn)行創(chuàng)意配色，并使用自己喜歡的色彩。

大家好，我是西瓜，這次和大家分享一個(gè)我之前多次使用的一種配色技巧，只要同學(xué)們跟著練習(xí)，并且多去嘗試與操練幾次，就會(huì)摸清這種技法的規(guī)律。

我在之前寫過一篇關(guān)于配色理論的文章《色彩設(shè)計(jì)的原理》，那篇文章里我主要講解的其實(shí)是關(guān)于色彩原理的東西，幾乎文章內(nèi)容的90%都是在講最基礎(chǔ)的色彩知識(shí)，如果有同學(xué)沒看過的，我建議去瀏覽一遍；雖說不是什么實(shí)戰(zhàn)性的技法，但對(duì)于了解與理解色彩根本還是有根大用處的，那里面主要的色彩屬性定位就是HSL，也就是色相、純度、明度，這篇文章的技法也就是和HSL掛鉤的。

我這簡單講之前HSL是什么，闡述一下，然后我們就開始實(shí)戰(zhàn)技巧。

• H就是“色相”：所謂“色相”，指的就是像紅色或者藍(lán)色這些色調(diào)的稱呼，也就是它們的面相，在剛才我說的“曼塞爾色系”的理論（色輪）中，一共會(huì)有10種基礎(chǔ)色相；

• S是“純度”：是指色彩鮮明的程度，比如：“鮮艷的顏色”、“暗沉的顏色”，這種表達(dá)方式就是純度的意思，按照邏輯那么就是越鮮艷的純度就越高，越暗沉的純度也就越低。色輪中，無論是哪種顏色，只要它純度越低，就一定越接近灰色；

• L是“明度”：是指色彩的明亮程度，和純度一樣，也是以高和低表示。明度最高是白色，相反，最低是黑色；

好，知道了HSL是什么，我們就可以開始了。

01/

設(shè)置顏色的HSL

這里指的設(shè)置其實(shí)就是選定，我們接下來所有的軟件操作案例都使用Sketch為基礎(chǔ)，在你Sketch打開后，先畫一個(gè)圓形，然后打開你的圓形填充拾色器，你就看到當(dāng)前圓形的基礎(chǔ)色了；然后你需要做的第一步就是修改拾色器下方的RGB改為HSL，修改完后，對(duì)應(yīng)匹配的數(shù)值，就是當(dāng)前圓形色彩的色相、純度、明度。

02/

隨機(jī)選色，確定主色

‍接下來是隨機(jī)選色，這一步比較簡單，意思就是在拾色器里找一個(gè)你認(rèn)為好看的顏色，就這樣；不過需要提點(diǎn)你的是，選定的顏色盡量不要是偏黑、偏灰的顏色，這是因?yàn)槲覀兒笃诘纳�彩都是需要根�?jù)當(dāng)前色彩去進(jìn)行延伸的。

03/

改變L數(shù)值，衍生橫向色值組合

當(dāng)你選完基礎(chǔ)的顏色后，接下來，我們就要開始在L（色彩明度）身上做點(diǎn)文章了，你可以先將剛才畫好的圓復(fù)制10份，這樣我們就以一個(gè)一個(gè)的進(jìn)行L（明度）修改了；這里需要開始注意了，我們10份圓形的顏色是不一樣的，在保持HS不變的基礎(chǔ)下，L是以正反“+”和“-”進(jìn)行過度的。

舉例說明一下：當(dāng)前色彩為藍(lán)色，L的明度為57，我們需要正反“+”、“-”各10下，“+”得出67、77、87、97，翻過來“-”得出47、37、27、17、7，這樣一來，我們就一共得到了10個(gè)色相和純度一樣，但明度不一樣的色卡了。

04/
H值的延伸，尋找新的色相

接下來，我們開始改變H（色相）的值，我想到這里的同學(xué)應(yīng)該有點(diǎn)感觸了是么，只要H（色相）這邊一修改，就會(huì)得到第二種新的色卡了；但是，隨意拖動(dòng)H數(shù)值是錯(cuò)誤的手法，正確做法是依然在色相數(shù)值的基礎(chǔ)上“+”“-”增加10或減少10下，也可累計(jì)，這里我+30，得出的色卡就是新的色彩基礎(chǔ)了。

05/

提取色卡，主輔色定型

走到這一步，可以說是快要大功告成了，接下來我們要做的就是將剛才創(chuàng)建的兩個(gè)色彩卡組進(jìn)行提取，第一次的色彩卡組提取兩個(gè)色彩卡片，第二次的色彩卡組也提取兩個(gè)色彩卡片。

這里需要注意一點(diǎn)的是，兩個(gè)卡組選取的色彩盡量相差較大一點(diǎn)，意思就是說，例如第一組選取的色彩明度較低，那就將第二組選擇的色卡選擇的明度高一些，這樣形成的反差，容易在界面中進(jìn)行對(duì)比與強(qiáng)調(diào)。

06/

創(chuàng)建文本色、背景色、強(qiáng)調(diào)色

接下來，我們?cè)谧鲎詈笠徊�，那就是選出最基礎(chǔ)的背景、文字、點(diǎn)綴色，三個(gè)基礎(chǔ)色卡，一般情況，文字色和背景色我多數(shù)采用黑和白的配比；當(dāng)然，黑色也不是純粹的黑色，而是通過主色的加深得到的，當(dāng)然你也可以在第一次的主色色組內(nèi)最小數(shù)值的基礎(chǔ)上再加深一點(diǎn)點(diǎn)，得到新的文字色。

而點(diǎn)綴色，一般就是在非常小面積使用的色彩，一般別說一組文字內(nèi)的一個(gè)關(guān)鍵詞使用了點(diǎn)綴色進(jìn)行突出；總之，點(diǎn)綴色的面積是非常小的。

07/

代入原型設(shè)計(jì)

最終，我們將以上七個(gè)色卡排成一列查看一下是否和諧，一般情況下嚴(yán)格按照上述計(jì)算得出的顏色是不會(huì)出現(xiàn)差錯(cuò)的哈。

然后在設(shè)計(jì)界面時(shí)，代入這套顏色就可以了，當(dāng)然，你也可以放入插畫使用，如果感覺當(dāng)前色彩范圍有些狹窄，你還可以在第二步色彩延展的后面，繼續(xù)增加基礎(chǔ)色色相10位數(shù)，然后得出新的色卡，然后繼續(xù)“+”、“-”10就可以了。

08/

最終呈現(xiàn)

最后，我拿上面熱乎乎的色彩組合代入界面并操作，給大家實(shí)際展現(xiàn)出來。

09/

總結(jié)

這次的配色技巧就完成了，其實(shí)大家應(yīng)該可以發(fā)現(xiàn)一個(gè)潛在的規(guī)律，不管在任何彩色范圍內(nèi)，只要我們能把控好色彩的純度和明度，不管是任何色相，其實(shí)都是可以保正在一個(gè)區(qū)間內(nèi)的；而往往大家沒有拿出好的配色，多數(shù)情況就是配有掌握好純度和明度的關(guān)系。

最后，希望大家都能學(xué)會(huì)這個(gè)方法并使用它，其實(shí)這套方法還可以延展出其他配色技法，帶我下次再給大家實(shí)際講解與操作。 

作者：西瓜，公眾號(hào)：西瓜的設(shè)計(jì)