58個(gè)優(yōu)秀的配色工具推薦,讓您的設(shè)計(jì)美到爆!

現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)千篇一律,越來(lái)越多的設(shè)計(jì)師想嘗試更加大膽的色彩搭配,所以我們搜集整理了超齊全的一份包含了58個(gè)色彩工具的網(wǎng)站,app還有插件,幫助您做成更好的設(shè)計(jì)。當(dāng)然這些色彩搭配不是憑空捏造出來(lái)的,而是從各個(gè)地方獲取來(lái)的靈感,結(jié)合色彩心理學(xué),這些搭配不僅好看,還符合您更高層次的情感需求。



1.Muzli colors

網(wǎng)址:https://colors.muz.li/

使用此工具可以快速創(chuàng)建編輯調(diào)色板,最大的特點(diǎn)是可以根據(jù)您創(chuàng)建的色彩搭配直接在app設(shè)計(jì)模板上預(yù)覽,并且還能下載。


1.jpg



2. Colorable 

網(wǎng)址:https://colorable.jxnblk.com/

這個(gè)工具主要查看字體顏色和背景顏色的對(duì)比效果。


2.jpg



3. Color Leap — History’s Palettes

網(wǎng)址:https://colorleap.app/home

這個(gè)工具可以搜素過(guò)去四千年以來(lái)使用的180個(gè)調(diào)色板。


3.jpg



4. Picular

網(wǎng)址:https://picular.co/

這是一個(gè)顏色搜索工具,只要輸入搜索的關(guān)鍵詞,就能像google一樣展示相關(guān)的顏色,可以復(fù)制色號(hào)和查看使用該顏色的圖片。


4.jpg



5. Colourcode

網(wǎng)址:https://colourco.de/

colourco.de是一款在線設(shè)計(jì)工具,可以讓你非常直觀的組合各種顏色。


5.jpg



6. Palettte App

網(wǎng)址:https://palettte.app/

palettte和之前見(jiàn)到的網(wǎng)站不太一樣,它是一款色彩編輯和重映射工具,能夠幫助你從一個(gè)顏色中構(gòu)建出另外一種顏色,還支持單個(gè)顏色的微調(diào)


6.jpg



7. Colorinspire

網(wǎng)址:https://www.colorinspire.io/

精選各種色彩靈感,可以馬上用在您的設(shè)計(jì)項(xiàng)目中。


7.jpg



8. ColorSpace

網(wǎng)址:https://mycolor.space/ 

調(diào)色板生成器,以及漸變色工具。只要輸入您的顏色,網(wǎng)站馬上會(huì)生成與之相搭配的漸變色和調(diào)色板。


8.jpg



9. Pigment 

網(wǎng)址:https://pigment.shapefactory.co/ 

一種根據(jù)光線和顏料生成的清新鮮艷的獨(dú)特調(diào)色板。


9.jpg



10. Adobe Color

網(wǎng)址:https://color.adobe.com/create 

這個(gè)adobe出品的調(diào)色板應(yīng)該是比較熟悉了,每種顏色方案由五個(gè)顏色組成。您可以自己生成,也可以看流行的搭配方案。


10.jpg



11. Colors & Fonts

網(wǎng)址:https://www.colorsandfonts.com/ 

這是一個(gè)為開(kāi)發(fā)者和設(shè)計(jì)師準(zhǔn)備的調(diào)色板,漸變色,字體的靈感庫(kù)。


11.jpg




12. HueSnap

網(wǎng)址:https://www.huesnap.com/

這是一個(gè)可以自己創(chuàng)建色彩搭配并與人共享的網(wǎng)站。獲取顏色的方式可以讀取圖片或者自己選擇。


12.jpg



13. Culrs

網(wǎng)址:https://culrs.com/ 

culrs為您提供了一個(gè)簡(jiǎn)單明了的方法來(lái)選擇調(diào)色板。


13.jpg



14. Eva Design System

網(wǎng)址:https://colors.eva.design/ 

使用深度學(xué)習(xí)算法生成的調(diào)色板。比較贊的是深色模式,可以看顏色在深色背景下的效果。


14.jpg



15. Scale

網(wǎng)址:https://hihayk.github.io/scale/ 

一種全新的生成顏色的方式。調(diào)整兩邊色顏色,生成中間的混合色。


15.jpg



16. Site Palette

網(wǎng)址:http://palette.site/ 

一個(gè)瀏覽器插件,可以查看正在訪問(wèn)網(wǎng)頁(yè)的配色。設(shè)計(jì)師和前端工程師必備工具。


16.jpg



17. BrandColors 

網(wǎng)址:https://brandcolors.net/ 

集合了500多個(gè)不同品牌的官方用色,包含了facebook,Twitter,instagram等。


17.jpg



