生硬的渐变！我要和你说再见！(上)

渐变，在设计的应用当中经常会看到，那么如何用好渐变为自己的设计锦上添花呢？下面来看看渐变有哪些类型以及实际应用？

无论是做界面还是画插图，我们总是离不开渐变色。界面背景色太平？加个渐变吧；想要突出光影？加个渐变吧。渐变色主要有配色和类型两个要素，我们今天就先看看渐变的配色。下一期会讲渐变的类型及一些实操。

渐变色主要可以从四个方面考虑，分别是饱和度变化、明度变化、色相变化以及透明度的变化。

1.相近色渐变

相近色渐变，色彩的色相值相差15°~60°左右（包括同类色、邻近色），色环上夹角为锐角，明度和饱和度数值基本保持一致。这种渐变是UI界面设计中最常见的，一些以渐变色作为主题色的APP常用的就是相近色渐变，如下图：

2.强对比渐变

强对比色渐变，色彩的取值范围可相差90°~180°左右（包括中差色、对比色、互补色），基本是一个色值靠近冷色系，一个色值靠近暖色系，颜色跨度大，色环上夹角基本是钝角，有极大的视觉冲击力，常常用在运营活动H5界面、引导页等强视觉的渐变处。如下图：

1.sketch插件“Easing Gradient”

这个渐变工可设置渐变类型、色彩空间、步调及控制曲线，使渐变更加柔和多变，还可以拷贝CSS样式给开发小哥哥。

2.推荐网站

1)  https://uigradients.com

这个网站，渐变色全屏铺满整个界面，左右点击即可切换渐变色配色方案。可以下载jpg，可以旋转上下左右四个角度查看，还可以查看渐变的css样式。

2）https://webgradients.com

这个网站的渐变色有近180个方案，配色也比较好看。

3）https://www.grabient.com

最后推荐一个网站，这个网站的渐变配色不太多，但是可以直接在上面进行颜色增减、角度、比列的调整。