设计一个名为colorable的接口_全网最全的优秀配色工具网站推荐,让您的设计创意美到爆...

现在的网页设计千篇一律,越来越多的设计师想尝试更加大胆的色彩搭配,所以我们搜集整理了超齐全的一份包含了58个色彩工具的网站,app还有插件,帮助您做成更好的设计。当然这些色彩搭配不是凭空捏造出来的,而是从各个地方获取来的灵感,结合色彩心理学,这些搭配不仅好看,还符合您更高层次的情感需求。

1.Muzli colors

网址:https://colors.muz.li/

使用此工具可以快速创建编辑调色板,最大的特点是可以根据您创建的色彩搭配直接在app设计模板上预览,并且还能下载。

1e29624a2d89aed76b6e51446f3c9985.png

2. Colorable

网址:https://colorable.jxnblk.com/

这个工具主要查看字体颜色和背景颜色的对比效果。

7810bf50efb620857b3b3d8d8dfcc8a7.png

3. Color Leap — History’s Palettes

网址:https://colorleap.app/home

这个工具可以搜素过去四千年以来使用的180个调色板。

520f5094477c1e81c4c5a392d5665845.png

4. Picular

网址:https://picular.co/

这是一个颜色搜索工具,只要输入搜索的关键词,就能像google一样展示相关的颜色,可以复制色号和查看使用该颜色的图片。

890d752c0522d3e26dd941712459465a.png

5. Colourcode

网址:https://colourco.de/

colourco.de是一款在线设计工具,可以让你非常直观的组合各种颜色。

6274ca4f7ae0439736a0322951a11079.png

6. Palettte App

网址:https://palettte.app/

palettte和之前见到的网站不太一样,它是一款色彩编辑和重映射工具,能够帮助你从一个颜色中构建出另外一种颜色,还支持单个颜色的微调

282fac86f27dc313b9c8b419bb64bace.png

7. Colorinspire

网址:https://www.colorinspire.io/

精选各种色彩灵感,可以马上用在您的设计项目中。

ae48a28db7083d9e0acb0087f708e2a5.png

8. ColorSpace

网址:https://mycolor.space/

调色板生成器,以及渐变色工具。只要输入您的颜色,网站马上会生成与之相搭配的渐变色和调色板。

521e8b88f3ca999fcfa099b52151236b.png

9. Pigment

网址:https://pigment.shapefactory.co/

一种根据光线和颜料生成的清新鲜艳的独特调色板。

da12c66c6862c1f0a418e938a4525891.png

10. Adobe Color

网址:https://color.adobe.com/create

这个adobe出品的调色板应该是比较熟悉了,每种颜色方案由五个颜色组成。您可以自己生成,也可以看流行的搭配方案。

d1086bcbd6033bc45ccdb17f2f69b285.png

11. Colors & Fonts

网址:https://www.colorsandfonts.com/

这是一个为开发者和设计师准备的调色板,渐变色,字体的灵感库。

06a67f2043bb15be65c04e614d2a80f6.png

12. HueSnap

网址:https://www.huesnap.com/

这是一个可以自己创建色彩搭配并与人共享的网站。获取颜色的方式可以读取图片或者自己选择。

173cf3fda53b287f5565818e8ecb2d4c.png

13. Culrs

网址:https://culrs.com/

culrs为您提供了一个简单明了的方法来选择调色板。

43a2c7df4057e2703dc578abc1b7d164.png

14. Eva Design System

网址:https://colors.eva.design/

使用深度学习算法生成的调色板。比较赞的是深色模式,可以看颜色在深色背景下的效果。

fc08fa11dd2bd7baf70a0cb995da652a.png

15. Scale

网址:https://hihayk.github.io/scale/

一种全新的生成颜色的方式。调整两边色颜色,生成中间的混合色。

5a221a037bc7088f8464f04332cccefa.png

16. Site Palette

网址:http://palette.site/

一个浏览器插件,可以查看正在访问网页的配色。设计师和前端工程师必备工具。

658f2db3c0e4c8b30a151a5e6c652f56.png

17. BrandColors

网址:https://brandcolors.net/

集合了500多个不同品牌的官方用色,包含了facebook,Twitter,instagram等。

c26146a41ca9b2838483ce12b3771a5b.png

18. Colorwise

