010到1010渐变的视觉趋势，这几年可谓如火如荼。很多平实的设计，把平实变成渐变，能立刻增加抢眼感。
虽然渐变是有效元素，但是为什么我们的渐变和大神的不一样？应该如何制作渐变纹理？为什么颜色是渐变的本质？今天我们要和大家聊聊梯度，了解一下我们似乎理解的梯度。我们来和大家分析一下渐变配色，利用颜色不同特性之间的对比来使用颜色，以及一些简单的操作技巧，比如快速生成一个色轮，简单使用混合工具来搭配渐变配色的颜色。
前言
我把这篇文章做了四个小视频放在荔枝微课平台上。
可以点这里去荔枝微课。
或者使用以下网址跳转：
渐变是一种相对缓慢的颜色过渡，我们的视觉会随着过渡产生流动感，而这种流动感依赖于颜色的各种变化。是的，我们的重点来了。正是这种变化，需要我们今天深入理解。
说到改变，我们自然会想到这个改变的范围。如果拿出我们的色轮，会发现色轮上的变化范围有大有小。当两种颜色接近时，我们可以说它们是相邻的颜色，很难发现它们的区别，直到我们的肉眼无法分辨。这个时候可以说变化的幅度很小。
当两种颜色之间的距离为180并且在色轮上相对时，我们可以说此时的颜色变化最大，因此有最强的对比。颜色对比的很多情况也是在这种对比下发生的。我们通常称这一对颜色为互补色。
当然，实际情况要比这个复杂一点。让我们一起来看看吧。
视频播放
刚才你能找出这个色轮上的颜色有什么特点？只是色调变了。是的，我们已经习惯了，只用色相来区分颜色。所以，我今天要说的第一个对比就是色相的对比。
色调的对比可以直观的显示在色轮上。比如红色和黄色的线段，被截取后就变成了红黄渐变。利用色环可以很容易地实现色调的渐变。距离越远，渐变色的对比度越大，互补色之间的对比度达到极值，比如红蓝渐变的对比度大于红黄渐变的对比度。
首先教大家一个快速生成色轮的小技巧，不需要借助图片，也不需要借助网上的工具。现在做很方便。
色相对比
STEP01
先用这个自定义形状工具画一个圆。
STEP02
然后用颜色填充圆环，这里我们使用渐变叠加。
渐变叠加的叠加方式是角度渐变，这里选择渐变颜色作为“色谱图”。如果没有找到这个梯度，记得添加色谱图。
这时候制作色轮，色彩的饱和度达到最大。所以也能表现出最强的色相对比。目前流行的渐变是明度较高，饱和度中等的渐变，也是像这样的糖果色，所以这个时候你可以用调整图层【色相/饱和度】来增加明度或者降低饱和度。
小技巧：快速生成色轮
初学者可能容易忽略的是，我们看PS中色彩(HSB)的参数，一般来说是H-色相、S-饱和度、B-明度。这里的情况和我们在色彩学里学的HSB有点不一样。
这里色相没有问题，但是饱和度和明度，尤其是饱和度，你可以看到一般来说，饱和度最低的时候，颜色慢慢失去色度，也就是出现灰色，但是在软件中把S的值调到最小，就出现白色，还有一个属性：明度，最大明度，应该是白色，但是在软件中把B的参数调到最大，就不是白色了。
在PS中，只有将颜色放入工具色相/饱和度中，才能看到与我们书中概念一致的特征。
高能提醒：别被参数骗了
用色环匹配的渐变颜色和直接用渐变工具匹配的渐变颜色还是有区别的。最重要的是颜色过渡。如果使用渐变工具选择左边绿色右边紫色的渐变颜色，中间的过渡色会显示为灰色。如果两端的颜色在色环上成一定角度，就会出现这种灰色。这是因为这两种颜色相互混合了。在某些情况下，确实需要过度，那么直接用渐变工具做渐变就可以了。
还有一种情况是你不希望颜色是灰色的。这时候就需要使用一个色环，根据需要的渐变过渡，在色环上选择不同的颜色配置。
可以看出，虽然饱和度和明度没有变化，但颜色仍然是彼此独有的，所以基本上可以利用色相对比产生优秀的渐变作品。
总的来说，渐变本身就足够吸引人了。有了渐变色的参与，我个人的建议是颜色不要太多，元素越少越好，整体风格趋于极简。这时候最能发挥渐变色的魅力。
在这种情况下，梯度过大。中间的红蓝渐变是用渐变工具做的，两边渐变过度。可以看到颜色两侧渐变中的色相越来越饱满，饱和度和明度都没有损失，而中间的渐变在红蓝之间过度时是饱和度较低的紫灰色。
工具不同，渐变也就不同
色温是多少？色温更多的是颜色对人的主观心理因素的影响。虽然是主观的，但是大家的整体倾向还是比较相似的。比如蓝色是冷色，红色是暖色。
所以如果按照主观温度来划分色环上的颜色，就会有我们经常听说的暖色和冷色。冷暖色虽然不能用属性值来衡量，但是在颜色中起着很大的作用。
色温对比
在渐变中加入色温属性，游戏会更好玩。一般来说，为了达到色彩搭配的平衡，我们需要在我们的色彩搭配中平衡冷暖。这里的平衡不是严格的1: 1的比例，而是相互渗透。双方根据位置、面积、形状等元素的共同参与，共同实现一个页面的平衡。当然这并不容易，但却是我们配色中的方向之一。
回到我们的色温对比，要体现在渐变上，就要有冷色和暖色的参与。一般来说，在简单的过渡双色渐变中，冷色和暖色是很常见的表达方式。就拿刚才的案例来说吧。左边的两个配色太冷太暖，右边的配色比较暖。当然，洋红色还是比橙色冷。
获得平衡感
冷色和暖色的对比是同一布局中的动态对比，尤其是对于绿色和紫色范围内的颜色。例如，当绿色与蓝色搭配时，因为蓝色绝对凉爽，所以绿色显得温暖，而如果绿色与橙色搭配，橙色绝对温暖，所以绿色显示凉爽。紫色也是如此。蓝色倾向于温暖，橙色倾向于寒冷。
其实用起来很简单。如果你发现你的配色整体感觉偏冷，那就增加暖色。如果太暖，增加冷色调。如果看不出整体配色有什么问题，但总觉得颜色有点怪，那就先看看色温是否均衡。
绿色和紫色：冷暖不定
再加一个属性，渐变的游戏又增加了难度。明度的属性是颜色的亮度，明度引入了另一个属性：光。其实我们平时看到的颜色只是因为光线。但一般来说，我们会简单地把光归为“冷光”。事实上，由于光的折射，我们的视网膜接收光的波长，产生颜色。那么光线的强度会影响这个颜色的表现。
亮度对比是所有颜色属性中最容易被感知的。我们可以简单的看一下，我们的素描就是用明暗来表现物体，黑、白、灰很容易表现出现实中光的感觉。所以在色彩搭配上，有了明暗的对比，是表达色彩诉求的好元素。
明度对比
即使明度相同，我们的颜色明度(从主观感觉上)也是不一样的。比如同样明度的黄绿色和紫色，在明暗表现上，黄绿色明显更明亮，更靠前。如果这两种颜色之间存在渐变关系，那么它的行为就像光线渗透到左上角的这个平面中。如果紫色的亮度进一步降低，此时亮度的对比会更加强烈。这是展示一些立体感的好时机。
当然，我们的颜色不一定要有立体感才会生动。有些配色高手会刻意弱化立体感，所以会尽量避免明暗对比。但是作为初学者，你必须知道明暗对比，知道在适当的情况下如何使用。
特别是在同一色系或相邻色系的渐变中，明度对比是增加立体感的一种方式。有时候平面绘画的方式看起来比较平淡单调，用同样的颜色渐变就能很好的解决问题。两种颜色可以很相似，即便如此，平面画还是有区别的。有了光的感觉，就要时刻注意受光的方向，保持全局光在整个画面中。所谓全局光，换句话说就是每个人都被同一个光源照射。
我们可以再给你看一下，比如这里有两个圆，都是用紫绿色渐变填充的，此时紫色和绿色是一样的亮度。这里注意，即使亮度相同，两种颜色在直观感受上也是不同的。比如绿色会稍微亮一点。此时打开渐变工具，给后面的绿色端上色，增加其亮度。这个时候大家会发现右边的圆变成了一个球体。
表现立体感
亮度渐变还是增加作品精细度的一种方式。我们和大神的差距，可能真的是一个小小的明暗之差。别忘了，明度对比对整体效果的影响最大，但也是最容易被忽视的。有时候一旦有了色彩，我们关注的重点就是色调和色度。但其实所有的配色，比如我们的设计，总是从黑白灰开始，先配置明度，再根据明度开始选色。
有了明度的把握，我觉得我们对色彩的把握可以上升到一个新的高度，否则，我们很容易迷失在一堆色彩中。
从黑白灰开始
这里说的色度也叫饱和度，有的书也叫色度，就是我们日常语言中的亮度。色度对比度越强，尤其是色轮上的互补色，当它们的色度达到最大时，就会碰撞出最大的火花，产生最强的效果。
有时候这种色度高的配色用在一个动感的设计中，看起来很有活力。但是这种补色也会有互斥的关系，会造成整个布局凌乱，所以对于色度要非常谨慎。
色度对比
色度对比最常用于塑造空间感。众所周知，色度越高，视觉上会越接近。
比如我们可以在这里画一个梯形，填充渐变。如果用单色，肯定感觉不到空间感。如果我们用渐变，使得同一个颜色，比如紫色，在这个梯形上从上到下做一个渐变，这个渐变两端的颜色就有色度的差异。那么就能体现出一种慢慢向远处延伸的感觉。甚至可以有暴露在空气中，被空气削弱的视觉效果。这也用于插图，也称为空中透视。
色彩密度的对比，结合其他色彩属性，使得色彩搭配更加复杂。但总的来说，配色没有标准答案。所以很多人在配色的时候都是靠一种感觉来操作的。其实感觉确实是最直接的选色方法之一，但不是唯一的方法。如果你对色彩有了更深的理解，你就会逐渐理解感官层面下更有趣的东西。这也是积累。
饱和度方面，如果PS感觉不太靠谱，就像我之前跟你提到的，那么你可以进入AI，用AI的混合工具生成不同的色阶。例如，我们在这里使用高饱和度的红色和低饱和度的蓝色。应该说两端的颜色有饱和度的对比，有色彩的调和与明度，有色温。应该说反差很丰富。因此，这个矩形不适合作为背景色。如果做成一些特效，还是不错的，比如设计字体的时候做笔画，或者做装饰线。
最后要简单提一下的是透明度的对比。虽然透明度不是标准的颜色属性之一，但是在我们的软件操作中还是相当实用的。对于渐变色，我们可以改变一种颜色的透明度，比如说改为0，这样一端的颜色就消失了，最容易造成浓雾效果。
这个插图是我设计自己的个人网站时制作的，其中这些背景中的立方体的一些面被一端的透明效果缩小了。有种在云端的感觉。
空气透视-空间感的塑造
这个网站的工具非常容易使用。我在群里推荐的时候，有人问我这个和PS里的渐变工具有什么区别？我刚才其实已经跟大家说了，PS里的色彩设置不符合我们的色彩理论，但是这个渐变工具完全符合我们对色彩属性的理解。所以你可以在这里调试，然后确定渐变的值，最后放到PS里。
这个网站，相信大家应该都不陌生。很多地方都有推荐，这种渐变色可以作为背景色。你可以看到，上面大部分的渐变都是比较高和浅的。过度也很微妙。你可以以此作为自己配色的参考。
除了这两个工具，还有很多其他有用的工具，我就不一一演示了。这是我用得比较多的两个网站，觉得挺实用的。
推荐两个渐变配色网站
其实颜色和音乐的感觉是最接近的，每种颜色对应每种色调，组合后能表现出一定的情绪。通常很难说哪首音乐是最好的，因为每个人喜欢的音乐风格都不一样。但总有一些歌曲广为流传，成为经典。
所以，学习渐变，首先要了解色彩。我们不能通过一篇文章来完成我们的学习。我们肯定希望以这篇文章为灵感，从中找到自己的学习方向。下一次，我们将分享渐变的类型。总结起来，有十多种。我会告诉你如何做每个梯度。那我们下次再聊。
ifeiwu
作者：飞屋瑞UIdesign
