設計資源分享:配色篇－14個超實用的配色網站

凱文設計｜設計X工具X品牌

發佈於免費精選文章

2023/07/23閱讀時間約 9 分鐘

不管你本身是設計師或是從事需要跟設計師溝通的職業，了解一些實用的配色工具和方法都會很有幫助的，這次來幫大家介紹 14 款好用的配色工具和網站，幫助大家在配色沒有靈感時都能找到最棒的配色靈感。

01：PALETTABLE

一進入網站會自由跳出一種顏色，如果喜歡這個顏色可以按下 LIKE，不喜歡則按下 DISLIKE，按下後他會再換一個新顏色給你，最多會顯示五個顏色一組的配色，這些配色都是系統幫你搭配好的，如果最後選完有不喜歡的可以刪除再重新選擇。

最終還可以讓你把這些配色輸出成PNG圖檔，不管設計或畫圖時直接放在軟體內吸取顏色或是把這份配色圖交給執行的設計師參考都非常方便。

在配色完全沒靈感時我很喜歡用這個網站來隨意搭配看看，有時總會有些驚喜和新的靈感。

前往網站：https://www.palettable.io/

🖋️ 評分
實用：☻ ☻ ☻ ☻
趣味：☻ ☻ ☻
靈感：☻ ☻ ☻ ☻
（滿分五個笑臉，至於為什麼用笑臉，就想用，沒什麼原因XD）

02：BrandColors

這網站非常特別，他們蒐集了世界上各大品牌的品牌色，如果你想看看這些世界級的品牌是怎麼配色的，可以來參考看看，這網站比較適合當做參考，適合用來了解為何某些產業多數使用某種配色，有些大品牌的配色都是由專業設計公司調查與分析後去選擇的，如果剛好你也做品牌設計時，也許這些配色能給你一些靈感。

前往網站：http://brandcolors.net/

🖋️ 評分
實用：☻ ☻ ☻
趣味：☻ ☻ ☻ ☻
靈感：☻ ☻ ☻

03：Colorable

一個非常實用的網站，有時我們需要找到適合搭配的字體顏色和背景顏色，但是在設計軟體中嘗試搭配有時太慢又很難馬上看出在網頁呈現的效果，這個網站完全解決我們的需求，你可以針對你想要嘗試的字體和背景配色去做搭配，而且馬上就能看到呈現效果，可以說是一個實用度滿分的網站。

前往網站：https://colorable.jxnblk.com/

🖋️ 評分
實用：☻ ☻ ☻ ☻ ☻
趣味：☻ ☻
靈感：☻

04：COLOR LEAP

我非常喜歡各種有趣的配色，COLOR LEAP 這個網站依照時間軸的方式提供不同年代對應的配色，參考的配色都是當時的藝術創作或是海報設計，對於想要製作某些特定時代的設計或是當做靈感參考都非常棒，我覺得這個網站對我來說最棒的地方在於可以看到人類歷史上各種藝術創作和配色風格的改變，真的很有趣。

前往網站：https://colorleap.app/

🖋️ 評分
實用：☻ ☻ ☻
趣味：☻ ☻ ☻ ☻ ☻
靈感：☻ ☻ ☻ ☻

05：COLOR TOOL

這是一款非常實用的工具，是由 Google 開發專門提供給 UI 設計師或前端工程師參考的配色網站，可以選擇網站上提供的色票去選擇主要想搭配的顏色或是自己輸入想要的色號都可以，網站還提供各種不同版型的配色呈現參考，也能針對網頁上的字體顏色和透明度查看，對於需要做網頁色彩搭配的人可以說是神器。

選擇好配色後，還能點選網站上 Accessibility，還提供不同配色字體顏色適不適合呈現的參考，如果字體顏色不適合呈現在背景色上就會看到 NOT LEGIBLE 和驚嘆號標誌的提醒，也有透明度最小值的建議參考。

前往網站：https://material.io/resources/color/

🖋️ 評分
實用：☻ ☻ ☻ ☻ ☻
趣味：☻ ☻
靈感：☻ ☻ ☻

06：Adobe Color

Adobe 官方出的配色工具，使用上很多方便功能，可以快速的搭配出類比色、對比色、補色等等配色，在配色上非常方便且專業，所有顏色都有詳細的色碼、RGB 、HSB、LAB等模式可選，想要後續調整也都非常方便。

另外他還有擷取功能，可以抓照片的主題色票和漸層色，另外協助工具功能有對比度工具，可以讓我們找到文字跟底色的搭配要怎樣才清楚，這對於設計非常重要，資訊如果對比不強就會不好閱讀，他針對不同底色跟文字會有不同的「對比率」，對比率越高越清楚，這會有一判斷標準，如果你的對比會造成文字不好閱讀，他會有一個禁止符號，你就知道需要再做調整了，絕對是新手設計師的好幫手。

前往網站：https://color.adobe.com/zh/create/color-wheel

🖋️ 評分
實用：☻ ☻ ☻ ☻ ☻
趣味：☻ ☻
靈感：☻ ☻ ☻

07：NIPPON COLORS