配色，设计师的世纪难题。从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。UI 的发展从拟物的繁琐细节中挣脱来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— 「七秒钟定律」：人们在挑选品和服务时 ，只需要 7 秒钟就以确定是否感兴趣，而在短暂的 7 秒钟内，彩的用占到 67%。
要在小小的手机屏幕中加么颜，并持其中的联系和逻辑，着不易。果你还对一无所，完不道应该怎么手，么你需要一下，我几年经验总结的思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和彩打道最的地方就是拾器窗口，我们来看看案例：
虽是不同的应用，但是个拾器的用法大同小异，但是，很新人并没有搞懂拾器的正确应用逻辑。
多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、度（B）。
HSB 是色彩科学中对所有颜色属性的理论划，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
为个正确选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细的同学应该已发了，它们的首尾都色，那因色相的序列一首尾相接的环形模式，所以它实际就色环的柱状展示图，应用起色环实际区别。
接下就到重点，饱度明度选择区，我自己使用的习惯，将这选择区通过黄金三分法的方式切割比的 9 区域，然后明确它们 UI 中的对应绪应用场景。
过去的分析中，互联网产品的主色重辅色都会往右角聚集，一些次、不可点的色彩聚集中方，文字背景色则聚集左侧，无人区则我们重点避的对象。
面我们分析几个案例，看看它们在这个择区中的色彩分布情况：
大家也可以自己拿些主流应用做截图，然后把它们 UI 元素色排列到拾色板，会到基本致结。牢记这9个区域场景划分，可以帮助我们常高效、安全地完成 UI 配色。
在众多 UI 设计规范，色部分介绍，都必然含三类型，分是：
- 主色：应用的核心色彩，品牌色
- 辅色：丰富页视觉和传效要颜色
- 中性：色相的文字、背景用色
1. 主色的选择
主色是一个应用的最核心的色彩，品牌的象征色，比如想饿了的蓝色、的绿色、的红色、淘的橙色。
确定主色，并没有大家想象那么复杂，它要在于——你想让用户感受到哪情绪，然后过情绪关联个大致色范围，再进微调。
在今天互联网品，主色应用选择范围在拾色区域右上，前已经有解释了。这和平设计用色有常大不。
移动端产品一方寸的空间中争夺用户的注意力，引起用户的趣，那么低饱清淡的色调无法实这目标的，所以今天主色饱度越越极致，比如我们之整理的一篇总结：
为么支付宝要换 Logo 颜色？分析目前 Logo 的色趋势
加上屏幕的 RGB 显示特，高对比度，高动态范围的特质能给用户提供更的观感。所以选择主最安的做法，就是在确定相类型，在右上方区域选出合适的值。
2. 辅助色的择
辅助色是丰富应中的次要色彩，它会包含一到若干个和色同的色彩，除了牌传达外，具有更强的实性。
前面我们提到，里就要派上用场。我们道是个彩序列首尾相连的形模型，它蕴含一个最朴素的原则，即两个颜在个形中角度越大，么视差异越大，对比越强，比下图的展示：
的模式是不能闭着眼随便挑的，它们仅仅为一个彩对比度的判断标准。而正辅助的选择，是根据际场的功能决定的。
比如通知、提醒、取消用大红色，确认、同用绿色或者蓝色，收藏、、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简、最安全的辅助色选择方式。
没有标准元素用色情况下，再考虑应用色环 「度原则」，越需要被突出颜色，可以在色环离主色越远，越不需要被突出则越近。
比如下方携程的案例，主色蓝色的况下，支付、保险金标签这些需被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产强烈的操作欲望。
3. 性色选择
性色，是页文、背景用到颜色，它们承担起最基本层表现、便于阅读任。多数新手觉性色关紧要，实情况恰恰相反。
主色辅色决了界面视觉否出彩，中性色的应用直接决了页面能不能常使用。如果看过比较多的原型案例，就应该明白，即使只黑白灰的状态下，我们理解这些页面行使用也不会丝毫的障碍。
中性色的配置，就制一由深到浅的灰度阶梯，应用对应权重的元素，色彩轻重的主判断依据 HSB 中的 B（明度） 。
中性色虽然指的无性，但并不只能用纯灰色，常见的一种法，就中性色添加的蓝色饱度，提升观看体验（满足RGB的某种特性）。
这种做法，颜色越浅的时候饱和应色值就越低，将这个规律在拾色器中进行表现，那么我们就可得到一个 L 曲线，我称它为 「中性曲线」。
掌握对于色、辅助色、中性色的择方法，那么对于UI配色的奥义来说，你已经掌握了一半，接来就要了解更具体的实践思路了。
配色并是只有色彩的色值本身，大一直在研究各种色彩心和论，却很心它们如何应，如何配置。
所以，我根据主和辅助应用总结一个的四象表，分别看看它们对应的案例：
1. 色占大，色彩丰富
色会作为顶标题栏或它重要模中的背景色，进行大面积应，深户对牌的认知和辨识。而产中又包含了大量功和务，需要丰富的色彩来进行暗示，吸引户注。
2. 主色占比大，色丰富度低
这类配色，主色应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富题材，或者是相正、品感强应用。
3. 主占比小，彩富度高
是数主流应用的趋势，降低主占比，留出更的空间给内容模块的展示上，突出自身带有的服务和功能。
4. 主色占比小，色彩丰富度低
通常，会应用这种方式因产品的服务相对单一，但也需用户投入注意力的应用，设师就会尽力避免给予用户过多的扰。
在进配色时候，我们都需要自己要应用哪配色应用做出规划，然后再动手执。有了这个目标，后在个项目设计配色步骤是到渠成事情了。
在实践前，我们要简单讲讲个应用或者界标准配色流程了，流程序如下：
具体应该怎么使用这套流程，我们用个图虫APP改版案例来做演示，首先从四象限第个主色占比高、色丰富度高类型做起。
1. 配色流程演示
原型是 UI 设计基本艺能了，在开始具体设计、配色前，搭页框架原型是个必备条件，下，是我们已经准备好原型案例。
然后，我们确定以橙色作为应用主色，并在拾色进确认。
有了主色，可以页进色填充和图片填充了。既然我们主色是占比大，那么首先可以用到是顶部标题栏背景色了，以及底部 Tabbar 选色，大按钮色等。
接着，我们开始理性色使用，选择新颜色来填充文和背景，晰表现模块层级，文信息权。
最后，是添加辅助色和其它色元素了，这个步骤议都是放在最后步操作。为色越丰富，越难控制，容易让个画显杂乱序，所以先完成基础搭，可以更好帮助我们判断色使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签元素使用其它色彩，丰富页面的色彩内。
2. 其他配色类型应用
根据第个案，我们可以再用这个原型来实现其余三个案配色。
比如下面的主色占比，但色彩丰富度低的。因已不太用其它辅色，所以主色填充我们不再填充顶部导航栏的背景，将多元素应用主色，减少辅色数。
然后主色占比小，色彩丰富度高的方案，一降低主色应用的比例，然后金刚区、标签处使用较丰富的配色。
后，就主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就始增多，只保留核的一些元素使用主色，极少的辅色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果风格，每次设始实施，我们都可以根据这种法试，并选出自己满意的方案。
要再次强调，UI 配色是极强调形式的应科，最后做的往往会和一开始想的效果有极大入，需要我们有几个备方案，可随时进行调整，并合的那个。
上是我们于配色有知识点的分享，希望可帮助大升对 UI 配色的认识。
欢迎关注作者的微信公众：「超人的电话亭」
浙公网安备33011002017549号