對(duì)于設(shè)計(jì)配色而言，系統(tǒng)的理論學(xué)習(xí)固然重要，但是對(duì)于初學(xué)者或者對(duì)色彩理論提不起興趣學(xué)習(xí)的人來說，難道就沒有可以快速完成配色的方法么？當(dāng)然有，那就是本期教程我要推薦給大家的這款配色工具：Adobe Color。當(dāng)然這個(gè)工具大家都不陌生，因?yàn)樗鲎?Adobe 之手，而之所以要將它做成一期教程，一方面是因?yàn)殡m然很多人知道這個(gè)配色網(wǎng)站，但是往往都是收藏起來作為擺設(shè)；另一方面即使有的人會(huì)用到它，但使用的方法不對(duì)，沒有將這個(gè)配色網(wǎng)站的價(jià)值發(fā)揮到最大。所以這期教程就讓大家徹底了解它的用法，以便在你的配色能力還沒有達(dá)到游刃有余之前，能夠幫助你快速創(chuàng)作出優(yōu)秀的配色。

這是 Adobe 官網(wǎng)對(duì)于 Adobe Color 的概括介紹，它是一個(gè)基于網(wǎng)絡(luò)的應(yīng)用程序和創(chuàng)意社區(qū)，提供免費(fèi)的色彩主題，全世界的設(shè)計(jì)師都可以在這里創(chuàng)建和共享顏色與靈感，并且在 Adobe 相應(yīng)的軟件中也提供了擴(kuò)展程序，比如我們常用的 Photoshop 和 Illustrator。但是，想要了解這個(gè)工具光看這些文字說明是不夠的，還是需要通過實(shí)際操作去了解。

進(jìn)入 Adobe Color 網(wǎng)站，顯示的就是這個(gè)頁面，當(dāng)然這個(gè)頁面中提供的顏色是隨機(jī)的，所以大家進(jìn)入這個(gè)網(wǎng)站的時(shí)候首頁顯示的未必是這組顏色。

我們先來看右上角這部分，因?yàn)槲覀儾⒉皇菃渭兊娜ソ榻B這個(gè)網(wǎng)站，所以我會(huì)挑重點(diǎn)去講，一些不重要的功能一帶而過。第一個(gè)按鈕我們之后會(huì)講，我們先來看第二個(gè)按鈕是干什么的。

當(dāng)我們鼠標(biāo)停留在相應(yīng)位置上時(shí)會(huì)彈出文字提示，這個(gè)按鈕的功能是「切換主題」，我操作一下大家就明白是什么意思了。

也就是很多軟件都會(huì)有的一個(gè)功能：日間模式和夜間模式，簡(jiǎn)單的講就是在白色背景和黑色背景之間切換，至于選擇哪個(gè)完全看個(gè)人喜好。

然后我們?cè)賮砜此覀?cè)的這個(gè)問號(hào)圖標(biāo)，它是「說明」。

點(diǎn)擊后會(huì)進(jìn)入官方提供的說明頁面，感興趣的同學(xué)可以自己看一下，不過這里都是簡(jiǎn)明扼要的文字，如果你看完了這期教程的話，不去看它也是可以的。

返回首頁，我們看右上方的文字，這里說明了兩件事：第一件事是告訴我們?nèi)绻胍獌?chǔ)存這些顏色，首先需要有一個(gè)賬號(hào)；第二件事是說，在 Photoshop 或 Illustrator 等軟件中也是可以使用 Adobe Color 的，而本期教程我們主要是以網(wǎng)頁版來進(jìn)行講解，因?yàn)槭褂玫姆椒ǘ际且粯拥?，而網(wǎng)頁版的功能更多。所以想充分利用好這個(gè)網(wǎng)站，首先需要?jiǎng)?chuàng)建一個(gè)賬號(hào)，點(diǎn)擊「登入」或「儲(chǔ)存」都會(huì)跳轉(zhuǎn)到建立賬戶的頁面。

建立賬戶有一個(gè)細(xì)節(jié)很關(guān)鍵，但是不方便在這里講，我會(huì)放在課后的練習(xí)文件中，大家下載練習(xí)文件的時(shí)候可以留意一下。

