问大家一个问题，你刚入行的时候，觉得 UI 的哪个方面比较难学难以掌握？
文字？不会吧，ios 就苹方安卓就思源，字号也有相对固定的规范。图片？应该也不会，基础的卡片式布局就很容易出效果而且一般都有固定物料可以用。
我想应该是颜色了，每个产品都有独特的主题色，相对的就会有辅助色和点缀色需要制定，只要一项数值不一样，那出来的最终效果也会有差别，而且还有色感问题，所以我觉得应该是颜色在跟入行的时候比较难把握吧。不过现在我要告诉大家不用担心不会配色了，因为今天要给小伙伴们推荐一款在线配色神器，来帮助我们拿捏 UI 中的色彩搭配！
「Goodpalette」 是一个专门为 UI 设计而生的专业配色工具，这个工具不仅能够生成搭配舒适的颜色，而且会同时生成对应的饱和度和明暗色阶，同时会把这组颜色实时反映在 UI 样机上帮大家迅速感知到这组配色在实际 UI 界面上的具体效果。最重要的是，经过工具生成和调整之后，我们可以一键导出配色文件，方便我们直接在 Figma 和 Sketch 当中使用：
网站编辑配色和导出配色文件的功能全部都不需要登录注册即可使用，其提供的实时样机，也不仅仅只有一款，到底有几款呢？来，咱们继续往下详细了解网站的详细使用方式吧！
这是一个典型的工具网站，打开网站链接之后就可以马上进行操作，操作面板有以下几个功能版块：
网站的操作面板就这几个可操作项目，不过可以达到的效果可是不简单呐。先来看看主要的可操作按钮吧，就是左上角的那三个「Generate（随机配色）」、「吸管按钮（设置主色）」、「Export（导出配色）」按钮。
首先「Generate（随机配色）」按钮顾名思义，点击之后就会随机一组配色方案出来，显示在下方的「配色展示」区域：
而中间那个「吸管」样式的按钮呢，是单独设置主色的按钮，如果我们现在有固定的主色色值，想看看这个主色如何搭配，那就在这里设置：
点开「吸管按钮（设置主色）」，可以看到只有色值的输入框，我们可以输入 HEX 色值也可以在调色板上自由选择颜色，选择完之后就可以点击右侧箭头按钮去应用了。只要主色变化了，这组配色会整体变换，十分智能。
而这些颜色的导出，我们可以通过「Export（导出配色）」按钮把当前配色组导出成 URL、SVG、CSS 出来，跟设计师以及前端交付无障碍：
大家以为「配色展示」区就只是用来展示的吗？不，它的上面也有一些操作项目，只是这些操作项目只有在鼠标光标放在色块上之后才可以看出来：
每一个单色都显示出来了色值，在其 HEX 色值后面会显示出来「复制」按钮，点击后就可以复制，这个没什么特殊的。
比较重要的就是鼠标光标放在色块上之后才显示出来的「锁定」按钮了，像上图所展示的那样，只要我们点击锁定把这个颜色给锁住了，那再怎么点击「Generate（随机配色）」按钮，被锁定的颜色都不会再变化，这个特质很有用，因为我们可以多去尝试一些其他可能性。
好了，现在就剩下界面占比最多的「样机展示」部分了，一共可以切换三种不一样的样机样式，点击两边的箭头就可以来回切换样机：
这些样机都是经常接触到应用场景，B端后台、C端网页和PC应用，实时了解到当前配色组的实际应用效果，十分的贴心、方便！
这个问题大家丝毫不用担心，Goodpalette 属于是一个合集，使用它是免费的，也没有其他的增值服务需要解锁，所产出的文件也仅仅是色彩，所以大家不用担心任何侵权问题，尽情的去寻找适合自己项目的配色吧！
- 无需登录注册且免费使用，无需担心任何增值计划
- 配色方案灵活设置，可随机生成各种配色方案
- 提供三种样式的样机，可以实时看到配色组合世实际应用效果
界面的配色真的是一件值得仔细研究的事情，因为现在的软件界面基本上都是简约风，版式变化不是很大，所以就更加需要色彩的选用，来树立姣好的视觉体验，使产品脱颖而出。上面这款工具确实很好用，可以减少不少配色研究工作，不过大家不要太依赖它，只有变成自己的经验那才是真正属于自己的能力。
OK，话不多说，神器链接就在下面，大家快去试一试吧！
神器链接：Goodpalette
本文编辑：CCOA
使用过这款神器的朋友也使用过...
非特殊说明，本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译，原作品版权归属原作者，转载请联系 @优优教程网 授权。
转载时请在文首注明，来源 UiiiUiii.com 及教程作者，并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
继续阅读与本文标签相同的文章：
发表评论 快来秀出你的观点