對於設計配色而言，系統的理論學習固然重要，但是對於初學者或者對色彩理論提不起興趣學習的人來說，難道就沒有可以快速完成配色的方法麼？當然有，那就是本期教程我要推薦給大家的這款配色工具：Adobe Color。當然這個工具大家都不陌生，因爲它出自 Adobe 之手，而之所以要將它做成一期教程，一方面是因爲雖然很多人知道這個配色網站，但是往往都是收藏起來作爲擺設；另一方面即使有的人會用到它，但使用的方法不對，沒有將這個配色網站的價值發揮到最大。所以這期教程就讓大家徹底瞭解它的用法，以便在你的配色能力還沒有達到遊刃有餘之前，能夠幫助你快速創作出優秀的配色。

這是 Adobe 官網對於 Adobe Color 的概括介紹，它是一個基於網絡的應用程序和創意社區，提供免費的色彩主題，全世界的設計師都可以在這裏創建和共享顏色與靈感，並且在 Adobe 相應的軟件中也提供了擴展程序，比如我們常用的 Photoshop 和 Illustrator。但是，想要了解這個工具光看這些文字說明是不夠的，還是需要通過實際操作去了解。

進入 Adobe Color 網站，顯示的就是這個頁面，當然這個頁面中提供的顏色是隨機的，所以大家進入這個網站的時候首頁顯示的未必是這組顏色。

我們先來看右上角這部分，因爲我們並不是單純的去介紹這個網站，所以我會挑重點去講，一些不重要的功能一帶而過。第一個按鈕我們之後會講，我們先來看第二個按鈕是幹什麼的。

當我們鼠標停留在相應位置上時會彈出文字提示，這個按鈕的功能是「切換主題」，我操作一下大家就明白是什麼意思了。

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

然後我們再來看它右側的這個問號圖標，它是「說明」。

點擊後會進入官方提供的說明頁面，感興趣的同學可以自己看一下，不過這裏都是簡明扼要的文字，如果你看完了這期教程的話，不去看它也是可以的。

返回首頁，我們看右上方的文字，這裏說明了兩件事：第一件事是告訴我們如果想要儲存這些顏色，首先需要有一個賬號；第二件事是說，在 Photoshop 或 Illustrator 等軟件中也是可以使用 Adobe Color 的，而本期教程我們主要是以網頁版來進行講解，因爲使用的方法都是一樣的，而網頁版的功能更多。所以想充分利用好這個網站，首先需要創建一個賬號，點擊「登入」或「儲存」都會跳轉到建立賬戶的頁面。

建立賬戶有一個細節很關鍵，但是不方便在這裏講，我會放在課後的練習文件中，大家下載練習文件的時候可以留意一下。

創建完賬戶之後就可以登陸上去了，這時右上方的界面已經發生了變化。

首先是儲存的位置問題，畫面中的這些是我的賬號創建過的名稱，可以通過最下方「建立新資料庫」來命名，這個是很自由的沒有什麼標準，可以按照自己的方式來分類和命名。

然後是爲你想儲存的這組色卡命名，這裏我就隨便填了一個「演示」。

還可以爲你的色卡添加「標籤」，添加標籤是爲了方便通過關鍵詞查找，可以直接選擇系統提供的，也可以自己填寫，這裏我就選擇了一個系統提供的「Green」和自己添加的「藍綠」，標籤用英文和漢字都是可以的。

然後我們看下方有一個「發佈至 Color」，現在是點亮的狀態，選擇點亮狀態發佈你的這組顏色就進入到了全局色彩庫中，也就是共享的狀態，別人是可以看得到的，如果只想自己能看到，那就把它關掉。

然後點擊儲存，儲存好了之後右下方會彈出一個提示窗口，如果想查看你儲存的這個顏色可以點擊「檢視」，就會進入到這組顏色的界面。

如果想查看你儲存的所有顏色，可以點擊頂部的「我的資料庫」，這時就可以查看你儲存的所有顏色了。

大家可以看到，這些都是我之前儲存的一些顏色分組，這裏可以選擇資料庫的排序方式，現在是默認的按照「上次修改時間」來排序的，你也可以選擇按「名稱」來排序。