18. Colorwise

網(wǎng)址:https://colorwise.io/ 

這個(gè)網(wǎng)站在product hunt中的投票最高,應(yīng)該深受設(shè)計(jì)師喜歡。


18.jpg



19. HTML Color Codes

網(wǎng)址:https://htmlcolorcodes.com/ 

使用這個(gè)網(wǎng)站可以很容易的為您的網(wǎng)站查找各種顏色的十六進(jìn)制顏色代碼,RGB色值,HSL色值。


19.jpg



20. ColorBox

網(wǎng)址:https://www.colorbox.io/ 

這是一個(gè)生成漸變色色值的工具。


20.jpg




21. Generate — Coolors.co

網(wǎng)址:https://coolors.co/ 

快速生成各種調(diào)色板的網(wǎng)站,您可以保存分享這些配色方案。


21.jpg



22. Color — Cloudflare Design

網(wǎng)址:https://cloudflare.design/color/ 

用于ui界面設(shè)計(jì)的調(diào)色板工具,可以實(shí)時(shí)查看背景文字圖標(biāo)選擇框的顏色效果。


22.jpg



23. Instant Duotone Effect Generator

網(wǎng)址:https://duotones.co/ 

上傳圖片,就能查看圖片生成漂亮的雙色調(diào)效果。網(wǎng)站預(yù)設(shè)十幾種常用的雙色調(diào)配色工具。


23.jpg




24. Color Tool — Material Design

網(wǎng)址:https://material.io/resources/color/#!/?view.left=0&view.right=0 

安卓app界面設(shè)計(jì)的好幫手,可以為安卓界面創(chuàng)建調(diào)色板,并測(cè)試顏色搭配的可訪問(wèn)性。


24.jpg





25. Blendy

網(wǎng)址:https://blendy.ml/ 

這是一個(gè)快速預(yù)覽圖片通過(guò)css代碼實(shí)現(xiàn)特效后的效果。您可以復(fù)制css代碼用在您的設(shè)計(jì)中。


25.jpg



26. LOL Colors

網(wǎng)址:https://www.webdesignrankings.com/resources/lolcolors/ 

精選挑選的色彩搭配靈感。


26.jpg



27. Color Hunt

網(wǎng)址:https://colorhunt.co/ 

Color Hunt是一個(gè)免費(fèi)開(kāi)放的色彩靈感平臺(tái),擁有數(shù)千種時(shí)尚的手工挑選的色彩搭配調(diào)色板。


27.jpg



28. ColorMe

網(wǎng)址:https://colorme.io/ 

可視化的css顏色調(diào)試網(wǎng)站。


28.jpg



29. Polarite

網(wǎng)址:https://www.polarite.app/ 

Polarite是一款機(jī)器學(xué)習(xí)的顏色生成app,用于生成和諧的配色方案。


29.jpg



30. Gradient Hunt

網(wǎng)址:https://gradienthunt.com/ 

精選了數(shù)千種時(shí)尚漸變色的網(wǎng)站,每天更新。


30.jpg



31. Palettable

網(wǎng)址:https://www.palettable.io/4EDED7 

自動(dòng)生成一個(gè)一個(gè)的顏色,讓你選擇喜歡或者不喜歡。所有向您展示的顏色都是從數(shù)百萬(wàn)設(shè)計(jì)師挑選中生成的。


31.jpg



32. ColorSpark

網(wǎng)址:https://colorspark.app/ 

一個(gè)非常簡(jiǎn)單的單色和漸變色隨機(jī)生成器。


32.jpg




33. SVG Colorizer

網(wǎng)址:https://www.iconshock.com/svg-color/ 

自動(dòng)為svg圖標(biāo)和插畫(huà)配色,這些svg文件可以是網(wǎng)站提供的,也能自己上傳。


33.jpg



34. Sip

網(wǎng)址:https://sipapp.io/ 

適用于Mac的拾色軟件,可以收集整理分享各種配色方案。


34.jpg



35. CoolHue 2.0

網(wǎng)址:https://webkul.github.io/coolhue/sketch-plugin/ 

sketch上使用的漸變色調(diào)色板插件。


35.jpg



36. Color Koala

網(wǎng)址:https://colorkoala.xyz/ 

一個(gè)快速生成調(diào)色板的工具,可以定義深色,淺色,色系。


36.jpg



37. SchemeColor

網(wǎng)址:https://www.schemecolor.com/ 

這是一個(gè)包含了數(shù)千個(gè)美麗色彩組合的網(wǎng)站,網(wǎng)站不僅可以查看并下載色彩搭配,還有展示色彩搭配的靈感來(lái)源圖片。


37.jpg



38. Free Mesh Gradient Collection

網(wǎng)址:https://www.ls.graphics/meshgradients 

