渐变质感技法入门指南：对比用色

@UIdesignn ：近年来，渐变的视觉趋势如火如荼。许多平淡的设计，将平涂改为渐变，可以立即增加醒目感。

虽然渐变是一个有效的元素，但为什么我们的渐变仍然不同于伟大的神的渐变呢？我们应该如何做出渐变的纹理？为什么颜色是渐变的本质？

今天，我们将与您讨论渐变的话题，并深入了解我们似乎认为我们理解的渐变。我们将与您一起分析渐变配色，并使用不同颜色特征之间的对比来使用颜色，以及一些简单的操作技巧。例如，快速生成色轮，并简单地使用混合工具来匹配渐变配色。

渐变是一个相对缓慢的颜色过渡。随着渐变的过渡，我们的视觉会产生一种流动感，这完全取决于颜色的变化。是的，我们的重点是这种变化，这需要我们今天深入了解。

说到变化，我们自然会想到变化的范围。如果我们拿出我们的色轮，我们会发现色轮上的变化范围有大有小。当两种颜色接近时，我们可以说它们是相邻的颜色。在肉眼无法区分之前，很难找到它们之间的区别。此时，可以说变化范围很小。

当两种颜色之间的距离为180时，在色轮上是相对的，我们可以说颜色变化是最大的，所以产生了最强烈的对比。许多颜色对比也发生在这种对比下。我们通常称这种颜色为互补的颜色。

当然，实际情况比这复杂一点，我们一起来看看。

一、色相对比

刚才你可以发现这个色轮上颜色的一个特点是什么？只有颜色的变化。是的，我们通常已经习惯了用颜色来区分颜色。因此，今天的第一个比较是颜色的比较。

色相的对比可以在色轮上直观地表现出来。比如红色和黄色，截取后变成红色 - 黄色渐变。色相的渐变可以通过使用色环轻松实现。距离越远，渐变色的对比度越大，互补色的对比度达到极值，如红色 - 蓝色渐变的对比大于红色 - 黄渐变。

首先，我想教你一个快速生成色轮的小技巧。这个技巧不需要使用在线图片或工具。现在使用非常方便。

1. 小技巧：快速生成色轮

STEP 01

让我们先用这个自定义的形状工具画一个圆环。

STEP 02

然后在圆环中填充颜色，这里我们使用渐变叠加。

渐变叠加的叠加方式是角度渐变，这里选择渐变颜色「色谱」，如果你找不到这个渐变，记得添加色谱。

此时制作的色轮在色彩饱和度上达到最大值。因此，它也可以显示最强烈的色彩对比度。目前流行的渐变色是高亮度、饱和度中的渐变色，也像这样的糖果色。因此，您可以使用调整层「色调/饱和度」增加亮度或降低饱和度。

2. 高能提醒：不要被参数欺骗

我们可能很容易被初学者忽视 PS 里的色彩（HSB）看看这个参数，一般来说，H-色相，S-饱和度，B-亮度，这里的情况，我们在色彩学中学到的 HSB 差别很小。

这里的色调没有问题，但饱和度和亮度，特别是饱和度，你可以看到，一般来说，当饱和度最低时，颜色慢慢失去色度，即灰色，但在软件中 S 最小值为白色；还有另一个属性：亮度，最大亮度，应该是白色，在软件中 B 当参数调整到最高时，它不是白色的。

在 PS 只有把颜色放在里面「色相/饱和度」只有在这个工具中，我们才能看到与我们书中概念表达一致的特征。

3. 不同的工具有不同的渐变

使用颜色环的渐变颜色与直接使用渐变工具的渐变颜色有所不同，最重要的是反映在颜色的过渡中。如果使用渐变工具选择左绿色，右紫色的渐变颜色，中间的过渡颜色显示出灰色的颜色。如果两端的颜色在颜色环上有一定的角度，就会出现这种灰色。这是由两种颜色的混合引起的。在某些情况下，确实需要这样的过渡，这直接使用渐变工具进行渐变。

另一种情况是不希望颜色变灰，然后需要使用色环，根据所需的渐变过渡选择不同的颜色配置。

可以看出，虽然没有饱和度和亮度的变化，但颜色仍然是彼此独特的特征，所以基本上使用颜色对比度，你可以匹配一个非常好的渐变作品。

一般来说，渐变本身就足够有吸引力。当有渐变参与时，我个人的建议是不要有太多的颜色，尽可能少的元素，整体风格往往是极简主义的。此时，我们可以充分发挥渐变颜色的魅力。