网址:https://colorwise.io/

这个网站在product hunt中的投票最高,应该深受设计师喜欢。

3dc9a772dc9009da40b09343bd39e15d.png

19. HTML Color Codes

网址:https://htmlcolorcodes.com/

使用这个网站可以很容易的为您的网站查找各种颜色的十六进制颜色代码,RGB色值,HSL色值。

0262e5a1eb5ce13dbb07fd843dfc9019.png

20. ColorBox

网址:https://www.colorbox.io/

这是一个生成渐变色色值的工具。

cadaddec4124ddea54e9c41cf79193c7.png

21. Generate — Coolors.co

网址:https://coolors.co/

快速生成各种调色板的网站,您可以保存分享这些配色方案。

bcae68f360a43c3ce4e8f337ac8c953d.png

22. Color — Cloudflare Design

网址:https://cloudflare.design/color/

用于ui界面设计的调色板工具,可以实时查看背景文字图标选择框的颜色效果。

98521556803f566ba897920525853c3f.png

23. Instant Duotone Effect Generator

网址:https://duotones.co/

上传图片,就能查看图片生成漂亮的双色调效果。网站预设十几种常用的双色调配色工具。

41e5019ab86d2df0afdadaeaa984fe7e.png

24. Color Tool — Material Design

网址:https://material.io/resources/color/#!/?view.left=0&view.right=0

安卓app界面设计的好帮手,可以为安卓界面创建调色板,并测试颜色搭配的可访问性。

8ccc20d366c9b245fe27b3f4843ce1a9.png

25. Blendy

网址:https://blendy.ml/

这是一个快速预览图片通过css代码实现特效后的效果。您可以复制css代码用在您的设计中。

32c2f905b05fcc68b13ae81f39bcb919.png

26. LOL Colors

网址:https://www.webdesignrankings.com/resources/lolcolors/

精选挑选的色彩搭配灵感。

4ffbd28e1b7e674d95b5c57b1c356b66.png

27. Color Hunt

网址:https://colorhunt.co/

Color Hunt是一个免费开放的色彩灵感平台,拥有数千种时尚的手工挑选的色彩搭配调色板。

66e0cb3cfb1b270f4358f6b0242b7ee9.png

28. ColorMe

网址:https://colorme.io/

可视化的css颜色调试网站。

29e4f30e231b96bab18d6fdc78fe7ca3.png

29. Polarite

网址:https://www.polarite.app/

Polarite是一款机器学习的颜色生成app,用于生成和谐的配色方案。

fe5d626c660d1b55feebeac97b5972c4.png

30. Gradient Hunt

网址:https://gradienthunt.com/

精选了数千种时尚渐变色的网站,每天更新。

b7f7b66263dcbdc8347cda2f540b093d.png

31. Palettable

网址:https://www.palettable.io/4EDED7

自动生成一个一个的颜色,让你选择喜欢或者不喜欢。所有向您展示的颜色都是从数百万设计师挑选中生成的。

ccb4cec1878603c7f96a39a80cf637cc.png

32. ColorSpark

网址:https://colorspark.app/

一个非常简单的单色和渐变色随机生成器。

e3ba519da450861d2ac09444fe9fb888.png

33. SVG Colorizer

网址:https://www.iconshock.com/svg-color/

自动为svg图标和插画配色,这些svg文件可以是网站提供的,也能自己上传。

d3cc2ce5d2cbc12ee655c65701f32b53.png

34. Sip

网址:https://sipapp.io/

适用于Mac的拾色软件,可以收集整理分享各种配色方案。

af7af7b148f5380aa7588ac3e9eef660.png

35. CoolHue 2.0

网址:https://webkul.github.io/coolhue/sketch-plugin/

sketch上使用的渐变色调色板插件。

bc190930340ec3e9797abff777417ec8.png

36. Color Koala

网址:https://colorkoala.xyz/

一个快速生成调色板的工具,可以定义深色,浅色,色系。

7d0444fb30137284f0d274928c332fca.png

37. SchemeColor

网址:https://www.schemecolor.com/

这是一个包含了数千个美丽色彩组合的网站,网站不仅可以查看并下载色彩搭配,还有展示色彩搭配的灵感来源图片。

e595d50b6adca0a1ef387907d5000dec.png

38. Free Mesh Gradient Collection

