Thinkpad 431
Material.IO在线应用
Win 10及浏览器
第一步，打开在线网站，因是英文网站，如果有需要可安装翻译插件，直接在浏览器安装，使用也很方便。
第二步，点击导航菜单”Tools“，进入工具页面，这个页面包括好几个设计工具，可按需自行尝试。注：Color Tool在页面下部，可滚动鼠标向下即可看到。
第三步，点击”Color Tool“进入颜色配置工具界面。此功能为UI创建配色方案，可以导出成CSS及JS相应的代码；也可以生成IOS或Android的UI界面代码。是不是感觉非常方便，想去尝试一下？
第四步，点击下面灰色部分任意位置，即可进入在线配色应用。几个菜单的中文意思：User interfaces：用户界面，这里实时显示出配色的效果；Accessibility：这里主要显示一些段落、文字的显示效果；Material palette：配色面板，这里会预设一些配色方案，你只需要选中其中一个主色调，系统会自动为你配置出次色调。Custom：自定义色，如果有很强的色彩感，也可以自己去选择色彩。
第五步，目前这里的预设色彩组合共19种配色方案，每种下又有14种颜色。（除后3种，只有10种）。主配色方案清单如下：Red、Pink、Purple、Deep Purple、Indigo、Blue、Light Blue、Cyan、Teal、Green、Light Green、Lime、Yellow、Amber、Orange、Deep Orange、Brown、Grey、Blue Grey。
第六步，选中其中一种配色方案即可，选择的是Amber-900主色调。再点 EXPORT选择导出模式，可选择Android,IOS方式，这里还可以选择CODEPEN。
第七步，选择CODEPEN，进入代码界面。上面部分是代码，包括：HTML、CSS、JS三部分，下面是实时效果展示，可以拖动中间位置调整两部分的高度，以获得更好的操作视野。生成的内容主要用：button、menu、Selection、Text Field、Cards、Tool Bar元素样式。
第八步，在这里，你可以先注册一个账号，可以直接存在云上，随时调用。注册好账号登录后，点击”SAVE“，默认命名可修改。修改好后，可以点击”Change View“进行预览，全部完成后，可以在底部菜单点击”export“导出。可以直接导出为zip，或是存到GitHub。
是不是整个操作非常方便，就算你没有前端经验，就连代码都给你生成好，你只需要自行按实际需求进行修改完善即可。这样，一个主色调配色方案就已生成。