無論是平面設計、服裝設計、室內設計、交互設計；還是純藝術、攝影、珠寶、動畫……

色彩搭配的好壞都是非常重要的。

一個好的配色，可以讓你的作品集眼前一亮，也可以讓你最終呈現的作品效果達到最佳。

今天就來和大傢分享一些我從開始學習設計以來，使用過的7個免費的實用配色網站。

1、Nipponcolor——日式傳統色

Nipponcolor 收錄瞭很多日本傳統色，網站設計十分唯美，每個顏色的名字也很好聽。顏色的編碼可以被簡單的復制並使用。在做日式風格設計時這些顏色就可以被用上啦。

網站鏈接：http://nipponcolors.com/

2、Chinese colors——中國傳統色

和網站 Nipponcolor 在網頁設計上很相似，Chinese colors 收錄瞭很多中國傳統色，每個顏色被賦予飽含古風韻味的名字。在做中國古風主題設計時這些顏色可以被提取運用起來瞭。

網站鏈接：http://zhongguose.com

3、Adobe color——出自adobe之手，挽救零基礎學設計的同學

沒有系統學過設計配色的小夥伴，在設計做到配色階段，往往會感到糾結和絕望，那麼 adobe color 提供的配色方案也許能夠幫助到你。在剛開始學習設計時我也經常會使用 adobe-color 進行配色。

網站鏈接：https://color.adobe.com/zh/create/color-wheel/

在網頁的左側有一個叫做 color rule 的項目欄，color rule 中提供7種不同的模式，分別為analogous (相近色)，monochromatic (單色)，triad (三元群)，complementary (補色)， compound(復合色)，shades (濃度)和 custom (自定義)。

色盤上的拾色桿是可以隨意拖動的，輕易的就可以得到一組完美的配色。

Adobe colors還有一個功能讓我感興趣——extract from an image。上傳一張喜歡的圖片，根據adobe color提供的顏色取用模式（extract using color mood），分別為colorful（色彩），bright（明亮），muted（柔和）, deep (深度), dark (暗色),none(自定義)。

根據你選取的顏色的模式adobe color 為你提供一組拾色與配色方案。

4、Paletton——為你做的網站設計選擇配色吧

網站地址：http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

和adobe color 很像paletton也為中庸著提供瞭四種取色模式，monochromatic（單色），adjacent colors（相近色），triad（三元群），tetrad（四分色），free style（自定義）。

網站的一個亮點在於網頁下方有一個example……選項，點擊後你就可以預覽你選取的顏色在網站上實際運用的效果。與此同時在網頁左側的功能欄還有 artwork 和 animated 選項，可以預覽你選擇的顏色做成藝術效果圖和動畫時的效果，挺有趣的。

接下來選擇 color table export 就可以把剛選好的色條導出來。匯出 CSS 格式就可以復制直接用於自己的網頁專案啦。

5、Material UI——不同領域最popular顏色所匯集而成的配色板

Material UI 匯集六種不同主題的配色版分別是material design color（材料設計顏色）， flat UI color（扁平化UI設計顏色），fluent design colors（流暢的設計顏色），social colors（社交軟件顏色） ，metro colors（汽車設計顏色）和HTML colors（網頁設計顏色）。點擊顏色就可以直接把顏色的編號進行復制。

網站地址：https://www.materialui.co/

其中我覺得最有趣的是 social colors（社交軟件顏色）其中包含著36個社交 app 的主體配色。

6、Palettable——喜歡 or 不喜歡

Palettable 通過簡單的問題 like or dislike？ 為用戶選擇與提供一套個性化的配色方案。簡約的網頁設計與簡單的使用方式都為用戶使用時的體驗感加分不少。

網站地址：https://www.palettable.io/A0918A

每個顏色上都有顏色所對應的編號方便復制取用，當選色完成時也可以導出為 png 格式。

7、LOLCOLORS——可愛的網站設計配色

簡單可愛的配色網站，收集的顏色以明亮活潑為主。當鼠標移動到每個水滴上都會出現那個顏色的編號，可以方便提取和參考使用，根據配色版背收藏的數字也可以瞭解用戶配色方案的喜愛程度。

網站鏈接：https://www.webdesignrankings.com/resources/lolcolors/

學藝術的你可以把這篇文章收藏起來，以後在遇到配色的問題，不妨試一試這些網站。

文章來源：https://zhuanlan.zhihu.com/p/69597232