设计神器Mobile Palette Generator！自动生成UI设计移动端配色方案

平⾯设计的三要素是：⾊彩、⽂字、图⽚，UI 设计当然也离不开这三要素。

⼤家刚⼊⾏ UI 的时候可能或多或少的被配⾊折磨过吧，选了⼀个主⾊，但是不知道怎么应⽤互补⾊、对⽐⾊这些⾊彩理论去寻找合适的辅助⾊点缀⾊。 接下来要介绍的这款神器，以及它另外四个同样神奇的神器朋友，将会帮你打消⾊彩⽆助的阴霾。

神器介绍

Mobile Palette Generator（移动端界⾯调⾊板⽣成器），看中⽂译名不难看出是针对移动端推出的产品。功能专⼀，只做⾊彩，并且还频繁驻扎 Product Hunt ⽇榜第⼀。

使用方式

⾸先明确⼀下界⾯逻辑哈，跟常⻅的⼯具⼀样，采⽤左右布局，左边为操作⾯板，右边为结果⾯板。

操作逻辑跟布局息息相关，我们需要先在左边的操作⾯板中来定义 Main Color（主⾊），主⾊的定义有：拖拽取⾊标、滑动取⾊条、输⼊Hex ⾊值三种⼤家习以为常的⽅式，还有⼀种就是选择⽹站提供的六种预设颜⾊。

每次选择的主⾊⾊值也会在取⾊器下⾯做映射，并且可通过 Copy Link 复制当前⾊值。 定义完主⾊，系统会⾃动⽣成与之相配的 SECONDARY COLOR（辅助⾊）、ACCENT COLOR （强调⾊）

辅助⾊和强调⾊⽣成之后，除了 HEX ⾊值外，还会显示出 HSB，并且可以对它们进⾏微调： Saturation（饱和度）、Brightness（亮度）都可以拉动滑块进⾏定义。 这些主⾊、辅助⾊、强调⾊都⽣成之后，在右侧的结果⾯板可以实时看到这些颜⾊的应⽤效果， 会按照主⾊ 60%、辅助⾊ 30%、强调⾊ 10%的科学⽐例进⾏⾃动分配，⾮常直观：

并且有这三种颜⾊的应⽤点说明，⼤家对层级不敏感的话也可以在这⾥寻求答案。

神器的朋友

物以群分，神器还有四位同样优质的朋友需要跟⼤家简要介绍⼀下。在Mobile Palette Generator 的右上⻆可以看到它们四个的名字：Gradient Buttons（渐变按钮）、2 Color Combinations（双⾊搭配）、Material Palettes（调⾊盘）、Colorion（⾊卡）。

Gradient Buttons（渐变按钮）

顾名思义，是⼀个专⻔提供各⾊渐变⾊卡的⼯具，之所以名叫「按钮」，是因为⻚⾯中中的⾊卡均为按钮样式，点击这些⾊卡和按钮，将直接复制⾊值代码，我们就可以去到各种软件⾥⾯复制进去了。对开发⼩伙伴来说⼗分便利，对设计师伙伴来说，需要抽丝拨茧看⼀下 Hex ⾊值才能应⽤到设计稿中。

2 Color Combinations（双⾊搭配）

双⾊为主⾊+辅助⾊，⽹站会提供⾮常丰富的⾊彩做搭配展示，左右两侧简单来说就是两种颜⾊ 分别为主⾊、辅助⾊时的效果展示。因为是双⾊嘛，所以中间的「复制⾊值」按钮也是两个，供⼤家⾃⾏决定取⾊顺序。配⾊不熟练的同学也可以尝试着来找找灵感。

Material Palettes（调⾊盘）、Colorion（⾊卡）

⼤家应该也⽤过各式各样的配⾊⼯具，调⾊盘和⾊卡也是这样⼀个⽹站，⾥⾯有各式各样的⾊ 卡，每⼀套有五种颜⾊，每个圆形⾊卡只要⿏标放上去，就可以通过点击，复制下来单⾊的色值。

结语

不是每位设计师的⾊感都很到位，确实有天⽣⾊感很好的⼈，但⽆论是谁都需要⼀个锻炼的过程，那这个神器可以很好的帮⼤家练习配⾊。虽然⼗分⽅便，但是希望⼤家把它当成⼀个引路⼯ 具，不要依赖它，毕竟创造美好事物的是你⾃⼰。 好了，感兴趣的朋友快去试试吧～相信它可以帮你很多～

神器链接：Mobile Palette Generator

本⽂编辑：CCOA

使用过这款神器的朋友也使用过...