這是一個(gè)生成融合在一起的多種漸變色工具的網(wǎng)站,可以下載sketch,ai,eps,jpg等格式。


38.jpg



39. WebGradients

網(wǎng)址:https://webgradients.com/ 

由頂級(jí)設(shè)計(jì)師策劃的180個(gè)漸變色,可以下載sketch格式、psd格式文件,保存png文件,獲取css3代碼。


39.jpg



40. Gradient Buttons

網(wǎng)址:https://gradientbuttons.colorion.co/ 

漸變色設(shè)計(jì)的按鈕,并且?guī)彝PЧ?,可以?fù)制css代碼用在您的設(shè)計(jì)中。


40.jpg



41. ColorKit

網(wǎng)址:https://colorkit.io/ 

色彩混合工具,混合兩種顏色生成多個(gè)顏色。


41.jpg



42. Eggradients

網(wǎng)址:https://www.eggradients.com/ 

金蛋形狀展示漸變色,可以復(fù)制十六進(jìn)制色值和css代碼。


42.jpg



43. Cool Backgrounds

網(wǎng)址:https://coolbackgrounds.io/ 

帶紋理效果的漸變色背景生成器,可以用于博客,網(wǎng)站,桌面,壁紙背景。


43.jpg



44. Google Art & Culture Experiment — Art Palette 

網(wǎng)址:https://artsexperiments.withgoogle.com/artpalette/colors/242726-886c5f-d04b18-dfb24a-d4c5aa 

結(jié)合藝術(shù)與文化的體驗(yàn)探索,通過(guò)選擇色彩搭配搜索藝術(shù)作品。


44.jpg



45. GradPad

網(wǎng)址:http://ourownthing.co.uk/gradpad.html 

漸變色生成器,隨意挪動(dòng)兩個(gè)按鈕,在網(wǎng)頁(yè)中創(chuàng)建可愛(ài)的漸變色。


45.jpg



46. Khroma

網(wǎng)址:http://khroma.co/ 

Khroma是生成,發(fā)現(xiàn),搜索和保存您想要使用的顏色組合和調(diào)色板的好工具。


46.jpg



47. Color palettes

網(wǎng)址:https://www.canva.com/colors/color-palettes/ 

瀏覽Canva的數(shù)千種顏色組合!非設(shè)計(jì)師專(zhuān)用。


47.jpg




48. Color Safe

網(wǎng)址:http://colorsafe.co/ 

測(cè)試網(wǎng)站的顏色使用的可訪問(wèn)性,讓您的網(wǎng)站給美觀易用。


48.jpg



49. Paletton

網(wǎng)址:http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF 

使用色輪創(chuàng)建調(diào)色板。


49.jpg




50. Colordot

網(wǎng)址:https://color.hailpixel.com/ 

非常簡(jiǎn)單的顏色選擇器。


50.jpg



51. Colors

網(wǎng)址:https://klart.io/colors/ 

100%由數(shù)據(jù)驅(qū)動(dòng)的配色方案集合。


51.jpg



52. Contrast Ratio

網(wǎng)址:https://contrast-ratio.com/ 

一款輕松計(jì)算顏色對(duì)比度的配色工具。


52.jpg



53. Color Lisa

網(wǎng)址:http://www.colorlisa.com/ 

世界上最偉大的藝術(shù)家的色彩杰作。


53.jpg



54. Color Designer

網(wǎng)址:https://colordesigner.io/ 

只需選擇一種顏色,Color Designer就會(huì)幫助我們構(gòu)建一個(gè)系統(tǒng)的配色方案,并基于我們所選的顏色生成多種色調(diào)和陰影等。


54.jpg



55. Color.review

網(wǎng)址:https://color.review/ 

用于探索和查找可訪問(wèn)顏色的現(xiàn)代工具。確保每個(gè)人都能看到您的作品。


55.jpg



56. Blend

網(wǎng)址:http://www.colinkeany.com/blend/ 

創(chuàng)建和自定義漂亮的CSS3漸變色。


56.jpg



57. Contrast

網(wǎng)址:https://usecontrast.com/ 

用于快速訪問(wèn)WCAG色彩對(duì)比度的macOS軟件。


57.jpg



58. Grabient

網(wǎng)址:https://www.grabient.com/ 

一個(gè)非常漂亮且實(shí)用的漸變網(wǎng)站,支持 CSS 樣式代碼復(fù)制、360度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。


58.jpg


這么多的色彩工具就先到這里啦~

如果小伙伴們還發(fā)現(xiàn)哪些超贊的配色網(wǎng)站可以留言告訴我們~




原文地址:https://medium.muz.li/color-tools-for-designers-2019-6ebd77a94ab

每天更新,
全站高品質(zhì)素材免費(fèi)下載!