創(chuàng)建完賬戶之后就可以登陸上去了，這時(shí)右上方的界面已經(jīng)發(fā)生了變化。

首先是儲(chǔ)存的位置問題，畫面中的這些是我的賬號(hào)創(chuàng)建過的名稱，可以通過最下方「建立新資料庫(kù)」來命名，這個(gè)是很自由的沒有什么標(biāo)準(zhǔn)，可以按照自己的方式來分類和命名。

然后是為你想儲(chǔ)存的這組色卡命名，這里我就隨便填了一個(gè)「演示」。

還可以為你的色卡添加「標(biāo)簽」，添加標(biāo)簽是為了方便通過關(guān)鍵詞查找，可以直接選擇系統(tǒng)提供的，也可以自己填寫，這里我就選擇了一個(gè)系統(tǒng)提供的「Green」和自己添加的「藍(lán)綠」，標(biāo)簽用英文和漢字都是可以的。

然后我們看下方有一個(gè)「發(fā)布至 Color」，現(xiàn)在是點(diǎn)亮的狀態(tài)，選擇點(diǎn)亮狀態(tài)發(fā)布你的這組顏色就進(jìn)入到了全局色彩庫(kù)中，也就是共享的狀態(tài)，別人是可以看得到的，如果只想自己能看到，那就把它關(guān)掉。

然后點(diǎn)擊儲(chǔ)存，儲(chǔ)存好了之后右下方會(huì)彈出一個(gè)提示窗口，如果想查看你儲(chǔ)存的這個(gè)顏色可以點(diǎn)擊「檢視」，就會(huì)進(jìn)入到這組顏色的界面。

如果想查看你儲(chǔ)存的所有顏色，可以點(diǎn)擊頂部的「我的資料庫(kù)」，這時(shí)就可以查看你儲(chǔ)存的所有顏色了。

大家可以看到，這些都是我之前儲(chǔ)存的一些顏色分組，這里可以選擇資料庫(kù)的排序方式，現(xiàn)在是默認(rèn)的按照「上次修改時(shí)間」來排序的，你也可以選擇按「名稱」來排序。

剛才那組顏色我們儲(chǔ)存在了同類色這里，我們打開同類色，大家可以看到，第一個(gè)就是我剛剛儲(chǔ)存的那組顏色，后面的是我之前儲(chǔ)存的一些。

我們點(diǎn)擊剛剛儲(chǔ)存的這個(gè)色卡，就會(huì)跳轉(zhuǎn)到這個(gè)色卡的頁面，當(dāng)我們鼠標(biāo)移動(dòng)到相應(yīng)的顏色上時(shí)，就會(huì)出現(xiàn)復(fù)制的字樣，單擊一下就已經(jīng)復(fù)制這個(gè)顏色了。

這時(shí)我們回到設(shè)計(jì)軟件中，打開色板，「Ctrl+V」就粘貼進(jìn)來了，就是剛剛我復(fù)制的那個(gè)綠色。

如果想同時(shí)復(fù)制這五個(gè)顏色的話，我們看右側(cè)這里，提供了很多下載或復(fù)制的選項(xiàng)，其中對(duì)于設(shè)計(jì)師前兩個(gè)是比較常用的，后面一些涉及到代碼和計(jì)算機(jī)語言，如果你的工作會(huì)用到也可以使用，如果是平時(shí)作為設(shè)計(jì)取色的話，用前兩個(gè)就可以了。

我們先來看第一個(gè)，「ASE」是一種色彩文件格式，主要針對(duì)于 Photoshop 或 Illustrator 這類設(shè)計(jì)軟件。

我們打開 Photoshop，點(diǎn)擊色板右上角，會(huì)彈出一個(gè)下拉菜單，點(diǎn)擊「載入色板」，選擇剛剛下載的這個(gè)文件，這時(shí)我們會(huì)發(fā)現(xiàn)這五個(gè)顏色就進(jìn)入到色板當(dāng)中了。雖然這是一個(gè)比較好的方式，但是我個(gè)人平時(shí)不太用，只是給大家提供一個(gè)選擇。