剛纔那組顏色我們儲存在了同類色這裏，我們打開同類色，大家可以看到，第一個就是我剛剛儲存的那組顏色，後面的是我之前儲存的一些。

我們點擊剛剛儲存的這個色卡，就會跳轉到這個色卡的頁面，當我們鼠標移動到相應的顏色上時，就會出現複製的字樣，單擊一下就已經複製這個顏色了。

這時我們回到設計軟件中，打開色板，「Ctrl+V」就粘貼進來了，就是剛剛我複製的那個綠色。

如果想同時複製這五個顏色的話，我們看右側這裏，提供了很多下載或複製的選項，其中對於設計師前兩個是比較常用的，後面一些涉及到代碼和計算機語言，如果你的工作會用到也可以使用，如果是平時作爲設計取色的話，用前兩個就可以了。

我們先來看第一個，「ASE」是一種色彩文件格式，主要針對於 Photoshop 或 Illustrator 這類設計軟件。

我們打開 Photoshop，點擊色板右上角，會彈出一個下拉菜單，點擊「載入色板」，選擇剛剛下載的這個文件，這時我們會發現這五個顏色就進入到色板當中了。雖然這是一個比較好的方式，但是我個人平時不太用，只是給大家提供一個選擇。

而我個人平時還是比較喜歡直接一點的，「下載爲 JPEG」，然後拖到軟件中直接用吸管吸取。

下載下來之後是一個圖片，打開後是這個樣子的，因爲圖片質量還是很高的，所以直接吸的話也不用擔心會出現色差。

吸取之後就可以應用了，比如這裏我們就用這組顏色來填充這個插畫圖形。當然了，針對這個插畫圖形這組配色還是可以的，比如樹木用綠色，房子用藍色，但是大家平時在工作的時候還要考慮設計的內容，儘量在前期就挑選符合的色彩組合，而不是盲目的填充。

剛纔我在儲存這組色卡的時候沒有選擇發佈，進入到色卡界面中也是可以隨時選擇發佈、編輯、刪除的。

同樣，「名稱」和「標籤」也可以隨時更改。

然後我們會看到下方還有兩個可以點擊的地方，我們先來看「潘通配色」。

點擊後會出現和這組顏色最接近的潘通色，同樣也提供下載。

最後是「色彩模式和代碼」，點擊之後會出現這組顏色的色值，總共有四組，也就是我們平時常用的四種色彩模式。以上就是我們在 Adobe Color 上儲存顏色的一個流程，操作上很簡單沒什麼難度，但是大家要知道重點不是爲了教大家這個方法，而是大家學會了這個方法之後，建立屬於自己的色彩庫。

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

其中中間的這個顏色上有一個三角形符號，這就代表了這個顏色是作爲主色和基色的，當你調整的時候，其他顏色是圍繞它來變化的。

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

現在是「RGB」模式，右側對應的就是可以調節的滑桿，只不過跟我們軟件中不同的是，這裏多了一個亮度的選項，方便調節。

我個人平時喜歡使用的是「HSV」模式，也就是 「HSB」，如果看過我之前教程的同學就應該知道，我是極力推薦使用「HSB」模式的，因爲它最符合人眼的視覺感受，色相、純度、明度一目瞭然，所見即所得。

大家可以看到這裏現在選擇的是「自訂」，相當於自定義模式，在這個模式下，你是可以隨意更改調整顏色的。

調整顏色可以直接在色輪上拖動調整，也可以拖動下方的滑桿，或者是手動輸入色值都可以。

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

我們先來看「類比」，也就是我們平時講的「同類色」，這裏提供的都是五個顏色， 當你選擇了相應的色彩搭配模式之後，無論是改變哪個顏色，它都是在這個規則下變動的。

得到了顏色之後我們就可以應用了，這裏我們就用這個海報來進行配色演示，這是類比色的效果。

然後是「單色」，當我們選擇單色模式的時候，大家會發現無論如果改變色相，得到的都是這個色相的單色模式，也就是在基色的基礎上進行純度和明度的變化。和類比不同的是，單色沒有色相上的變化，類比是色相左右的微弱變化。