网址:https://www.ls.graphics/meshgradients

这是一个生成融合在一起的多种渐变色工具的网站,可以下载sketch,ai,eps,jpg等格式。

aba4239e2e3f415663dc82295cf7eb4c.png

39. WebGradients

网址:https://webgradients.com/

由顶级设计师策划的180个渐变色,可以下载sketch格式、psd格式文件,保存png文件,获取css3代码。

9728f94516d7a8f363de69a131aef894.png

40. Gradient Buttons

网址:https://gradientbuttons.colorion.co/

渐变色设计的按钮,并且带悬停效果,可以复制css代码用在您的设计中。

fbcddc43ae9e935057bacab27bf9debe.png

41. ColorKit

网址:https://colorkit.io/

色彩混合工具,混合两种颜色生成多个颜色。

8646cb2f8a0481a712d4134f3b52859d.png

42. Eggradients

网址:https://www.eggradients.com/

金蛋形状展示渐变色,可以复制十六进制色值和css代码。

b17b861d1fa2b204126b6c55b39275b9.png

43. Cool Backgrounds

网址:https://coolbackgrounds.io/

带纹理效果的渐变色背景生成器,可以用于博客,网站,桌面,壁纸背景。

78e786e0f94ef8507a2f9e54595d2797.png

44. Google Art & Culture Experiment — Art Palette

网址:https://artsexperiments.withgoogle.com/artpalette/colors/242726-886c5f-d04b18-dfb24a-d4c5aa

结合艺术与文化的体验探索,通过选择色彩搭配搜索艺术作品。

05f414b484988a0890a9b70f7028f00a.png

45. GradPad

网址:http://ourownthing.co.uk/gradpad.html

渐变色生成器,随意挪动两个按钮,在网页中创建可爱的渐变色。

d4e13b16093cfd1a205ccbddc2b1be0a.png

46. Khroma

网址:http://khroma.co/

Khroma是生成,发现,搜索和保存您想要使用的颜色组合和调色板的好工具。

0b26d1388927033cd1b4f848333dab09.png

47. Color palettes

网址:https://www.canva.com/colors/color-palettes/

浏览Canva的数千种颜色组合!非设计师专用。

9fafbda026468e429d307bbac7d262b8.png

48. Color Safe

网址:http://colorsafe.co/

测试网站的颜色使用的可访问性,让您的网站给美观易用。

99c8744f9105509d119cc9a3bb4ee9d3.png

49. Paletton

网址:http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

使用色轮创建调色板。

2716ea527fd4658dd9c4c7918863fb25.png

50. Colordot

网址:https://color.hailpixel.com/

非常简单的颜色选择器。

6d52078183a7ac8bffeffeb64746e46a.png

51. Colors

网址:https://klart.io/colors/

100%由数据驱动的配色方案集合。

de5fd2fe144736916682a7f81bdbdb06.png

52. Contrast Ratio

网址:https://contrast-ratio.com/

一款轻松计算颜色对比度的配色工具。

0aa83a5a150bf5a7defbf195897e4f96.png

53. Color Lisa

网址:http://www.colorlisa.com/

世界上最伟大的艺术家的色彩杰作。

18b900a35e3ab21aa6129c26d78e5cf9.png

54. Color Designer

网址:https://colordesigner.io/

只需选择一种颜色,Color Designer就会帮助我们构建一个系统的配色方案,并基于我们所选的颜色生成多种色调和阴影等。

35a32b9b3b7e7e6e195eef20c0ca2b43.png

55. Color.review

网址:https://color.review/

用于探索和查找可访问颜色的现代工具。确保每个人都能看到您的作品。

a7239d3d51de62c89331d3f2b109c69a.png

56. Blend

网址:http://www.colinkeany.com/blend/

创建和自定义漂亮的CSS3渐变色。

773974adf6fd0c4b2cc55fc344d00765.png

57. Contrast

网址:https://usecontrast.com/

用于快速访问WCAG色彩对比度的macOS软件。

0af462fb7172f6915d87a7aedb9393f9.png

58. Grabient

网址:https://www.grabient.com/

一个非常漂亮且实用的渐变网站,支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

082d9fa6e3764333ead2f85038a1f0c3.png

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

如果小伙伴们还发现哪些超赞的配色网站可以留言告诉我们~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值