而我個(gè)人平時(shí)還是比較喜歡直接一點(diǎn)的，「下載為 JPEG」，然后拖到軟件中直接用吸管吸取。

下載下來之后是一個(gè)圖片，打開后是這個(gè)樣子的，因?yàn)閳D片質(zhì)量還是很高的，所以直接吸的話也不用擔(dān)心會(huì)出現(xiàn)色差。

吸取之后就可以應(yīng)用了，比如這里我們就用這組顏色來填充這個(gè)插畫圖形。當(dāng)然了，針對(duì)這個(gè)插畫圖形這組配色還是可以的，比如樹木用綠色，房子用藍(lán)色，但是大家平時(shí)在工作的時(shí)候還要考慮設(shè)計(jì)的內(nèi)容，盡量在前期就挑選符合的色彩組合，而不是盲目的填充。

剛才我在儲(chǔ)存這組色卡的時(shí)候沒有選擇發(fā)布，進(jìn)入到色卡界面中也是可以隨時(shí)選擇發(fā)布、編輯、刪除的。

同樣，「名稱」和「標(biāo)簽」也可以隨時(shí)更改。

然后我們會(huì)看到下方還有兩個(gè)可以點(diǎn)擊的地方，我們先來看「潘通配色」。

點(diǎn)擊后會(huì)出現(xiàn)和這組顏色最接近的潘通色，同樣也提供下載。

最后是「色彩模式和代碼」，點(diǎn)擊之后會(huì)出現(xiàn)這組顏色的色值，總共有四組，也就是我們平時(shí)常用的四種色彩模式。以上就是我們?cè)?Adobe Color 上儲(chǔ)存顏色的一個(gè)流程，操作上很簡(jiǎn)單沒什么難度，但是大家要知道重點(diǎn)不是為了教大家這個(gè)方法，而是大家學(xué)會(huì)了這個(gè)方法之后，建立屬于自己的色彩庫(kù)。

下面我們回到主界面，這部分可以算是這個(gè)工具的一個(gè)應(yīng)用核心了，大家可以看到最上方有一個(gè)色輪，色輪下方有五個(gè)顏色。

其中中間的這個(gè)顏色上有一個(gè)三角形符號(hào)，這就代表了這個(gè)顏色是作為主色和基色的，當(dāng)你調(diào)整的時(shí)候，其他顏色是圍繞它來變化的。

色塊下方是色彩模式，也是四個(gè)：RGB、CMYK、HSV、 LAB。

現(xiàn)在是「RGB」模式，右側(cè)對(duì)應(yīng)的就是可以調(diào)節(jié)的滑桿，只不過跟我們軟件中不同的是，這里多了一個(gè)亮度的選項(xiàng)，方便調(diào)節(jié)。

我個(gè)人平時(shí)喜歡使用的是「HSV」模式，也就是 「HSB」，如果看過我之前教程的同學(xué)就應(yīng)該知道，我是極力推薦使用「HSB」模式的，因?yàn)樗罘先搜鄣囊曈X感受，色相、純度、明度一目了然，所見即所得。

大家可以看到這里現(xiàn)在選擇的是「自訂」，相當(dāng)于自定義模式，在這個(gè)模式下，你是可以隨意更改調(diào)整顏色的。

調(diào)整顏色可以直接在色輪上拖動(dòng)調(diào)整，也可以拖動(dòng)下方的滑桿，或者是手動(dòng)輸入色值都可以。

除了自訂這里還提供了很多色彩搭配組合，官方的說明是根據(jù)設(shè)定的基色來得到確保色彩和諧平衡的搭配，換句話說，也就是這里提供的顏色原則上搭配起來是不會(huì)有太大問題的。

我們先來看「類比」，也就是我們平時(shí)講的「同類色」，這里提供的都是五個(gè)顏色， 當(dāng)你選擇了相應(yīng)的色彩搭配模式之后，無論是改變哪個(gè)顏色，它都是在這個(gè)規(guī)則下變動(dòng)的。