在这种情况下，中间的红色和蓝色的渐变是由渐变工具制成的。两侧的渐变采用色环上的渐变过渡。可以看出，颜色两侧的渐变中有更多的色调，更饱满，饱和度和亮度没有丧失，而中间的渐变在红色和蓝色之间的过渡中有较低饱和度的紫灰色。

二、色温对比

什么是色温？色温更多的是色彩对人的主观心理因素的影响。虽然是主观的，但每个人的整体倾向都是相似的。例如，蓝色很酷，红色很暖和。

因此，根据主观温度将色环上的颜色划分为暖色和冷色，这是我们经常听到的。虽然冷暖色不能用属性值来衡量，但它在颜色中起着很大的作用。

1. 获得平衡感

在渐变中添加色温，这个游戏会更有趣。一般来说，为了达到配色平衡，我们的配色需要冷暖平衡。这里的平衡不是1：1的严格比例，但相互渗透，双方根据位置、面积、形状等元素共同参与，共同实现布局平衡。当然，这并不容易，但这是我们颜色匹配的方向之一。

回到我们的色温对比，要体现在渐变中，就是要有冷色和暖色的参与。一般来说，在相对简单的过渡性双色渐变中，一种冷色和一种暖色是一种非常常见的表达方式。以刚才的情况来看，左边的两种颜色是冷暖的过渡，而右边的颜色相对温暖。当然，相比之下，洋红色会比橙色更冷。

2. 绿色和紫色：冷暖不确定

冷暖色的对比是同一布局中的动态对比，尤其是绿色和紫色范围内的颜色。例如，绿色，当与蓝色搭配时，因为蓝色是绝对的冷色，所以绿色表现出暖色的特点；如果绿色与橙色搭配，橙色是绝对的暖色，所以绿色表现出冷色的特点。紫色也是如此。当它与蓝色搭配时，它更喜欢暖色，而当它与橙色搭配时，它更冷。

事实上，使用起来也很简单。如果你发现整体配色感觉很冷，增加暖色。如果太暖和，增加冷色。如果整体配色看不出有什么问题，但总觉得颜色有点奇怪，先看颜色温度是否达到平衡。

三、明度对比

增加另一个属性，渐变游戏增加了难度。亮度的属性表现为颜色的亮度和暗度，亮度引入了另一个性质：光。事实上，我们通常看到的颜色是因为光。但一般来说，我们只是把光归因于「发光」这个行列。事实上，由于光的折射，我们的视网膜接受光的波长，产生颜色。所以光的强度会影响颜色的性能。

亮度的对比是所有颜色属性中最容易被检测到的。我们可以简单地看到，我们的素描是用明暗来表达物体，黑、白、灰可以毫不费力地表达真正的光感。因此，在色彩搭配中，明暗对比是一个很好的色彩感染元素。

1. 表现立体感

即使亮度相同，我们的颜色亮度（从主观感受来看）也不同。例如，黄绿色和紫色具有相同的亮度，在明暗表现上，黄绿色明显更亮，更高。如果这两种颜色之间存在渐变关系，这种性能非常类似于左上角的光线渗透到这个平面中。如果紫色的亮度进一步降低，亮度的对比度会更强。此时，它非常适合表现出一定的立体感。

当然，我们的颜色不一定要有立体感才能生动。有些配色大师会刻意削弱立体感，尽量避免明暗对比。但作为初学者，一定要知道明暗对比，在适当的情况下使用。

特别是在同一颜色系统或相邻颜色系统的渐变中，亮度对比是增加三维表现力的一种方式。有时，平面涂层的方式看起来僵硬和单调，使用相同的颜色系统的渐变可以很好地解决这个问题。这两种颜色可以非常相似，即便如此，和平涂层也有所不同。有了光的感觉，我们应该随时注意光的方向，并在整个图片中保持全球光。所谓的全球光，换句话说，每个人都在同一光源的照射下。

例如，这里有两个圆，两个圆都是用紫色填充的 - 绿色渐变，此时紫色和绿色的亮度相同。这里需要注意的是，即使亮度相同，两种颜色在直观感觉上，亮度和暗度也有所不同，比如绿色会稍微亮一点。此时，打开渐变工具，在绿色末端的颜色，提高其亮度，然后你会发现右边的圆变成了一个球。

2. 从黑白灰开始

亮度渐变仍然是增加作品细腻程度的一种方法。我们和伟大的上帝之间的差距可能真的是明暗关系的一个小区别。别忘了，明度对比对整体效果的影响最大，但也是我们最容易忽略的。有时一旦有了颜色，我们的重点就是色调和色度。但事实上，所有的配色，比如我们的设计，总是从黑、白、灰开始，先配置亮度，然后根据亮度选择颜色。

