您的位置:首页 > Web前端 > CSS

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 的调色板,这些在线的工具将会对你有很大的帮助。

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-palettematerial-design-colors
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  设计 CSS Html