配色能力不行,配色工具來湊 ~太好用了吧

2021-01-15 設計與配色


內容概要




最佳在線色彩工具


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


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


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配色工具


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/


最佳Google取色小工具


瀏覽器取色小工具,也是設計師及時獲取所需色彩,搭建和設計最佳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/


其它超實用UI/UX設計師必備色彩工具


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款最新最實用的色彩配色工具。


結 語


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


所以,小編希望以上介紹的22款色彩工具能夠對廣大設計師有所幫助。

相關焦點

  • 配色能力不行,配色工具來湊!
    作為一款快速在線配色工具,Flat UI Colors為設計師們提供了13款根據世界各地設計師喜好打造的優質配色方案。設計師簡單粘貼複製,即可將需要的配色方案直接應用到他們設計項目之中, 方便易用。不同以上提及的所有在線色彩工具,通過逐個添加色彩來搭建最佳配色方案,此款超簡單有趣的在線配色工具選用了非常直觀炫酷的色輪設計,來供用戶一次性選擇兩種、三種甚至四種所需色彩。
  • 分享 23 個超好用的配色參考工具,設計師、插畫師必備!
    設計師、插畫師想必是對於配色十分敏感的群體,對於初學者掌握好色彩搭配也並非易事。所以,小美今天就來分享 23 個私藏超好用的配色網站、APP 合集,幫大家拓展資源庫,從而更好地去運用色彩。▎FABRIKA - 自製裝飾藝術(iOS)Fabrika 並不算是一個純粹的配色工具,而主要用於壁紙的創作,之所以將它選入實在是因為它的色彩選擇和搭配功能實在太贊了!
  • 第五章丨PPT配色的設計,怎樣的配色會讓人覺得舒服?
    一般在設置主題色的時候,都是下面這種方法,但是效率卻比較低,而且也不是太好看。一旦導入XML主題色,一鍵即可切換精美的PPT主題色。接下來主要的問題來了,如何才能更好的用好XML主題色呢?下面逐一為大家分享一下。
  • 只需一個工具,搞定史上最簡單的PPT配色技巧~
    好的配色,是 PPT 的第一皮囊,也是打動領導、打動觀眾的第一步。今天,就來給大家分享一波配色妙招~專業的人做專業的事情嘛,既然咱們沒有專業能力去配色,那麼我們為何不能從專業的設計中去「竊色」呢~沒有配色能力,但是我們一定具備審美判斷配色的能力。所以,為大家推薦取色之法:
  • 配色網站推薦,這些神仙配色太好看了!
    今天來講一講排版配色注意,今天的內容全是乾貨這個網站有很多已經搭配好了的顏色方案。將滑鼠移動到每個顏色的左下角,就會浮現該顏色的色值代碼。點擊後出現「Copied」就表示已經成功複製該色值。LOLCOLORShttps://www.webdesignrankings.com/resources/lolcolors/這是一個非常簡潔好用的配色網站,設計師可們可以在這裡找到很多色彩組合。把滑鼠移動到不同顏色的水滴上會提示色彩代碼(Hex Code)的顏色值。
  • PPT配色太辣眼?Adobe家這款免費工具,幫你一鍵生成高級配色!
    相信很多人都有同樣的問題,平時做出來的PPT配色是這樣的:然而大神們的PPT配色是這樣的:這樣的:為了方便大家平時做PPT時,快速做出高級感PPT,我為大家整理了46種經典配色方案。關注我的百家號,回復關鍵詞【PPT配色】,一鍵免費獲取我整理的46種經典配色色卡。用的都是一個PPT軟體,為什麼他們那麼秀?
  • 我做設計不行,但配色還是可以的!
    置頂關注「丁一設計」丁一不定時為您更新優質設計資源哦設計 | 資源 | 靈感 | 資訊第「341」期對一名設計師來說設計方案優秀是一方面好的圖紙配色也很重要畢竟大家都不想看辣眼睛的圖  文末附配色色卡/配色神器 今天來聊聊配色在圖紙中的表達一張優秀的圖紙肯定是同時包含了清晰的邏輯表達以及美學的藝術化修飾平面圖的配色打造一張完美的平面圖
  • 數據可視化配色指南:三大配色方法,做出諮詢報告一樣的圖表
    可是學習色彩設計,又是十分費工夫的一件事,不僅要搞明白RGB、CMYK等各種顏色體系,搞懂各種配色方法,重點是還要看大量的案例,培養良好的審美觀,防止自己做出來的東西辣眼睛……不如我們來「一文學會」系列吧,這篇Michael Yi發在Medium上的文章,就簡單清晰的介紹了三種數據可視化中的配色方法,讓你的圖表看起來清晰、翔實、用戶體驗友好,就像諮詢公司的報告一樣專業。
  • [一文獲得配色能力]一勞永逸的配色方案,6大配色系統大放送(上)
    從此以後,色輪將是你一直使用的色彩工具,如果沒有色輪你將很難進行初級的配色。這一章將是6種配色方法的學習,我們使用色輪來展現這種配色過程。因此,如果你還不明白色彩的三屬性以及基礎色彩理論,我想你值得看一看我的往期文章,去學習這些基礎理論,這是你看懂本章的基礎。
  • 插畫師必備配色參考工具
    下面和大家分享一下一些不錯的配色參考工具,希望對大家有所幫助。,你可以保存自己喜歡的配色和分享給自己朋友。網址連結:https://colourco.de/網站介紹:Colourco 是一個在線配色的工具
  • 其實吧,搞定超美的PPT配色,並不難!
    因為PPT配色存在一定的規律,或者說叫套路,如果你能掌握它,即便你並非專業的設計師,也可以輕鬆搞定色彩搭配。好了,廢話不多,咱們進入正題。  配色方法01  單色配色法如果你完全不會配色,那麼,這個方法就是你最優的選擇。
  • 用好這10個配色網站,升職加薪指日可待!
    我自己也不是色彩設計的高手,但最近在研究設計師們會如何選色、配色時,發現了許多線上的自動配色網站,這些網站提供了很多聰明的選色器工具,或是很多具有創意的配色表,可以提供許多「原來可以、應該這樣配色」的好建議,甚至激發設計師們的色彩搭配靈感。
  • 太好看哭了 夏日清新配色
    【 卡通直筒連衣裙 】六個配色款式米妮/米奇/唐老鴨/高飛大力水手/加菲貓夏日清新配色 好看不挑人新款直筒連衣裙真的太好看了吧 6大配色卡通人物設計 經典圖案 百搭不挑人 而且版型是屬於韓版直筒的非常顯瘦遮肉 上身效果真的太好了
  • 乾貨分享 | 大師同款配色+高質量矢量素材庫
    之前給大家推薦過各種各樣的配色網站,有的實用有的貌美。按理說該成為配色大師了吧!工具雖然有了,但眼光和審美還不到位。
  • 八種配色方案,解決你的配色頭痛症!
    上色顏色髒,一可能是 黑白關係沒處理好,二可能 是固有色沒有處理好。這裡只單單討論配色的問題,色相。這次,我通過色環介紹八種配色方案。每種都有它的優點和缺點,你可以根據自己繪畫的圖像確定選擇哪種方法上色,當然,你也可以上配色網站,找相應的配色方案。
  • 新手如何學習繪畫配色?超實用的繪畫配色指南10個配色網站
    繪畫新手如何學習繪畫配色?怎樣才能畫好插畫繪畫配色?畫好插畫繪畫配色有哪些技巧?說到配色,在很多線稿畫的不錯的「大神」一到配色環節就「慘不忍睹」結果就是上色的圖還沒有線稿好看。小白在上色過程中最常見的問題就是:色彩髒、亮色太亮、暗色太暗、色彩搭配不協調。那麼如何練習才能提高色感呢?首先必備的就是取色配色工具。與其冥思苦想,在還沒有基礎色彩搭配理念的時候可以通過不斷的嘗試、練習來提高色感。
  • 房子裝修配色學問大!大連天譽灣裝修指南配色篇
    怎麼選擇你的房子配色?相信很多業主都是憑自己的喜好來選擇家居的配色的,但是這其實有一些隱患,因為某些顏色從視覺上來看是有很強的刺激作用的,所以這裡建議業主朋友在裝修的過程中要選擇一個專業的設計師來給你一個專業的意見,當然了也可以先看看小蜜蜂的這篇配色說明。一,兒童房就是要鮮豔無比 ?
  • 天價鞋太貴?來點「平替款」吧|籃球鞋|new balance|air jordan|配色
    話不多說,來看看今天我為各位總結的幾雙「平替」好鞋。據不少跑者反饋,Gel Kayano 14這雙鞋的腳感非常不錯,是一雙顏值性能兼具的好鞋。當然,新的UB1-S Gel Kayano 14如無意外會倒閉,價格或許不會太貴,也就用不著平替款了......
  • 配色神器| 不會配色怎麼辦?10個超好用的配色網站拯救手殘黨的你【第三期】
    今天就給大家分享10個超級好用配色網站,讓你找到最合適的配色方案,媽媽再也不用擔心我配不好色了qwq乾貨滿滿!,快來試試有沒有你中意的顏色吧!網址:webgradients.com/如果你在找漸變色,就快來這裡吧
  • 色彩| 你離用好可視化配色,還要踩幾次坑?
    一個紅-綠對比配色因為紅綠色盲變得難以分辨好消息是,有一些專門為解決這個問題設計的配色可供選擇,例如Color Brewer2(http://colorbrewer2.org/)的「色盲友好(colorblind safe)」模式;或者,我們也可以通過色覺辨認障礙模擬器(例如下圖)來測試自己的配色是否「友好」。