9 款你必须知道的 Material Design 调色板
2016-02-19 15:00
113 查看
转载请注明原文地址:9 款你必须知道的 Material Design 调色板
在 Material Design 中最显著的特点就是经常使用大胆且充满活力的颜色。
Material Design 的颜色参考中将它们的颜色风格描述为 “大胆的色调、柔和的环境、身影效果以及鲜明的亮点的综合体”(inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights)。
如果你需要生成一个 Material Design 的调色板,这些在线的工具将会对你有很大的帮助。
Photoshop / Illustrator:谷歌提供了可下载的 Adobe color files (.aco) 插件,用来在 Photoshop 或 Illustrator 中设计 Material Design 调色板。
Sketch:可以了解一下 Material Design Color Palette Sketch Plugin
Gimp / Inkscape:有两个选择:gimp-material-design-color-palette 和 material-design-colors
在 Material Design 中最显著的特点就是经常使用大胆且充满活力的颜色。
Material Design 的颜色参考中将它们的颜色风格描述为 “大胆的色调、柔和的环境、身影效果以及鲜明的亮点的综合体”(inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights)。
如果你需要生成一个 Material Design 的调色板,这些在线的工具将会对你有很大的帮助。
material palette
在这款工具中,你从选择你的基础颜色和特点颜色开始。然后,它会向你展示一个由你选择的颜色生成的预览图,并向你提供多种下载方法。Material UI’s Material Design Colors
这是一个非常漂亮的颜色列表,它会在一个页面中陈列出所有的 Material Design 颜色。Random Material Generator
你想让命运来决定你的调色板的样子么?你可以考虑一下下面这款工具,它能随机的选择你的 Material design 颜色。Material Design Palette Generator
如果你比较喜欢创建一个自定义、带有 Material design 风格的调色板,你可以了解一下这款工具。首先,你需要指定一个颜色 —— 并且它并不是官方的 Meterial Design 颜色 —— 使用的颜色选择对话框与你一般的图像编辑器的颜色选择框非常相似。Material Design 调色板生成器在之后会基于你选择的颜色生成颜色样本。material mixer
这款工具会在一种方便紧凑的网格布局中展示所有的 Material Design 颜色。点击基础颜色和特点颜色就能马上生成预览和你的调色板。Material Colors
这款工具只会显示 Material Design 颜色样本中 “500” 和 “A200” 的颜色。MaterialUp’s Material Design Colors
这是另一款简单工具,专门用来展现 Material Design 颜色。它会并列的显示基础颜色。点击 “颜色条” 会显示所有与该颜色相关的样本颜色。Tint UI’s Material Design
该工具是会显示 Material Design 中 500 的颜色。designskilz’s Material Design Colors
这款工具能帮助你形象化所有的 Meterial Design 颜色样本,并会显示它们官方的名称。图形编辑器重的 Material Design 颜色插件
如果在线工具不是你的菜,你也可以在你的设计软件中安装集成了 Material Design 颜色样本的插件或扩展。Photoshop / Illustrator:谷歌提供了可下载的 Adobe color files (.aco) 插件,用来在 Photoshop 或 Illustrator 中设计 Material Design 调色板。
Sketch:可以了解一下 Material Design Color Palette Sketch Plugin
Gimp / Inkscape:有两个选择:gimp-material-design-color-palette 和 material-design-colors
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- [css] line-height 百分比单位和数值单位的区别
- 设计更快的网页(三):字体和 CSS 调整
- 一步一步跟我学易语言之第二个易程序菜单设计
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码