得到了顏色之后我們就可以應(yīng)用了，這里我們就用這個(gè)海報(bào)來進(jìn)行配色演示，這是類比色的效果。

然后是「單色」，當(dāng)我們選擇單色模式的時(shí)候，大家會(huì)發(fā)現(xiàn)無論如果改變色相，得到的都是這個(gè)色相的單色模式，也就是在基色的基礎(chǔ)上進(jìn)行純度和明度的變化。和類比不同的是，單色沒有色相上的變化，類比是色相左右的微弱變化。

同樣我們提取這組色卡對(duì)這個(gè)海報(bào)進(jìn)行填充，效果是這樣的。

然后是「三元群」，也就是三個(gè)對(duì)比色，因?yàn)樯喹h(huán)是 360 度，所以平分成三份每一份 120 度。大家會(huì)看到這里不僅可以改變色相，也可以改變純度明度，最外圈是純色，往內(nèi)收就會(huì)降低純度和明度。我們?cè)诳瓷嚓P(guān)系的時(shí)候是不需要考慮純度和明度的，只看它們的色相位置，比如這個(gè)三元群，無論你收縮到多么靠?jī)?nèi)，它的色彩關(guān)系仍然是三元群的關(guān)系。

我們填充這組顏色看看，三元群因?yàn)閷?duì)比色的關(guān)系，所以通常配色效果在色相的對(duì)比上都是很強(qiáng)的。

然后是「補(bǔ)色」，這個(gè)就很好理解了，也就是「互補(bǔ)色」，雖然這里提供的都是五個(gè)顏色，但是整體色相上就是互補(bǔ)色兩色，其他三個(gè)顏色是這兩個(gè)補(bǔ)色在純度和明度上的變化。

同樣用這組顏色填充試試，可以看到補(bǔ)色的對(duì)比效果是最強(qiáng)烈的。

然后是「分割補(bǔ)色」，我們平時(shí)也叫做「分裂補(bǔ)色」，也就是一個(gè)顏色和它的互補(bǔ)色兩側(cè)的顏色的搭配，大家看色相環(huán)就明白了。雖然這里可以調(diào)整角度幅度，但是調(diào)整過大的話，其實(shí)原則上已經(jīng)不能算做是分割補(bǔ)色了，所以如果大家想用分割補(bǔ)色的話，建議還是使用它提供的默認(rèn)角度比較好。

將這組分割補(bǔ)色提取出來進(jìn)行填充，得到的就是這樣一個(gè)效果。

除了分割補(bǔ)色還有「雙分割補(bǔ)色」，也就是在分割補(bǔ)色的基礎(chǔ)上再增加基色兩側(cè)的兩個(gè)顏色，其實(shí)配色效果和分割補(bǔ)色差不多，只不過更適合你需要色相較多的情況，比如說如果你需要三個(gè)顏色，那就直接使用分割補(bǔ)色就行，如果三個(gè)顏色不夠，而你又不想改變配色的效果，那就使用雙分割補(bǔ)色，因?yàn)樾略黾拥膬蓚€(gè)顏色距離基色很近，所以色相相差并不大，不會(huì)對(duì)整體的配色效果造成太大的改變。

我們?cè)囈幌逻@個(gè)雙分割補(bǔ)色，五個(gè)純色的搭配，視覺效果還是很強(qiáng)烈、很刺激的。

接著是「正方形」配色，這個(gè)也很好理解了，從字面含義上就能夠明白是什么意思，也就是在色相環(huán)上選擇正方形四個(gè)端點(diǎn)的顏色，也可以理解為是十字形配色。這種配色形式的好處是對(duì)比適中，顏色豐富的同時(shí)又不會(huì)太亂，因?yàn)楸舜司嚯x相等，所以會(huì)讓配色效果顯得很平衡。

我們填充試試，效果也是可以的。

然后是「復(fù)合」型配色，也就是在色相環(huán)上先選擇一對(duì)補(bǔ)色，然后在補(bǔ)色附近選擇其他顏色，而之后的顏色要在同一半球，這種配色形式大體效果接近補(bǔ)色，但是因?yàn)橥肭蝾惐壬募尤?，多了一些變化，豐富了色彩層次，但是又不會(huì)產(chǎn)生強(qiáng)烈的沖突。

