配色能力不行,配色工具來湊!

2021-01-15 UI設計思維


色彩,作為網頁或App設計的重要視覺元素之一,不僅能夠幫助UI/UX設計師有效地展示和突出界面或產品相關信息和功能,。


而且還能夠輕鬆自然的流露和傳達設計師相應情感,迅速吸引用戶眼球的同時,引起用戶情感共鳴,從而幫助設計師打造美觀炫酷而不失實用性的網站/App設計。


總之,色彩的選擇和搭配也是網頁/App設計的重要組成部分,不容忽視。


而本文,為方便廣大UI/UX 設計師快速高效地選取設計所需色彩和配色方案,小編收集了22款國內外最新且最實用的免費色彩工具,希望對大家有所幫助:




在線色彩工具,顧名思義,就是一些基於網頁或雲端的在線色彩選擇和搭配的設計工具。設計師使用時,無需安裝,亦不受時間和地點的限制, 十分方便快捷。


而下面是小編為大家搜集的幾款非常實用的在線色彩工具:



1. Coolors – 超簡單實用的在線色彩搭配工具



Coolors是一款超簡單實用的網頁端色彩搭配工具。支持設計師在線創建、保存、分享以及導出各類Web/App配色方案。


其簡潔易懂的用戶指南,對於設計師,尤其是設計初學者而言,也是超級貼心實用。


而且,對於那些常用Adobe工具來完成各類設計的設計師,Coolors還貼心的為他們提供了Adobe插件福利。快速安裝之後,簡單點擊即可創建和復用各類配色方案。


此外,其iOS移動端版本,也極大的方便了iOS手機用戶。


訪問地址:https://coolors.co/



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種色彩的配色方案。


訪問地址:http://khroma.co/


總之,以上就是小編為大家收集的22款最新最實用的色彩配色工具,希望以上介紹的22款色彩工具能夠對廣大設計師有所幫助。



結 語


色彩,作為最重要的界面視覺元素之一,是Web/App設計吸引和留住用戶的重要手段。而是否能夠選擇一款優質高效且得心應手的色彩配色工具,也是設計師是否能夠成功打造最優Web/App設計的重要條件。


覺得有用請轉發分享給好友,點個在看,持續分享更多設計乾貨文章。


企業認證  UI設計0基礎入門到就業系統課程↓↓↓↓ 