通过对明度的把握，我认为我们对色彩的把握可以上升到一个新的水平，否则，我们很容易在一堆颜色中迷失方向。

四、色度对比

这里提到的色度，也被称为饱和度，有些书也被称为色度，以我们的日常语言是明亮的。色度对比度越强，特别是色轮上的互补色，当色度达到最大时，会产生最大的火花，产生最强的效果。

有时这种高色度的配色在动态设计中使用，看起来充满活力。然而，这种互补的颜色也会相互排斥，导致整个布局的混乱，所以我们应该非常小心地对待颜色。

空气透视 - 塑造空间感

最常见的色度对比是用来塑造空间感的。众所周知，色度越高，视觉上就会创造出一种「更近」的效果。

例如，我们可以在这里画一个梯形，它用梯形填充颜色。如果你使用单色，你一定感觉不到空间感。如果我们使用梯形，使相同的颜色，如紫色，在梯形上，从上到下做一个梯形，两端的颜色，在颜色上有差距。此时，它可以反映出一种慢慢延伸到远处的感觉。它甚至可以有一种暴露在空气中并被空气削弱的视觉效果。这也被用于插图中，也被称为空气透视。

颜色浓度的强度对比，结合其他颜色属性，颜色匹配变得更加复杂。但一般来说，颜色匹配没有标准答案。因此，许多人依靠一种感觉来操作颜色匹配。事实上，感觉确实是最直接的颜色选择方法之一，但它不是唯一的方法。如果你对颜色有更深入的了解，你会逐渐理解感觉层面下更有趣的事情。这也是经验的积累。

饱和度这一环，PS 如果你觉得不太可靠，就像我之前提到的，你可以进去 AI 里，利用 AI 混合工具产生不同的色阶。例如，我们在这里使用高饱和度的红色和低饱和度的蓝色。应该说，两端的颜色既有饱和度的对比，也有色调和亮度的对比，以及色温的对比。应该说，对比度非常丰富。因此，我个人觉得这个矩形不太适合背景颜色。如果它有一些特殊的效果，它仍然很好，比如在设计字体时制作笔画形状或装饰线条。

我们应该提到的最后一件事是透明度的比较。虽然透明度不是标准的颜色属性之一，但在我们的软件操作中，透明度是相当实用的。渐变颜色，我们可以改变其中一种颜色的透明度，如减少到0，然后一端的颜色消失，这是最有可能产生浓雾的效果。

这个插图是在设计自己的个人网站时制作的，其中这些背景中的一些立方体块使用某一端来降低透明度。云中有一种感觉。

推荐两个渐变配色网站

1. Grabient

网站链接：https://www.grabient.com/

这个网站的工具很好用。当我在群里推荐的时候，有人问我这个和 PS 渐变工具有什么区别。我刚才告诉过你，PS中的颜色设置与我们的颜色理论不太一致，但这个渐变工具完全符合我们对颜色属性的理解。所以你可以在这里调试，然后确定渐变值，最后把它放进去 PS 里用。

2. WebGradients

网站链接：https://webgradients.com/

我相信你应该熟悉这个网站。很多地方都推荐过。这种渐变颜色可以作为背景颜色使用。你可以看到上面大部分的渐变亮度都比较高，比较浅。过渡也很精致。这可以作为你自己配色的参考。

除了这两个工具，还有很多其他好用的工具我就不一一演示了。这是两个我用的比较多，觉得挺实用的网站。

写在最后

事实上，色彩和音乐的感觉是最接近的。每种颜色对应于每种音调，组合后可以表现出一定的情感。通常你很难说哪种音乐是最好的，因为每个人都喜欢不同的音乐风格。但总有一些歌曲广为流传，成为经典。

因此，要学会渐变，首先要了解颜色。我们不能通过一篇文章来完成学习。我们当然希望以这篇文章为灵感，我们能找到自己的学习方向。

「让我们来看看这些渐变的技巧，好的文本」

渐变插画技巧｜“超级实用！多色渐变插图核心技能总结”渐变配色网站｜“有了这两个网站，配色新手可以轻松做出漂亮的渐变！”渐变网页设计｜“设计直播专题！Dribbble 上爆火的渐变网页设计是如何诞生的？"

================推荐明星栏目================

优秀教程网: UiiiUiii.com 它是一个优质的中文教程网站，共享了大量的PS、AE、AI、C4D和其他中文教程也为零基础设计爱好者准备了亲密的知识树专栏。打开免费自学的新篇章，根据我们的专栏一步一步地学习，你可以快速开始并产生酷的视觉效果。

设计导航：中国最受欢迎的设计网站导航，设计师必须： http://hao.uisdc.com