我們填充一下看看，就是這樣一個(gè)效果。

最后是「濃度」，也就是同一色相的不同純度變化，這里它規(guī)定好了明度，我們改變的只是色相和純度的變化。跟單色模式不同的是，單色是純度明度都在變化，而濃度模式下明度是不發(fā)生變化的。

剛剛我們嘗試的這些配色效果并不是所有的方案都是好的，因?yàn)檫@些都是直接使用 Adobe Color 提供的顏色進(jìn)行填充的，并沒有進(jìn)行任何的手動(dòng)調(diào)整和配色的理論考量，目的就是為了給大家展示用這個(gè)工具配色的效果，因?yàn)楣ぞ叩淖畲笥猛揪褪翘峁┒喾N方案，所以大家在使用的時(shí)候不需要考慮太多，大膽地多去嘗試一些配色，最后根據(jù)視覺效果來選擇最符合設(shè)計(jì)內(nèi)容并且最美觀的方案就可以了。

整個(gè)關(guān)于色輪的部分就給大家介紹完了 ，下面我們來看看「擷取主題」。

進(jìn)入「擷取主題」頁面，上面寫的是從影像中抽取顏色，并將其另存為調(diào)色盤，也就是可以上傳圖片，然后它會(huì)自動(dòng)提取圖片中的主要顏色形成一個(gè)色卡，這個(gè)色卡我們可以直接使用也可以儲(chǔ)存下來。

這里我們就用這個(gè)海報(bào)為例，點(diǎn)擊上傳就可以。

如果覺得操作麻煩也可以直接拖進(jìn)來，拖進(jìn)來之后我們會(huì)看到這里已經(jīng)提取出色卡了。

左上方是可以選擇模式的，這些模式是根據(jù)黑色的量以及色彩強(qiáng)度來區(qū)分的。

分別有彩色模式、亮色模式、柔和模式、深色模式、暗色模式、無，提取出的效果是和圖片本身的色彩有關(guān)系的，具體想提取哪種模式可以根據(jù)自己的需求來定。

當(dāng)然如果有想吸取的顏色，也可以手動(dòng)調(diào)整，想吸哪里吸哪里。

提取完圖片顏色之后，我們可以返回到色輪里，這時(shí)色輪界面顯示的就是剛剛我們提取的這組色卡，同樣也可以保存到資料庫(kù)中。

「擷取主題」的右側(cè)是「擷取漸層」，同樣也是上傳圖片提取顏色，只不過是漸變的形式，默認(rèn)是三個(gè)顏色，下方會(huì)有相應(yīng)的色值信息。

左上角這里可以改變漸變的數(shù)量，也可以手動(dòng)去調(diào)整每一個(gè)顏色的位置。其實(shí)看到這里大家會(huì)發(fā)現(xiàn)，這款工具是非常人性化的，它雖然為我們提供了很多搭配方案，但同時(shí)又留給了我們可調(diào)整的空間。同樣漸變色也是可以儲(chǔ)存到我們的資料庫(kù)中的。

「擷取漸層」右側(cè)是「協(xié)助工具」，這是 Adobe Color 新增的一個(gè)功能，它是用來檢測(cè)顏色的，主要是針對(duì)于色盲人群。

比如現(xiàn)在這組顏色。我們看它這里出現(xiàn)了紅色感嘆號(hào)，提示我們 A、C、D 發(fā)生了沖突。

我們正常情況下看這組顏色是能區(qū)分出微妙差異的，但是我們看下方這里它模擬了在不同色盲眼中看到這組顏色的樣子，在色盲人群眼里 A、C、D 之間有的顏色是一樣的。

所以為了對(duì)于色盲人群表示友好，我們就需要調(diào)整這組顏色，直到出現(xiàn)綠色的對(duì)號(hào)，這時(shí)我們看即使在色盲眼中，這些顏色也是能夠區(qū)分出來的，這個(gè)協(xié)助工具就是這么用的。