相關焦點

  • 配色能力不行,配色工具來湊 ~太好用了吧
    而且,對於那些常用Adobe工具來完成各類設計的設計師,Coolors還貼心的為他們提供了Adobe插件福利。快速安裝之後,簡單點擊即可創建和復用各類配色方案。此外,其iOS移動端版本,也極大的方便了iOS手機用戶。
  • 插畫師必備配色參考工具
    下面和大家分享一下一些不錯的配色參考工具,希望對大家有所幫助。,你可以保存自己喜歡的配色和分享給自己朋友。網址連結:https://colourco.de/網站介紹:Colourco 是一個在線配色的工具
  • 只需一個工具,搞定史上最簡單的PPT配色技巧~
    好的配色,是 PPT 的第一皮囊,也是打動領導、打動觀眾的第一步。今天,就來給大家分享一波配色妙招~而且配色具備一定專業性,所以不是每一個人都具備此項能力。我們怎樣去搭配顏色呢?專業的人做專業的事情嘛,既然咱們沒有專業能力去配色,那麼我們為何不能從專業的設計中去「竊色」呢~沒有配色能力,但是我們一定具備審美判斷配色的能力。所以,為大家推薦取色之法:
  • [一文獲得配色能力]一勞永逸的配色方案,6大配色系統大放送(上)
    從此以後,色輪將是你一直使用的色彩工具,如果沒有色輪你將很難進行初級的配色。這一章將是6種配色方法的學習,我們使用色輪來展現這種配色過程。因此,如果你還不明白色彩的三屬性以及基礎色彩理論,我想你值得看一看我的往期文章,去學習這些基礎理論,這是你看懂本章的基礎。
  • 我做設計不行,但配色還是可以的!
    畢竟大家都不想看辣眼睛的圖  文末附配色色卡/配色神器 今天來聊聊配色在圖紙中的表達一張優秀的圖紙肯定是同時包含了清晰的邏輯表達以及美學的藝術化修飾平面圖的配色打造一張完美的平面圖效果圖的配色效果圖的合理配色,可以迅速提升畫面的逼格,用色彩區打造氛圍,讓你的設計可以更奪人眼球,特別是在打造競賽風的效果圖。
  • 第五章丨PPT配色的設計,怎樣的配色會讓人覺得舒服?
    接下來主要的問題來了,如何才能更好的用好XML主題色呢?下面逐一為大家分享一下。1、PPT xml文件夾位置設置PPTxml文件需要放在電腦C盤中相應的文件中才能生效。這裡再給大家分享一個方法,快速使用主題色工具,那就是設置快速訪問工具欄。3、獲取XML這時問題又來了,怎麼才能獲取XML主題色文件呢?一般需要在網上搜索或在國外的PPT網站裡面獲取XML文件。
  • PPT配色太辣眼?Adobe家這款免費工具,幫你一鍵生成高級配色!
    相信很多人都有同樣的問題,平時做出來的PPT配色是這樣的:然而大神們的PPT配色是這樣的:這樣的:為了方便大家平時做PPT時,快速做出高級感PPT,我為大家整理了46種經典配色方案。關注我的百家號,回復關鍵詞【PPT配色】,一鍵免費獲取我整理的46種經典配色色卡。用的都是一個PPT軟體,為什麼他們那麼秀?
  • 數據可視化配色指南:三大配色方法,做出諮詢報告一樣的圖表
    可是學習色彩設計,又是十分費工夫的一件事,不僅要搞明白RGB、CMYK等各種顏色體系,搞懂各種配色方法,重點是還要看大量的案例,培養良好的審美觀,防止自己做出來的東西辣眼睛……不如我們來「一文學會」系列吧,這篇Michael Yi發在Medium上的文章,就簡單清晰的介紹了三種數據可視化中的配色方法,讓你的圖表看起來清晰、翔實、用戶體驗友好,就像諮詢公司的報告一樣專業。
  • 新手如何學習繪畫配色?超實用的繪畫配色指南10個配色網站
    說到配色,在很多線稿畫的不錯的「大神」一到配色環節就「慘不忍睹」結果就是上色的圖還沒有線稿好看。小白在上色過程中最常見的問題就是:色彩髒、亮色太亮、暗色太暗、色彩搭配不協調。那麼如何練習才能提高色感呢?首先必備的就是取色配色工具。與其冥思苦想,在還沒有基礎色彩搭配理念的時候可以通過不斷的嘗試、練習來提高色感。
  • 配色網站推薦,這些神仙配色太好看了!
    UIgradients裡面接近上百種漸變配色方案,設計師可根據自己風格來選擇搭配,此外我們還能直接獲得對應漸變配色的CSS代碼,相當方便,但要注意瀏覽器要兼容CSS3才行。https://webkul.github.io/coolhue/這也是一個漸變色配色網站。配色方案很多,使用也很方便。光標放到色塊上,點擊色塊上的<>標誌,出現「CSS3 Code Copied」就表示已經成功複製該色值。
  • 八種配色方案,解決你的配色頭痛症!
    這裡只單單討論配色的問題,色相。這次,我通過色環介紹八種配色方案。每種都有它的優點和缺點,你可以根據自己繪畫的圖像確定選擇哪種方法上色,當然,你也可以上配色網站,找相應的配色方案。決定配色方案的重要工具「色環」是什麼?
  • 分享 23 個超好用的配色參考工具,設計師、插畫師必備!
    設計師、插畫師想必是對於配色十分敏感的群體,對於初學者掌握好色彩搭配也並非易事。所以,小美今天就來分享 23 個私藏超好用的配色網站、APP 合集,幫大家拓展資源庫,從而更好地去運用色彩。你可以用 Fabrika 來 DIY 壁紙,你也可以用它來創作不重樣的裝飾藝術品。
  • 房子裝修配色學問大!大連天譽灣裝修指南配色篇
    怎麼選擇你的房子配色?相信很多業主都是憑自己的喜好來選擇家居的配色的,但是這其實有一些隱患,因為某些顏色從視覺上來看是有很強的刺激作用的,所以這裡建議業主朋友在裝修的過程中要選擇一個專業的設計師來給你一個專業的意見,當然了也可以先看看小蜜蜂的這篇配色說明。一,兒童房就是要鮮豔無比 ?
  • [一文獲得配色能力]一勞永逸的配色方案,6大配色系統大放送(中)
    在上一章節中,我們對6大配色中的兩種進行了簡要的闡述和詳細的案例展示。在本章節中,我們將要對6大配色中的三色系和互補色進行闡述。三色系三色系是由色輪上角度兩兩相等的三個色相組成。因此,它們之間總是相距120°。傳統色輪上的紅黃藍三基色就是一種三色系。
  • 色彩搭配 | 10個優質配色網站及配色技巧
    不管你是做平面設計或者包裝設計的時候,如果不懂專業的色彩搭配,我們往往可能做出大跌眼鏡的設計,連自己都看不下去,然而藉助一些在線的配色工具
  • 板繪配色技巧怎麼練?0基礎配色教學
    板繪配色技巧怎麼練?0基礎配色教學!很多人在上色的時候都會遇到上色髒、不知道使用什麼顏色比較好的等情況嗎,今天給大家分享幾個上色搭配的技巧!通過使用色相環來進行的8種配色的方法。其中每個方法都有它的長處和短處,所以在使用何種配色方案的時候請根據自己作品的風格來選擇。
  • 動漫如何上色配色?動漫配色技巧分享
    動漫如何上色配色?動漫配色技巧分享!微課菌平時會給大家分享一些配圖好看的作品,但每次發布出去後,留言和私信都是「我什麼時候能配出這樣的色彩?」「求大神指教色彩該怎麼搭配才好「一上色就廢,我還有救嗎......"上色廢?適合初學者的配色方法分享。
  • 來看看這些糟糕的配色典型~
    當我們討論配色的時候,通常聊的是配色趨勢、配色規則和配色方法,但是與此同時,我也應當合理的規避一些比較典型的錯誤配色方式。
  • 別再盲目使用配色工具書了!設計師要學會預測流行色!
    ,設計師的案頭必備  絕對是那些配色書    但配色不能只依賴工具書  如果能了解色彩的來源  明白色彩的規律  身為設計師,還會頭疼配色問題嗎?  潘通2019年度代表色 PANTONE 16-1546 Living Coral (珊瑚橘)  潘通色卡在設計中,是色彩溝通標準和工具,避免交流溝通中出現誤差。
  • PPT配色有哪些方法?分享幾種簡單的PPT配色技巧
    其實並不是,你只是不懂PPT配色的套路,學會以下配色技巧,即便你不是專業的設計師,也能輕鬆搞定PPT色彩搭配。>也可以根據PPT的風格來選擇顏色,比如商務風的PPT,通常比較適合用藍色。這裡可以藉助一些配色工具,也可以用軟體自帶色。03 軟體自帶色嫌工具麻煩,我們就用PPT自帶的配色方案,自帶的配色基本上能解決多數PPT配色問題。我們把軟體自帶色稍微整理下,以下幾組藍綠色配色方案,比較適合商務型幻燈片。