同樣我們提取這組色卡對這個海報進行填充，效果是這樣的。

然後是「三元羣」，也就是三個對比色，因爲色相環是 360 度，所以平分成三份每一份 120 度。大家會看到這裏不僅可以改變色相，也可以改變純度明度，最外圈是純色，往內收就會降低純度和明度。我們在看色相關係的時候是不需要考慮純度和明度的，只看它們的色相位置，比如這個三元羣，無論你收縮到多麼靠內，它的色彩關係仍然是三元羣的關係。

我們填充這組顏色看看，三元羣因爲對比色的關係，所以通常配色效果在色相的對比上都是很強的。

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

同樣用這組顏色填充試試，可以看到補色的對比效果是最強烈的。

然後是「分割補色」，我們平時也叫做「分裂補色」，也就是一個顏色和它的互補色兩側的顏色的搭配，大家看色相環就明白了。雖然這裏可以調整角度幅度，但是調整過大的話，其實原則上已經不能算做是分割補色了，所以如果大家想用分割補色的話，建議還是使用它提供的默認角度比較好。

將這組分割補色提取出來進行填充，得到的就是這樣一個效果。

除了分割補色還有「雙分割補色」，也就是在分割補色的基礎上再增加基色兩側的兩個顏色，其實配色效果和分割補色差不多，只不過更適合你需要色相較多的情況，比如說如果你需要三個顏色，那就直接使用分割補色就行，如果三個顏色不夠，而你又不想改變配色的效果，那就使用雙分割補色，因爲新增加的兩個顏色距離基色很近，所以色相相差並不大，不會對整體的配色效果造成太大的改變。

我們試一下這個雙分割補色，五個純色的搭配，視覺效果還是很強烈、很刺激的。

接着是「正方形」配色，這個也很好理解了，從字面含義上就能夠明白是什麼意思，也就是在色相環上選擇正方形四個端點的顏色，也可以理解爲是十字形配色。這種配色形式的好處是對比適中，顏色豐富的同時又不會太亂，因爲彼此距離相等，所以會讓配色效果顯得很平衡。

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

然後是「複合」型配色，也就是在色相環上先選擇一對補色，然後在補色附近選擇其他顏色，而之後的顏色要在同一半球，這種配色形式大體效果接近補色，但是因爲同半球類比色的加入，多了一些變化，豐富了色彩層次，但是又不會產生強烈的衝突。

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

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

剛剛我們嘗試的這些配色效果並不是所有的方案都是好的，因爲這些都是直接使用 Adobe Color 提供的顏色進行填充的，並沒有進行任何的手動調整和配色的理論考量，目的就是爲了給大家展示用這個工具配色的效果，因爲工具的最大用途就是提供多種方案，所以大家在使用的時候不需要考慮太多，大膽地多去嘗試一些配色，最後根據視覺效果來選擇最符合設計內容並且最美觀的方案就可以了。

整個關於色輪的部分就給大家介紹完了 ，下面我們來看看「擷取主題」。

進入「擷取主題」頁面，上面寫的是從影像中抽取顏色，並將其另存爲調色盤，也就是可以上傳圖片，然後它會自動提取圖片中的主要顏色形成一個色卡，這個色卡我們可以直接使用也可以儲存下來。

這裏我們就用這個海報爲例，點擊上傳就可以。

如果覺得操作麻煩也可以直接拖進來，拖進來之後我們會看到這裏已經提取出色卡了。

左上方是可以選擇模式的，這些模式是根據黑色的量以及色彩強度來區分的。

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

當然如果有想吸取的顏色，也可以手動調整，想吸哪裏吸哪裏。

提取完圖片顏色之後，我們可以返回到色輪裏，這時色輪界面顯示的就是剛剛我們提取的這組色卡，同樣也可以保存到資料庫中。

「擷取主題」的右側是「擷取漸層」，同樣也是上傳圖片提取顏色，只不過是漸變的形式，默認是三個顏色，下方會有相應的色值信息。