「協(xié)助工具」右側(cè)是「色彩游戲」，也是整個(gè)「建立」部分中最后一個(gè)，這里提供了一個(gè)色彩游戲。

開始之后會(huì)有色彩閃爍，結(jié)束之后按出現(xiàn)的順序點(diǎn)擊你剛才看到的顏色，第一關(guān)一個(gè)，第二關(guān)兩個(gè)，以此類推，這里我簡(jiǎn)單的玩了一下，大家看一下就明白了。

下面我們來看看「搜索」，進(jìn)入到搜索頁面我們會(huì)看到這里為我們提供了很多提取好的顏色和圖片，這里的圖片很豐富，有的是攝影作品，有的是設(shè)計(jì)作品，上方的輪播圖提供的一些格外的內(nèi)容，比如潘通流行色、Adobe 社區(qū)、Adobe 手機(jī)端的 APP 等等。

可以看到這里提供了非常多的色彩搭配，而且這里我給大家展示的只是其中一頁。

左上角這里提供了關(guān)鍵詞搜索功能，可以通過具體顏色進(jìn)行搜索，也可以輸入具象或抽象的詞匯來搜索，最關(guān)鍵的是可以直接輸入漢字。

比如這里我搜索「粉色」，就會(huì)出現(xiàn)大量和粉色相關(guān)的圖片和色卡。

這個(gè)是搜索「水」得到的一些結(jié)果。

也可以是抽象或感性的詞匯，比如「喜慶」，它就出現(xiàn)了一些以紅色和黃色為主的相關(guān)圖片。

當(dāng)然這里也是可以篩選的，不過通常情況下選擇「所有來源」就可以。

如果你看中了某一個(gè)圖片或色卡，當(dāng)我們鼠標(biāo)移動(dòng)到它上方的時(shí)候，就會(huì)彈出一些選項(xiàng)，我們可以儲(chǔ)存到資料庫(kù)，也可以直接進(jìn)行下載。

單擊就會(huì)進(jìn)入到色板界面，如果你想進(jìn)行其他操作，就和我們最開始講的是一樣的，只不過這里多了一個(gè)圖片，而這個(gè)圖片也是可以點(diǎn)擊的，點(diǎn)擊之后就會(huì)進(jìn)入到它的原始地址。

通過搜索功能得到的圖片都是可以進(jìn)入到它的原地址的。

我們回到之前的界面，這里有一個(gè)非常不起眼的地方，就是這個(gè)「相機(jī)」圖標(biāo)，雖然不起眼，但是它的功能也是非常重要的，也就是我們可以通過上傳圖片來搜尋類似的色彩主題。

這里我們就以這個(gè)圖片為例。

上傳之后就會(huì)出現(xiàn)和這個(gè)圖片內(nèi)容相近的圖片，它這里就自動(dòng)識(shí)別了電動(dòng)車，所以出現(xiàn)的基本上都是自行車或電動(dòng)車、摩托車，有的和色彩有關(guān)，有的和色彩無關(guān)，這個(gè)功能如果使用好也是非常方便工作的。

最后就是「趨勢(shì)」，這個(gè)和「搜索」其實(shí)本質(zhì)上差不多，也是為我們提供了很多圖片和色彩，不同的是它這里為我們提供了一些分類。

比如時(shí)尚、圖形設(shè)計(jì)、插圖、交互、建筑、游戲設(shè)計(jì)、荒野、風(fēng)味、旅行等等，而這里的圖庫(kù)主要來源于 Behance 和 Adobe Stock。

同樣，每一組都是可以保存和下載的。

點(diǎn)進(jìn)去之后也會(huì)進(jìn)入到具體的頁面，同樣圖片也是可以點(diǎn)進(jìn)去的。

比如這個(gè)點(diǎn)進(jìn)去之后，就進(jìn)入到了它的 Behance 界面，其實(shí)通過 Adobe Color 這個(gè)一個(gè)網(wǎng)站，就可以延伸到很多地方。

文章來源微信公眾號(hào)：研習(xí)設(shè)