助你快速搭配 Material Design 配色方案的10款Web工具

在设计 Material Design 的过程中你会发现一个很大的问题,那就是如何大胆、灵活的使用色彩组合。
Material Design 里的调色板工具将色彩描述为“受大胆排列色块并结合柔和的环境、深阴影和亮高光而产生的灵感”。

这周我们专门为设计导航的配色类目更新了10款 Google Material Design 专用的配色工具,如果你需要材质设计调色板,这些web工具可以助你一臂之力。

下面是 Material Design 配色方案的10款Web工具,喜欢的记得 Mark 起来!

Material Palette

在这个工具中,你可以先选择主色和重点色。选完之后工具会自动生成即时预览图并提供多种下载的方式。

进入网站

Material UI

这是一个漂亮的“小抄”,它把所有能提供给你的颜色汇聚在一个页面上供你选择。很不错哦!

进入网站

Random Material Generator

设计师有时候也会“偷懒”。这个工具会随机搭配好你的设计颜色,自然帮助我们节省了一部分时间。所以,这是把工作交给命运了吧?也挺有趣的啊。

进入网站

Material Design Palette Generator

如果你对自定义色板感兴趣,那么试试material-design-like这个工具吧。首先,你需要手动设置一种颜色——不是系统色也可以哦——然后在同色系的色彩选择对话窗口中找到你最喜欢的图形编辑器。材料设计面板生成器将根据你选择的颜色生成你的色板。

进入网站

Material Mixer

这也是一种比较实用的工具,它将所有颜色布局在一张紧凑的网格中以便于选择。点击一个主色和重点色就可以预览并生成你的调色板。

进入网站

Material Colors

这个工具只显示500和A200色板的颜色。选择不一定要很多,精致的就好!

进入网站

UPlabs 的 Material Design 工具

这是又一个简单的可视化的Material Design工具。它将三原色显示在侧边栏。而点击“color bar”就能够显示所有相关的颜色。操作也很灵活!

进入网站

Tint UI’s Material Design

类似第六种工具,它只显示 Material Design 中的 500 颜色。有选择综合征的设计师们有福了!

进入网站

Designskilz’s Material Design Colors

第九种工具也非常简单,它帮助我们将色板中的所有颜色连同他们的正式名称可视化(如。粉红色,浅蓝色,等等)。这样我们就不必思考所选颜色的名字问题。

进入网站

MATERIAL @ COLORION

第十款工具除了分享几百个色板外,还带上夹的功能,看到喜欢的配色,用户还可以起来以便日后使用。

进入网站

图形编辑器的插件

如果以上这些web工具你都不喜欢,那么你还可以安装一个插件/扩展,这样就能够将 material design 色板汇集到你自定义的设计软件中了。

Photoshop / Illustrator用户:谷歌提供可下载的Adobe color files (.aco)插件,它的功能是让你在PS或AI中的调色过程更舒适、流畅。

Sketch 用户:尝试搜索一下这个插件: Koji Ishimoto 的Material Design Color Palette Sketch Plugin。它是开放的资源,放心下载。

Gimp / Inkscape用户:有两种选择:KiSSFLOW的gimp-material-design-color-palette和 Soichiro Kashima 的material-design-colors。两者都很好用。

快挑一种工具试试吧!发挥你的想象力,创造个性化的Material Design色彩作品,我在这里等你的分享哟~

文章来源:设计达人

(0)

相关推荐

  • 「插件」一分钟学会 Material Design 配色插件

    小编:在UI设计中操作技巧是大家都可以去查去练习的,练习到一定程度就无差别,用户的体验和色彩的搭配则是意会的层面.那今天小编给大家带来了几个关于配色的Sketch 插件,助你完成优秀的UI作品一臂之力 ...

  • Material Design配色难?11条设计资源给你灵感!

    自Material Design的设计理念推出以来,Google的内部设计语言实现了从古老的用户界面向现代网络的现代外观的转变.最大的改变之一是使用大胆鲜明的颜色.Material Design的色彩 ...

  • Material Design的7个重大更新

    本文总结了随着Google I/O的启动,Material Design迎来的7个重大更新 2018年5月9日凌晨1点,谷歌I/O开发者大会如期在美国加州山景城的海滨露天剧场拉开帷幕,谷歌不仅对AI技 ...

  • 11款美观实用的Material Design UI工具包

    Material design自Google于2014年创建并发布以来,已经逐渐形成了其鲜明的设计风格,并渐渐成为统一 Android Mobile.Android Tablet.Desktop Ch ...

  • 优秀配色方案的探索过程

    选择配色方案往往是个难题,尽管网上有各种各样的色彩库,配色仍然至关重要,有时候最好还是亲自动手.而且这个过程也非常有意思. 为这类工作找到一套标准流程是不可能的,因为它天然具有创造性.我使用Sketc ...

  • google官方的material design设计指南1

    小编:网络上已经有很多人对该文档进行翻译和研究,但是作为UI小白,想通过翻译过程加强对Material Design的理解,所有翻译内容仅凭个人理解. Material design(原质化设计) 简 ...

  • 网站如何配色及网站配色方案

    网站设计只要懂一点点网页编辑的人我想都可以制作网站了,但一个网站制作的好坏就必须从多方面去考量了,一个是用户体验度,还有一个就是网页美工了,而网页美工特别讲究的就是网站配色方案,网页设计师策划一个网站 ...

  • PowerPoint自建模板自定义配色方案

    不知道大家注意过没有,在PowerPoint中的“配色方案”其实是一种特殊的模板,如果你想将某个配色方案应用于多个幻灯片,可以按住Ctrl键选中“幻灯片”窗口中的多个幻灯片,然后单击“幻灯片设计”任务 ...

  • 如何更改Win7配色方案的方法

    方法一、更换一个主题模式 单击鼠标右键点击桌面的空白处,然后在弹出的菜单上选择【个性化】,打开了个性化窗口,在窗口上有好多主题,可以更换主题就更改了电脑的配色方案了。如图所示: 方法二、对颜色自行调整 ...