无论是做界面还是画插图，我们总是离不开渐变色。界面背景色太平？加个渐变吧；想要突出光影？加个渐变吧。渐变色主要有配色和类型两个要素，我们今天就先看看渐变的配色。下一期会讲渐变的类型及一些实操。
渐变色主要可以从四个方面考虑，分别是饱和度变化、明度变化、色相变化以及透明度的变化。
饱和度变化（S）
饱和度(S)，即色彩的纯度，取值范围是0~100，为0时灰色，为100时具有最大饱和度。渐变色中饱和度的变化通常是一个高明度色彩饱和度的改变(高明度色彩趋向白色，可以中和低饱和色彩的灰)，明度一般在90~100。
在相同的明度下（高明度90~100），饱和度低的色彩过渡到饱和度高的色彩会产生一种微立体感，低饱和度色彩会给人一种高光的效果。
明度变化（B）
明度(B)即色彩的明亮度，取值范围是0~100，为0时为纯黑色，为100时为纯白色。渐变中从高明度过渡到低明度也可以产出微立体感。
明度和饱和度的变化经常结合一起使用，使渐变过度的更加自然。常常会用在渐变图标或是个人中心背景图中等。如下图：
色相变化（H）
色相（H）的取值范围是0~360°，常见的配色方案有相近色渐变与强对比渐变，相近色渐变更加缓和，强对比渐变则视觉冲击很强。
1.相近色渐变
相近色渐变，色彩的色相值相差15°~60°左右（包括同类色、邻近色），色环上夹角为锐角，明度和饱和度数值基本保持一致。这种渐变是UI界面设计中最常见的，一些以渐变色作为主题色的APP常用的就是相近色渐变，如下图：
相邻的颜色形成渐变色能保持相同的冷暖基调，比如淘宝的橙红和橙黄同属暖色系；开言英语的绿色和湖蓝同属冷色系。
2.强对比渐变
强对比色渐变，色彩的取值范围可相差90°~180°左右（包括中差色、对比色、互补色），基本是一个色值靠近冷色系，一个色值靠近暖色系，颜色跨度大，色环上夹角基本是钝角，有极大的视觉冲击力，常常用在运营活动H5界面、引导页等强视觉的渐变处。如下图：
强对比渐变配合角度的不同能形成非常强的色彩冲击，最近流行的镭射风格和流体渐变就是在强对比色的基础上，再将不同的色块随意、流动的改变，如下图：
透明度变化
在渐变中加入透明度的变化，常用在叠加渐变中使用。将某一端渐变色的透明度调制0，可以很好的融进背景色中，像一束放射的光线。尤其常用做点缀图形使用，也可用做插图中绘制投影或是营造远端图形的虚化，如下图：
马蜂窝个人信心黄色背景下，加入了几何图形白色不透明渐变，融合到了背景中；右侧引导页中则通过不透明渐变绘制出了物体的阴影效果。
当你觉得除了渐变总少了些什么时就可以尝试在上面在叠加一层白色或同色相的不透明渐变，可以起到丰富层次的作用。
渐变色工具与推荐网站
这里大家推荐一些渐变色工具和渐变色网站，希望能帮助大家更好地搭配渐变色。
1.sketch插件“Easing Gradient”
这个渐变工可设置渐变类型、色彩空间、步调及控制曲线，使渐变更加柔和多变，还可以拷贝CSS样式给开发小哥哥。
有需要的小伙伴可以在消息中回复“sketch渐变插件”。
有需要的小伙伴可以在消息中回复“sketch渐变插件”。
有需要的小伙伴可以在消息中回复“sketch渐变插件”。
2.推荐网站
1)
这个网站网赚项目，渐变色全屏铺满整个界面，左右点击即可切换渐变色配色方案。可以下载jpg，可以旋转上下左右四个角度查看，还可以查看渐变的css样式。
2）
这个网站的渐变色有近180个方案，配色也比较好看。
3）
最后推荐一个网站，这个网站的渐变配色不太多，但是可以直接在上面进行颜色增减、角度、比列的调整。
划重点
渐变色的配色变化可以从饱和度、明度、色相、透明度四个方面考虑：
01､饱和度和明度变化常常搭配使用；
02､色相变化缓和的相近色渐变以及视觉冲击强的强对比渐变；
03､透明度变化则常作为背景色上的图形点缀使用，以及绘制投影和远端物体。
线型渐变
线性渐变是我们平时使用最多ai渐变色怎么调自己想要的颜色，也是开发小哥哥能通过代码实现的渐变。
线性渐变以某一点为起点，直线链接到任意终点，所有色值点都在一条直线上，如下图：
线性渐变原理简单，能用代码实现，开发可以写出上下、左右、对角线三种方向，因此在界面设计中使用最广，上篇文章提到的甚至有些产品会用线性渐变作为主题色，如下图：
径向渐变
径向渐变也是开发小哥哥可以用代码实现的渐变类型，径向渐变以圆心为起点（圆心位置可以调整），向四周呈现水波纹似的扩散渐变，圆心外有一圈线框控制圆的大小和圆、椭程度，如下图：
径向渐变尤其适合为圆、球体画渐变，在渐变色过渡的时候也比线型渐变更加有层次，如下图：
上图中，左图是用线型渐变绘制的不透明光的过渡，右图则是用径向渐变绘制的（起点圆心在右下角），可以看出来，用径向渐变绘制的圆比线型渐变绘制的更加有弧度。
如果你想通过渐变色改变用圆绘制一个球体，径向渐变也是最佳的选择，如下图：
ps：在Sketch、Ps、Ai中，Ps的径向渐变与线型渐变对比最明显
角度渐变
角度渐变是从起点到终点颜色按顺时针做扇形渐变（摘自百度百科），当起点和终点色值不同时，就会形成一条生硬的连接线，Sketch中只要起点终点没有重合就不会出现生硬的连接线。ps：Ai中没有角度渐变
角度渐变可以用来绘制色环，在Ps自带的渐变中有一个彩虹一般的的渐变（别嫌他丑），先画一个圆环，再选择角度渐变，选中彩虹渐变，你就会得到一个6色色环啦。
以上三种渐变都是比较常规的渐变类型，接下来我们来看看一些不走寻常路的渐变
描边渐变
描边渐变其实也是常用的类型，在UI设计中可以用来绘制线性图标，配合角度渐变可以做出个性化的线性图标，如下图：
这里我主要给大家介绍一下在Ai中描边渐变的特别之处。Ai中的描边渐变除了本来带有的渐变类型，还有三种描边类型的选择，分别是：在描边中应用渐变、沿描边应用渐变、跨描边应用渐变。
1.在描边中应用渐变
这种类型就是直接在描边中应用选中的线性、径向渐变，与面型图形二者的渐变没有特别的区别，如下图：
2.沿描边应用渐变
沿描边应用渐变就是选中的渐变类型（线性、径向），沿着描边的路径扩散开。
前面角度渐变我有提到Ai中是没有的，但是线性渐变下沿描边应用渐变就可以绘制出与角度渐变相近的效果，如下图：
3.跨描边应用渐变
跨描边应用渐变，以描边的外边缘向描边内边缘应用渐变，这种方式可以绘制出由远及近的透视感。
如下图：
任意形状渐变
任意形状渐变是Ai中特有的渐变类型，是从cc 2019开始有的功能。
选中一个图形，使用任意形状渐变，你可以向其加点、线调色，形成多色块混合的渐变，如上篇文章的镭射风格色块就可以采用该方式进行绘制，如下图：
流体渐变
流体渐变与任意形状渐变虽都是多色块的渐变类型，但流体渐变中的色块拥有一定的律动感。因此流体渐变不易通过Ai自带的任意形状渐变绘制，但可以借助Ai的网格工具进行绘制。
我们一起来看看iPhone X的流体渐变的绘制方法
第一步绘制出图形，第二步为图形增加网格
第三步用选区工具选中不同的网格点修改颜色，第四步调整网格点手柄至自己想要的效果。
最终的效果：
这种渐变视觉冲击效果强烈，适合用在运营活动设计中，界面设计中较少使用。
划重点
01､线型渐变色值点都在一条直线上，是前端小哥哥可以用代码实现的渐变；
02､径向渐变以圆心为起点向四周扩散渐变，也是可以用代码实现的渐变；
03､角度渐变是从起点到终点颜色按顺时针做扇形渐变，可以用来绘制色环；
04､描边渐变与线型图标搭配使用可以绘制出个性化的图标，Ai中有在描边中应用渐变、沿描边应用渐变、跨描边应用渐变三种类型可以选择；
05､任意形状渐变是Ai中特有的渐变类型，可形成多色块混合的渐变；
06､流体渐变可以通过Ai中的网格工具绘制出来。
本篇文章只是介绍了6种常用的渐变类型，要灵活运用还是要多多练习才是，赶快打开你的电脑动起来吧！
参考引文：
《超实用！高手的 Ai 兵器谱之「渐变知识」全方位解析（上）》
《超实用！高手的 Ai 兵器谱之「渐变知识」全方位解析（下）》
关于不错研究室
不错研究室是由一群热爱设计分享的设计师发起的神秘组织、以问题为导向的分享组织，定期推荐不错的全球设计师进行直播分享，原创干货+精选转载+微课报名ai渐变色怎么调自己想要的颜色，不错真的不错！