左上角這裏可以改變漸變的數量，也可以手動去調整每一個顏色的位置。其實看到這裏大家會發現，這款工具是非常人性化的，它雖然爲我們提供了很多搭配方案，但同時又留給了我們可調整的空間。同樣漸變色也是可以儲存到我們的資料庫中的。

「擷取漸層」右側是「協助工具」，這是 Adobe Color 新增的一個功能，它是用來檢測顏色的，主要是針對於色盲人羣。

比如現在這組顏色。我們看它這裏出現了紅色感嘆號，提示我們 A、C、D 發生了衝突。

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

所以爲了對於色盲人羣表示友好，我們就需要調整這組顏色，直到出現綠色的對號，這時我們看即使在色盲眼中，這些顏色也是能夠區分出來的，這個協助工具就是這麼用的。

「協助工具」右側是「色彩遊戲」，也是整個「建立」部分中最後一個，這裏提供了一個色彩遊戲。

開始之後會有色彩閃爍，結束之後按出現的順序點擊你剛纔看到的顏色，第一關一個，第二關兩個，以此類推，這裏我簡單的玩了一下，大家看一下就明白了。

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

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

左上角這裏提供了關鍵詞搜索功能，可以通過具體顏色進行搜索，也可以輸入具象或抽象的詞彙來搜索，最關鍵的是可以直接輸入漢字。

比如這裏我搜索「粉色」，就會出現大量和粉色相關的圖片和色卡。

這個是搜索「水」得到的一些結果。

也可以是抽象或感性的詞彙，比如「喜慶」，它就出現了一些以紅色和黃色爲主的相關圖片。

當然這裏也是可以篩選的，不過通常情況下選擇「所有來源」就可以。

如果你看中了某一個圖片或色卡，當我們鼠標移動到它上方的時候，就會彈出一些選項，我們可以儲存到資料庫，也可以直接進行下載。

單擊就會進入到色板界面，如果你想進行其他操作，就和我們最開始講的是一樣的，只不過這裏多了一個圖片，而這個圖片也是可以點擊的，點擊之後就會進入到它的原始地址。

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

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

這裏我們就以這個圖片爲例。

上傳之後就會出現和這個圖片內容相近的圖片，它這裏就自動識別了電動車，所以出現的基本上都是自行車或電動車、摩托車，有的和色彩有關，有的和色彩無關，這個功能如果使用好也是非常方便工作的。

最後就是「趨勢」，這個和「搜索」其實本質上差不多，也是爲我們提供了很多圖片和色彩，不同的是它這裏爲我們提供了一些分類。

比如時尚、圖形設計、插圖、交互、建築、遊戲設計、荒野、風味、旅行等等，而這裏的圖庫主要來源於 Behance 和 Adobe Stock。

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

點進去之後也會進入到具體的頁面，同樣圖片也是可以點進去的。

比如這個點進去之後，就進入到了它的 Behance 界面，其實通過 Adobe Color 這個一個網站，就可以延伸到很多地方。

最後我又爲大家嘗試了幾個配色方案，同樣也是從 Adobe Color 上得到的顏色進行填充的，大家可以看一下。

△ 下載鏈接： https://pan.baidu.com/s/1UsHPekAEDk6NFljW33EMGw 提取碼：roni

本期教程中的案例，我會爲大家提供下載鏈接，大家下載下來之後可以當作一個配色練習，同時這裏還有我之前提到過的關於註冊賬戶的一個注意事項，請大家多多留意。

本期教程到這裏就結束了，我們爲大家介紹了一款非常好用的配色工具 Adobe Color，很簡單並沒有什麼難度，相信大家一定都學得會。當然，工具只是爲我們提供方便的，而不是主導我們的，所以在使用配色工具的時候最好是要有一定的理論基礎，有一定的理論作爲支撐會讓你在配色的過程中更加遊刃有餘並且有理可依。如果是作爲新手使用的話，我的建議還是多去嘗試，根據效果的好壞來選擇最終的方案。今天的內容就先到這裏，希望對大家有所幫助，我是無我，我們下期再見。

更多配色方法：

歡迎關注研習設的微信公衆號：「Yanxishe2017」