摹客
產(chǎn)品
下載
色彩，作為網(wǎng)頁(yè)或App設(shè)計(jì)的重要視覺元素之一，不僅能夠幫助UI/UX設(shè)計(jì)師有效地展示和突出界面或產(chǎn)品相關(guān)信息和功能， 而且還能夠輕松自然的流露和傳達(dá)設(shè)計(jì)師相應(yīng)情感，迅速吸引用戶眼球的同時(shí)，引起用戶情感共鳴，從而幫助設(shè)計(jì)師打造美觀炫酷而不失實(shí)用性的網(wǎng)站/App設(shè)計(jì)。
總之，色彩的選擇和搭配也是網(wǎng)頁(yè)/App設(shè)計(jì)的重要組成部分，不容忽視。
而本文，為方便廣大UI/UX 設(shè)計(jì)師快速高效地選取設(shè)計(jì)所需色彩和配色方案，小編收集了22款國(guó)內(nèi)外最新且最實(shí)用的免費(fèi)色彩工具，希望對(duì)大家有所幫助：
內(nèi)容概要：
在線色彩工具，顧名思義，就是一些基于網(wǎng)頁(yè)或云端的在線色彩選擇和搭配的設(shè)計(jì)工具。設(shè)計(jì)師使用時(shí)，無需安裝，亦不受時(shí)間和地點(diǎn)的限制， 十分方便快捷。
而下面是小編為大家搜集的幾款非常實(shí)用的在線色彩工具：
Coolors是一款超簡(jiǎn)單實(shí)用的網(wǎng)頁(yè)端色彩搭配工具。支持設(shè)計(jì)師在線創(chuàng)建、保存、分享以及導(dǎo)出各類Web/App配色方案。其簡(jiǎn)潔易懂的用戶指南，對(duì)于設(shè)計(jì)師，尤其是設(shè)計(jì)初學(xué)者而言，也是超級(jí)貼心實(shí)用。
而且，對(duì)于那些常用Adobe工具來完成各類設(shè)計(jì)的設(shè)計(jì)師，Coolors還貼心的為他們提供了Adobe插件福利?？焖侔惭b之后，簡(jiǎn)單點(diǎn)擊即可創(chuàng)建和復(fù)用各類配色方案。
此外，其iOS移動(dòng)端版本，也極大的方便了iOS手機(jī)用戶。
當(dāng)網(wǎng)頁(yè)/App設(shè)計(jì)時(shí)間緊迫，設(shè)計(jì)師需要快速搭建或選擇界面配色時(shí)， Flat UI Colors會(huì)是一款非常適用的工具。
作為一款快速在線配色工具，F(xiàn)lat UI Colors為設(shè)計(jì)師們提供了13款根據(jù)世界各地設(shè)計(jì)師喜好打造的優(yōu)質(zhì)配色方案。設(shè)計(jì)師簡(jiǎn)單粘貼復(fù)制，即可將需要的配色方案直接應(yīng)用到他們?cè)O(shè)計(jì)項(xiàng)目之中， 方便易用。
Colordot是由Hailpixel推出的一款超易用的在線色彩選擇工具。用戶簡(jiǎn)單點(diǎn)擊或滾動(dòng)鼠標(biāo)即可選擇色彩、創(chuàng)建需要的色彩搭配方案。
其iOS移動(dòng)端版本也非常簡(jiǎn)潔易用，支持各類手勢(shì)選擇和分享各種色彩/配色方案。
Colorurco是一款超簡(jiǎn)潔易用的在線色彩工具。允許設(shè)計(jì)師根據(jù)需要選擇色彩，搭建和下載最佳的色彩搭配方案。與以上分析的Colordot類似， 但提供了更多定制化的色彩編輯、選擇和搭建工具。
不同以上提及的所有在線色彩工具，通過逐個(gè)添加色彩來搭建最佳配色方案，此款超簡(jiǎn)單有趣的在線配色工具選用了非常直觀炫酷的色輪設(shè)計(jì)，來供用戶一次性選擇兩種、三種甚至四種所需色彩。
而且，色彩選擇完成之后，右側(cè)還會(huì)適時(shí)展示的一系列相關(guān)色彩搭配方案。對(duì)于設(shè)計(jì)師而言，無論是直接選用， 還是尋找設(shè)計(jì)靈感，右側(cè)的配色方案都是非常實(shí)用的。
然后，下面跟著小編一起來了解幾款最佳色彩選擇工具（又稱取色器）：
Adobe Color CC（也稱“Adobe Kuler”）是一款非常優(yōu)質(zhì)高效的取色工具。支持用戶一次性打造擁有5種顏色的界面配色方案。
其自動(dòng)生成圖片相關(guān)配色的功能，也是非常優(yōu)質(zhì)實(shí)用。用戶簡(jiǎn)單上傳所需圖片，即可輕松獲取對(duì)應(yīng)的配色，無需重新逐一搭建。
所以，如若作為設(shè)計(jì)師的你，正好慣用 Adobe工具， 希望在項(xiàng)目設(shè)計(jì)中，直接獲取和沿用選中圖片的配色，Adobe Color CC無疑是你的最佳小幫手。
作為w3schools.com在線HTML/CSS教程網(wǎng)站的附加工具， HTML Color Picker是一款十分適合網(wǎng)頁(yè)設(shè)計(jì)新手選用的免費(fèi)HTML色彩選取工具。
當(dāng)然，如若你正好也在通過w3schools.com學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)相關(guān)基礎(chǔ)知識(shí)，此款色彩工具無疑是你學(xué)習(xí)和應(yīng)用相關(guān)設(shè)計(jì)技巧的最佳工具。
作為一款非常方便實(shí)用的色彩工具，HTML Color Codes能夠幫助設(shè)計(jì)師輕松選取色彩，搭建、下載并導(dǎo)出相關(guān)配色，以供后期使用。支持多種導(dǎo)出格式，例如Hex、 RGB、 HTML、CSS和SCSS等等。支持一次性打造由6種色彩搭建的配色方案。
總之，HTML Color Codes是一款非常適合設(shè)計(jì)師隨時(shí)搭建、復(fù)用以及導(dǎo)出相關(guān)項(xiàng)目配色方案的工具。
就如其名稱所暗示的那樣，Image Color Picker是一款超快速的免費(fèi)圖片取色工具。用戶簡(jiǎn)單上傳所需圖片，即可快速獲取圖片對(duì)應(yīng)的色彩、配色、HTML編碼以及HEX/RGB/HSV色值等。
而且，作為一款極快速的色彩工具， 用戶亦可簡(jiǎn)單輸入相關(guān)網(wǎng)頁(yè)或圖片鏈接，來輕松獲取對(duì)應(yīng)色彩信息。
此款超快速的色彩選取和配色生成工具，允許設(shè)計(jì)師快速搭建擁有12種色彩的配色方案。如若需要，設(shè)計(jì)師亦可輕松點(diǎn)擊，生成對(duì)應(yīng)鏈接，分享相應(yīng)配色，簡(jiǎn)單快速。
色彩搭配工具（亦簡(jiǎn)稱“配色工具”）也是設(shè)計(jì)師快速搭建和選擇配色，提升工作效率的重要工具：
Hue Snap是一款定制化的色彩搭配和分享工具。支持上傳圖片自動(dòng)獲取配色方案和手動(dòng)逐個(gè)搭建配色的兩種設(shè)計(jì)方式。若需要，亦可簡(jiǎn)單點(diǎn)擊，通過Facebook等社交平臺(tái)進(jìn)行配色分享。
當(dāng)然，如若作為設(shè)計(jì)師的你，正好對(duì)于如何為Web/App設(shè)計(jì)和搭建最佳配色方案毫無頭緒， 不用擔(dān)心。簡(jiǎn)單點(diǎn)開其“Explore”板塊， 即可輕松查看其他設(shè)計(jì)師分享的各類配色，獲取設(shè)計(jì)靈感。
其手機(jī)端版本也非常有效實(shí)用。
通過此款超易用的圖片配色工具，設(shè)計(jì)師可簡(jiǎn)單拖拽圖片到工作區(qū)，快速創(chuàng)建最佳Web/App項(xiàng)目配色。
同其他配色工具一樣， 此款工具也需要用戶逐個(gè)添加色彩，搭建所需配色方案。支持添加包含5種色彩的配色方案的創(chuàng)建。
但不同之處在于，作為一款網(wǎng)頁(yè)端的配色工具，Colormind允許設(shè)計(jì)師用戶及時(shí)查看配色在具體網(wǎng)頁(yè)設(shè)計(jì)中，比如Landing Page以及對(duì)應(yīng)界面組件（例如導(dǎo)航欄，按鈕以及工具條等）的應(yīng)用效果， 從幫助設(shè)計(jì)師更加準(zhǔn)確的搭建和選擇配色。
就如其名稱所暗示的那樣，Color Hunt， 除了支持設(shè)計(jì)師直接創(chuàng)建配色之外，還為用戶提供了強(qiáng)大的配色庫(kù)。設(shè)計(jì)師們可簡(jiǎn)單通過其貼心的過濾器和搜索功能，搜尋最佳項(xiàng)目配色方案，獲取設(shè)計(jì)靈感。
Material design作為最熱的網(wǎng)頁(yè)/App設(shè)計(jì)潮流之一， 也同時(shí)催生了一些列高效實(shí)用的Material design配色工具：
通過此款色彩工具，設(shè)計(jì)師選擇兩種色彩即可查看一些列相關(guān)Material design配色方案。需要時(shí)，亦可下載并導(dǎo)出相應(yīng)配色。支持CSS, SASS, SVG, XML和PNG等多種導(dǎo)出格式。
而且，Material Design Palette也支持設(shè)計(jì)師輕松選擇和下載Material design相關(guān)圖標(biāo)和色彩，加速網(wǎng)頁(yè)/App設(shè)計(jì)進(jìn)程。
作為一款超優(yōu)質(zhì)高效的色彩工具，Material IO不僅支持創(chuàng)建配色的一些常規(guī)功能，還支持用戶將選中的配色立即運(yùn)用到實(shí)際的App界面設(shè)計(jì)中，及時(shí)查看其適用性和可訪問性等等。
這一點(diǎn)，對(duì)于需要搭建移動(dòng)端App配色方案的設(shè)計(jì)師，是非常實(shí)用的。
相關(guān)閱讀：Material Design配色難？11條設(shè)計(jì)資源給你靈感！
瀏覽器取色小工具，也是設(shè)計(jì)師及時(shí)獲取所需色彩，搭建和設(shè)計(jì)最佳UI配色方案的重要工具。
以下小編為大家介紹兩款Google瀏覽器相關(guān)的取色小工具：
作為Google瀏覽器的用戶，此款取色工具無疑是設(shè)計(jì)師們的必備選擇。平時(shí)瀏覽網(wǎng)頁(yè)時(shí)，設(shè)計(jì)師即可輕松點(diǎn)擊網(wǎng)頁(yè)，獲取任何頁(yè)面任何坐標(biāo)的色彩， 以便高效快速搭建所需配色。
此款Google 和Firefox瀏覽器都適用的取色工具，為用戶提供了非常實(shí)用的色彩工具，例如取色工具、漸變工具等。安裝此款擴(kuò)展工具后，設(shè)計(jì)師可簡(jiǎn)單點(diǎn)獲取界面相關(guān)色彩，編輯之后，直接復(fù)制粘貼，即可應(yīng)用到需要的項(xiàng)目中。
如若項(xiàng)目設(shè)計(jì)中需要各類漸變色，此款免費(fèi)的漸變工具會(huì)非常有用。
相關(guān)閱讀：巧用漸變色打造精致移動(dòng)端APP
Intagram，作為設(shè)計(jì)師廣泛使用的社交平臺(tái)之一，展示了很多優(yōu)秀的web或app設(shè)計(jì)。 而且其中各類優(yōu)秀設(shè)計(jì)所使用的色彩和配色，也是非常值得學(xué)習(xí)和借鑒的。
而本款色彩工具，就為希望直接從Intagram等社交平臺(tái)直接獲取各類色彩和配色的用戶，提供了便利。
當(dāng)對(duì)于網(wǎng)頁(yè)/App配色設(shè)計(jì)毫無頭緒時(shí)，設(shè)計(jì)師可使用本款色彩工具，搜索和查看各類網(wǎng)頁(yè)或藝術(shù)作品的配色，獲取設(shè)計(jì)靈感。
輕松輸入對(duì)應(yīng)色彩或其他相關(guān)關(guān)鍵詞，即可查看各類設(shè)計(jì)，獲取設(shè)計(jì)靈感。
Khroma AI是一款高效的AI色彩工具。設(shè)計(jì)師可一次性創(chuàng)建擁有多達(dá)50種色彩的配色方案。
總之，以上就是小編為大家收集的22款最新最實(shí)用的色彩配色工具。
色彩，作為最重要的界面視覺元素之一，是Web/App設(shè)計(jì)吸引和留住用戶的重要手段。而是否能夠選擇一款優(yōu)質(zhì)高效且得心應(yīng)手的色彩配色工具，也是設(shè)計(jì)師是否能夠成功打造最優(yōu)Web/App設(shè)計(jì)的重要條件。
所以，小編希望以上介紹的22款色彩工具能夠?qū)V大設(shè)計(jì)師有所幫助。
如何快速掌握正確的UI配色方案？6種技巧不容錯(cuò)過！
摹客協(xié)作
摹客RP
摹客DT
摹客超級(jí)版