渐变色现在非常的流行，但是很多同学掌握的并不好，今天就给大家分享一篇我见过最适合零基础也是最实用的渐变色教程！教程从最简单的灰阶渐变到晋级的类似色/对比色渐变，非常详细而且通俗易懂，中间还穿插分享了大量的实用渐变技巧和实例教程，真的是良心推荐！
在教程开始之前，首先给大家推荐下面三篇渐变色先关的文章工具，无聊的时候可以上去找找渐变配色的灵感，任务紧急的时候也可以直接拿来用的。
推荐阅读》《配色新手的福利！两个渐变色配色网站》《60种渐变色配色分享！》《180种渐变色》
好了接下来正式开始：这篇文章主要会介绍3个主题：
色彩学
类似色渐变
对比色渐变
一、色彩学
太深入的色彩理论的就不讲了，讲了大家也会觉得不实用，我们这里就简单介绍下传说中的伊登色相环，其结构为：等边三角形内的三原色─红、黄、蓝作为第一次色，将三原色两两相加可调出橙、绿、紫等第二次色，如果再将这六种颜色中两相邻的颜色等量互调，得到该两色的中间色（第三次色），便产生了十二色色环。这篇文章所应用到的渐变色方法其实只要简单理解一下伊登色相环，相近色，对比色以及色相明度彩度等等的基础概念就够啰。
二、类似色渐层
灰阶渐层：首先我们先从配色的基础的开始，白 → 灰的渐层可以说是大自然中光影变化最基本的一种类型，这样子的渐层搭配也是最建议初学者拿来练功用的喔（再运用白 → 灰的渐层时并不需要考虑到检测器上各渐层区段的差异，这些差异只要一用不好就很容易导致颜色灰阶过高（脏掉）或是饱和度（彩度）不均匀的问题）。以下图范例而言，左侧上浅下灰的渐层，在搭配内光晕后能够轻易的让图形浮凸于纸面；右侧上灰下浅搭的渐层，则可以搭配内阴影来呈现凹陷于纸面的效果。
上浅下深（左）上深下浅（右）
上面两种是基本中的基本，如果想要做出中间凹陷，但是凹陷的部分是浮凸出来的感觉，除了上灰下浅的基本技巧之外还要稍微运用一点放射状渐层来分别调整上部以及底部的光影，下一篇会提到更多这样的观念喔。
是不是有一种凸出来的感觉呢?
当然，上图几个示范的三维效果其实还不够完整，但以现在Flat Design盛行的状况，对于光于影的变化有一些基础的了解是相当有帮助的。有了基本的视觉雏形，我们可以再进一步的进行渐变（渐变角度，渐变区段，内外光晕）的微调，同时考虑到光影的变化以及阴影的角度位置，就可以轻易的作出下图锤子手机时钟图标的范例效果啰！（下图除了白 → 浅灰的渐变之外，为了做出凹陷的平面，同时也运用了浅黑 → 深黑的渐变变化）
那么究竟该如何制作一个简单的灰阶渐变呢？其实做起来就跟下面这张图一样容易 →
主要的调整就只在检色器的最最最左侧上下移动即可，如果希望带点淡淡的色泽可以往右边稍微移动一点点，这样的效果有时候会运用在物体本身是白色但周围是有色背景时，物体因为背景产生的反光影响到白色物品的表面色泽。如果希望整体给使用者的印象是清爽干净的，渐变中搭配的灰色就不应该太重，如示意图从白色往下调整一点点即可，若是选用深灰色来做搭配，产生的则是另一种沈稳的效果。
下面我们说下该如何简单实作上面的时钟icon
Step 1. 绘制一个上浅下深（颜色相近）的圆角矩形作为icon背景（光源在上）。
Step 2. 为图形加上内阴影（底部）与外阴影来凸显出立体感。
Step 3. 绘制中间的钟面部分，运用浅黑 → 深黑的渐层来制作凹陷的平面，同时搭配椭圆形状+高斯模糊来制作简单的光影效果以进一步模拟圆弧凸面的效果。
Step 4. 最后在绘制指针时要稍微注意一下渐层拉的角度喔！！在绘制时请务必随时记着光照射的方向 → 在这里因为指针的边缘较细，指针尖端边缘的部分会因为反光而较为明亮，因此我拉的渐层既不是正0度或是90度而是顺着指针方向的25度左右。后续的部分较简单我们就先不多谈啦。
高彩度色系渐层
讲完了灰阶的基础渐层搭配，我们来看一下其他色系的搭配。单纯在同一个颜色当中进行明度彩度的调整如下图跟灰阶的部分相当类似就不再赘述啰。
这边只补充一个小重点，同色系的渐层选色请记得往检色器的右下角移动，右下角移动，右下角移动，很重要所以说三次。这样子的移动方式主要是为了避免调整色阶的同时灰调的增加过快，渐层也比较不容易脏掉或是造成颜色差异过大喔。除此之外，对于初学者在渐层的角度配置调整上面，当所有物体处于相同平面时应该尽量让整体角度效果一致（毕竟光主要会从同一个地方来麻？）。
接下来我们来看看稍微进阶一点点的 → 选配渐变对于跟我一样的初学者而言遇到的几个问题不外乎是 1.搭配的渐变色感觉不对（不自然） 2.搭配的渐变色好像有点暗沉（脏）。那该怎么样避免这些问题来做出漂亮的渐层呢？
配出上图这样的渐层其实非常容易，除了前面所提到的一些小技巧之外只要注意两个基本原则就可以啰，对于浅色系的渐层，如同浅色系渐层范例，明度的调整区间不宜太大（1/10）。在检色器上面我们可以改变彩度，色相来配出喜爱的渐层变化，但是上下移动的幅度就要保守一点，否则配出来的渐层就很容易产生脏脏的视觉效果。
浅色系渐层范例
至于暗色系的渐层，明度的变化就可以大一点，但记得除非渐层一开始的选色就是相当深的暗色系，否则调整的幅度也请尽可能确保在明度的变化在1/4–1/5的区间来避免过脏或是颜色落差过大的问题。
暗色系渐层范例
补上一个类似色搭配图形（透明度）变化的范例，蓝绿，绿色渐变的使用相当的普遍，当这类型颜色的明度及彩度较高时往往可以带给使用者一种活泼明亮的视觉印象。
高明度色系渐层
上面几组渐层的搭配彩度较高，现在我们来看一下该如何处理明度较高的渐层配色模式。基础的高明度渐层处理起来相对容易，确保选择的颜色都保持在检色器的上方1/5内，同时不要让彩度变化过大都可以情松达到如下图的效果。
对比色渐变
什么是对比色？
在色相环当中，相对成180度，也就是直线两端的颜色，即为对比色〈又称为补色〉。基本上制作渐变的原则都是相当类似的，但是在运用对比色搭配渐变使用时，有几个小技巧是我会特别注意的：
1、对比选色的彩度差异不要太大。
在选色上不一定要拘泥于刚刚好180度，基本上160–200度这个区间都可以达到相当不错的效果。
2、建议画面的配置上一个做为主色一个作为副色。
请根据类似色渐层章节中的概念来制作渐层。
对比色渐层范例
