---
色彩，作為網頁或App設計的重要視覺元素之一，不僅能夠幫助UI/UX設計師有效地展示和突出界面或產品相關信息和功能， 而且還能夠輕鬆自然的流露和傳達設計師相應情感，迅速吸引用戶眼球的同時，引起用戶情感共鳴，從而幫助設計師打造美觀炫酷而不失實用性的網站/App設計。
總之，色彩的選擇和搭配也是網頁/App設計的重要組成部分，不容忽視。
而本文，為方便廣大UI/UX 設計師快速高效地選取設計所需色彩和配色方案，小編收集了22款國內外最新且最實用的免費色彩工具，希望對大家有所幫助：
最優設計工具，及時測試網頁/App配色方案，打造最佳視覺設計
在線色彩工具，顧名思義，就是一些基於網頁或雲端的在線色彩選擇和搭配的設計工具。設計師使用時，無需安裝，亦不受時間和地點的限制， 十分方便快捷。而下面是小編為大家搜集的幾款非常實用的在線色彩工具：
1. Coolors – 超簡單實用的在線色彩搭配工具Coolors是一款超簡單實用的網頁端色彩搭配工具。支持設計師在線創建、保存、分享以及導出各類Web/App配色方案。其簡潔易懂的用戶指南，對於設計師，尤其是設計初學者而言，也是超級貼心實用。
而且，對於那些常用Adobe工具來完成各類設計的設計師，Coolors還貼心的為他們提供了Adobe插件福利。快速安裝之後，簡單點擊即可創建和復用各類配色方案。此外，其iOS移動端版本，也極大的方便了iOS手機用戶。
2. Flat UI Colors – 超快速的免費在線配色工具當網頁/App設計時間緊迫，設計師需要快速搭建或選擇界面配色時， Flat UI Colors會是一款非常適用的工具。
作為一款快速在線配色工具，Flat UI Colors為設計師們提供了13款根據世界各地設計師喜好打造的優質配色方案。設計師簡單粘貼複製，即可將需要的配色方案直接應用到他們設計項目之中， 方便易用。訪問地址：https://flatuicolors.com/
3. Colordot– 超易用的免費在線色彩選擇工具Colordot是由Hailpixel推出的一款超易用的在線色彩選擇工具。用戶簡單點擊或滾動滑鼠即可選擇色彩、創建需要的色彩搭配方案。其iOS移動端版本也非常簡潔易用，支持各類手勢選擇和分享各種色彩/配色方案。訪問地址：https://color.hailpixel.com/
4. Colourco - 超簡潔的在線色彩工具Colorurco是一款超簡潔易用的在線色彩工具。允許設計師根據需要選擇色彩，搭建和下載最佳的色彩搭配方案。與以上分析的Colordot類似， 但提供了更多定製化的色彩編輯、選擇和搭建工具。訪問地址：https://colourco.de/
5. Color Supply – 超簡單有趣的在線配色工具不同以上提及的所有在線色彩工具，通過逐個添加色彩來搭建最佳配色方案，此款超簡單有趣的在線配色工具選用了非常直觀炫酷的色輪設計，來供用戶一次性選擇兩種、三種甚至四種所需色彩。而且，色彩選擇完成之後，右側還會適時展示的一系列相關色彩搭配方案。對於設計師而言，無論是直接選用， 還是尋找設計靈感，右側的配色方案都是非常實用的。訪問地址：https://colorsupplyyy.com/app/然後，下面跟著小編一起來了解幾款最佳色彩選擇工具（又稱取色器）：
6. Adobe Color CC – 超優質高效的取色工具Adobe Color CC（也稱「Adobe Kuler」）是一款非常優質高效的取色工具。支持用戶一次性打造擁有5種顏色的界面配色方案。其自動生成圖片相關配色的功能，也是非常優質實用。用戶簡單上傳所需圖片，即可輕鬆獲取對應的配色，無需重新逐一搭建。所以，如若作為設計師的你，正好慣用 Adobe工具， 希望在項目設計中，直接獲取和沿用選中圖片的配色，Adobe Color CC無疑是你的最佳小幫手。訪問地址：https://color.adobe.com/create
7. HTML Color Picker– 超適合新手選用的免費HTML色彩選取工具作為w3schools.com在線HTML/CSS教程網站的附加工具， HTML Color Picker是一款十分適合網頁設計新手選用的免費HTML色彩選取工具。當然，如若你正好也在通過w3schools.com學習網頁設計相關基礎知識，此款色彩工具無疑是你學習和應用相關設計技巧的最佳工具。訪問地址：https://www.w3schools.com/colors/colors_picker.asp
8. HTML Color Codes – 超方便的色彩選取和復用工具作為一款非常方便實用的色彩工具，HTML Color Codes能夠幫助設計師輕鬆選取色彩，搭建、下載並導出相關配色，以供後期使用。支持多種導出格式，例如Hex、 RGB、 HTML、CSS和SCSS等等。支持一次性打造由6種色彩搭建的配色方案。
總之，HTML Color Codes是一款非常適合設計師隨時搭建、復用以及導出相關項目配色方案的工具。訪問地址：https://htmlcolorcodes.com/color-picker/
9. Image Color Picker –超快速的免費圖片取色工具就如其名稱所暗示的那樣，Image Color Picker是一款超快速的免費圖片取色工具。用戶簡單上傳所需圖片，即可快速獲取圖片對應的色彩、配色、HTML編碼以及HEX/RGB/HSV色值等。而且，作為一款極快速的色彩工具， 用戶亦可簡單輸入相關網頁或圖片連結，來輕鬆獲取對應色彩信息。訪問地址：https://imagecolorpicker.com/
10. Web Fx Color Picker –超快速的色彩選取和配色生成工具此款超快速的色彩選取和配色生成工具，允許設計師快速搭建擁有12種色彩的配色方案。如若需要，設計師亦可輕鬆點擊，生成對應連結，分享相應配色，簡單快速。訪問地址：https://www.webfx.com/web-design/color-picker/色彩搭配工具（亦簡稱「配色工具」）也是設計師快速搭建和選擇配色，提升工作效率的重要工具：
11. Hue Snap – 定製化的色彩搭配和分享工具Hue Snap是一款定製化的色彩搭配和分享工具。支持上傳圖片自動獲取配色方案和手動逐個搭建配色的兩種設計方式。若需要，亦可簡單點擊，通過Facebook等社交平臺進行配色分享。當然，如若作為設計師的你，正好對於如何為Web/App設計和搭建最佳配色方案毫無頭緒， 不用擔心。簡單點開其「Explore」板塊， 即可輕鬆查看其他設計師分享的各類配色，獲取設計靈感。訪問地址：https://www.huesnap.com/
12. Canva ColorPalette Generator – 超易用的圖片配色生成工具通過此款超易用的圖片配色工具，設計師可簡單拖拽圖片到工作區，快速創建最佳Web/App項目配色。訪問地址：https://www.canva.com/colors/color-palette-generator/
13. Colormind – 超高效的網頁端配色工具同其他配色工具一樣， 此款工具也需要用戶逐個添加色彩，搭建所需配色方案。支持添加包含5種色彩的配色方案的創建。但不同之處在於，作為一款網頁端的配色工具，Colormind允許設計師用戶及時查看配色在具體網頁設計中，比如Landing Page以及對應界面組件（例如導航欄，按鈕以及工具條等）的應用效果， 從幫助設計師更加準確的搭建和選擇配色。訪問地址：http://colormind.io/bootstrap/
14. Color Hunt – 超實用的免費色彩搭配和靈感獲取工具就如其名稱所暗示的那樣，Color Hunt， 除了支持設計師直接創建配色之外，還為用戶提供了強大的配色庫。設計師們可簡單通過其貼心的過濾器和搜索功能，搜尋最佳項目配色方案，獲取設計靈感。訪問地址：https://colorhunt.co/Material design作為最熱的網頁/App設計潮流之一， 也同時催生了一些列高效實用的Material design配色工具：
15. Material Design Palette – 超簡單的Materialdesign配色生成工具通過此款色彩工具，設計師選擇兩種色彩即可查看一些列相關Material design配色方案。需要時，亦可下載並導出相應配色。支持CSS, SASS, SVG, XML和PNG等多種導出格式。而且，Material Design Palette也支持設計師輕鬆選擇和下載Material design相關圖標和色彩，加速網頁/App設計進程。訪問地址：https://www.materialpalette.com/
16. Material IO – 超高效的配色創建和UI應用工具作為一款超優質高效的色彩工具，Material IO不僅支持創建配色的一些常規功能，還支持用戶將選中的配色立即運用到實際的App界面設計中，及時查看其適用性和可訪問性等等。這一點，對於需要搭建移動端App配色方案的設計師，是非常實用的。訪問地址：https://material.io/tools/color/瀏覽器取色小工具，也是設計師及時獲取所需色彩，搭建和設計最佳UI配色方案的重要工具。以下小摹為大家介紹兩款Google瀏覽器相關的取色小工具：
17. Site Palette –隨時獲取任何網頁色彩作為Google瀏覽器的用戶，此款取色工具無疑是設計師們的必備選擇。平時瀏覽網頁時，設計師即可輕鬆點擊網頁，獲取任何頁面任何坐標的色彩， 以便高效快速搭建所需配色。
訪問地址：https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh?hl=en-GB
18. Colorzilla – Google 和Firefox瀏覽器都適用的取色工具此款Google 和Firefox瀏覽器都適用的取色工具，為用戶提供了非常實用的色彩工具，例如取色工具、漸變工具等。安裝此款擴展工具後，設計師可簡單點獲取界面相關色彩，編輯之後，直接複製粘貼，即可應用到需要的項目中。訪問地址：https://www.colorzilla.com/
19. Gradients – 免費的漸變工具如若項目設計中需要各類漸變色，此款免費的漸變工具會非常有用。訪問地址：http://gradients.io/
20. Color Kuler – 從Intagram獲取配色的色彩工具Intagram，作為設計師廣泛使用的社交平臺之一，展示了很多優秀的web或app設計。而且其中各類優秀設計所使用的色彩和配色，也是非常值得學習和借鑑的。而本款色彩工具，就為希望直接從Intagram等社交平臺直接獲取各類色彩和配色的用戶，提供了便利。訪問地址：https://colorkuler.com/
21. Design Inspiration –查找配色設計靈感的工具當對於網頁/App配色設計毫無頭緒時，設計師可使用本款色彩工具，搜索和查看各類網頁或藝術作品的配色，獲取設計靈感。輕鬆輸入對應色彩或其他相關關鍵詞，即可查看各類設計，獲取設計靈感。訪問地址：https://www.designspiration.net/
22. Khroma – AI色彩工具Khroma AI是一款高效的AI色彩工具。設計師可一次性創建擁有多達50種色彩的配色方案。總之，以上就是小編為大家收集的22款最新最實用的色彩配色工具。
下面的配色書籍是我平時閱讀的，建議大家去購買提升自己的配色基礎與能力，加油各位！結 語色彩，作為最重要的界面視覺元素之一，是Web/App設計吸引和留住用戶的重要手段。而是否能夠選擇一款優質高效且得心應手的色彩配色工具，也是設計師是否能夠成功打造最優Web/App設計的重要條件。所以，小編希望以上介紹的22款色彩工具能夠對廣大設計師有所幫助。
---
# 近期推薦
- 本期完 -