如今用到渐变色的设计作品越来越多。用好渐变色,能够给设计作品带来精致感。
![ba71ec1da593e6034b1947f897deaa74.png](https://i-blog.csdnimg.cn/blog_migrate/3fb5b8210efae7f8a83373a774bc2005.jpeg)
但是渐变也是一把双刃剑,渐变色用的不好,就是一场灾难。
在刚开始尝试做渐变的时候,我们往往会做出辣眼睛色彩来,就像这样。
![b259a500d1ceac551e852a322a8721b2.png](https://i-blog.csdnimg.cn/blog_migrate/55f2c919a980822e52474c8a0082a8b1.jpeg)
如何提升颜色搭配的感觉呢?难道只有用吸管吸取别人已经做好的成果这一个途径吗?
光是用吸管,可能存在误差,特别是当吸取对象是半透明的时候,并且拿来主义对于自己提升往往没有太大帮助。
本文就来深入地扒一扒渐变的原则和渐变的技法,用数字来剖析颜色构成并辅助渐变设计。
01 渐变是自然,纯色是人工
渐变是自然界当中最真实的颜色。
我们身边的颜色往往并不是单纯的,纯色多存在于工业产品中。墙是纯色的,衣服是纯色的,电子设备是纯色的。
但出门看看,光影给世界带来很多的变化,天空,海洋,大地其实都是渐变的颜色。
![5e61a8070f7f347ad2179feed829880a.png](https://i-blog.csdnimg.cn/blog_migrate/36ac6324a45f9b3a591cc928f5a21e15.jpeg)
如果渐变是光影的呈现,应当符合一些自然的规律。光从哪边来,渐变的颜色就在哪边亮一些,在另一边暗一些,看着才舒服。
举个例子,下面这页PPT中,手机的阴影在右下角,因此背景的渐变色是从左上到右下,颜色由浅到深。
![40b431f8404e8667521b2043aafd90cf.png](https://i-blog.csdnimg.cn/blog_migrate/ea108291110f338e4065da9b1648fc50.jpeg)
如果将渐变反过来,会比较奇怪。
![be187eba63e0e74624e1e578394ab200.png](https://i-blog.csdnimg.cn/blog_migrate/5652085ed0b917153ddd6e3da67ed91b.jpeg)
02 利用RGB数值做渐变
什么是RGB?指的是通过对红(Red)、绿(Green)、蓝(Blue)三种颜色的相互叠加,得到各种颜色。
几乎所有的电子设备都是采用了这一个色彩模式来完成显示。一组灯或者两组灯就是一个像素,通过灯亮度的调节,显示出了所有的颜色。
![3b4c642b7e775a84d13642900aa5be27.png](https://i-blog.csdnimg.cn/blog_migrate/41cc05c35c3b76652bc7ef92b3225ee4.jpeg)
RGB是一种比较难主观去判断混合结果的颜色模式,我们很难说30%的红色,加45%的绿色,再加上53%的蓝色,最后混出来是一个什么样的颜色。
但如果混合是有限制的,我们可以提前判断RGB的混合结果。
这里还需要补充介绍一个概念,就是光色色轮。
![095c33d3198f39b0bddfdeb25ea731ad.png](https://i-blog.csdnimg.cn/blog_migrate/8eb8ddac6ed93609e2f21bb878fec47f.jpeg)
当两道有色光混合时,得到的颜色就是这两个颜色在色轮上的间隔的中间值。
举个例子,下图中,两个球的颜色是一样的,都是正红色。
![70e0645082bca202434779daf8e3cd8c.png](https://i-blog.csdnimg.cn/blog_migrate/7d017bdd2d21bdcf4d28f35b02e32974.jpeg)
我给图片的右边覆盖上绿色的密集圆点,红色的球本身并没有任何变动,但覆盖圆点这个操作相当于在红色中加入绿色的小灯泡,大脑接受信息,自动混合得到红色和绿色在色轮上的间隔色——橙色。
![8308c342afe12fd1c355acfe66881cf2.png](https://i-blog.csdnimg.cn/blog_migrate/3f867275dcda419ba2f07a22948eac29.jpeg)
我以动图演示一下。
![b2d0b9a0bd3fe5a7789cba96b84f0848.gif](https://i-blog.csdnimg.cn/blog_migrate/d389fb7d46c6d07b45712b8a9de90e89.gif)
在光色混合原理下,通过控制RGB数值,我们能够控制渐变的趋势。
首先,我们可以控制单一变量。在PPT当中用0~255的整数来表现红、绿、蓝三种颜色的亮度。
当R、G、B分别为0、0、0的时候,得到黑色。当R、G、B分别为255、255、255的时候,得到白色。如果R、G、B三个数值在(0,255)区间内相等,我们得到的就是灰色。
![c157e80b00d2724fd0c57dc39d57855c.png](https://i-blog.csdnimg.cn/blog_migrate/c3e2a707f686e29c137ec59ae0e5e420.jpeg)
在灰色的基础上,如果我们将某一个数值增加,就能判断结果将偏向增加数值对应颜色。
举个例子,R、G、B分别为190、190、190,我们得到灰色,将数值调整为200、190、190,颜色将偏红。
![f471641bad393b23cacd0e58388f02c1.png](https://i-blog.csdnimg.cn/blog_migrate/8be2c87315d1f76d871d2a867009c5e3.jpeg)
将数值调整为190、190、200,颜色将偏蓝。
![f682db10632e67f943fe11f97f940c55.png](https://i-blog.csdnimg.cn/blog_migrate/323aa16c0b400614cd1fa4a614bab213.jpeg)
利用这个结论做渐变,会准确而有趣。举个例子,我们来看看这一张产品图。
![21e2076f11776b818a6198d3334b504d.png](https://i-blog.csdnimg.cn/blog_migrate/2125a7ee781a01e4bdec88ce2c7abf96.jpeg)
产品本身的颜色的颜色有点绿,那我在渐变中,就希望环境也偏向这个颜色。
第一步,选中渐变光圈的滑块,设置第一个滑块为白色。
![9c4e1901003066a9796d3755f49ca57c.png](https://i-blog.csdnimg.cn/blog_migrate/13d86fc9e4e37f6a2e022bfaa39c353c.jpeg)
第二步,选中第二个滑块,单击油漆桶,选择其它颜色。
![49fe65efdc80ab03deb4c8eee1503984.png](https://i-blog.csdnimg.cn/blog_migrate/37f5ee55d872d19cd1669664134ae066.jpeg)
第三步,单击自定义,将R、G、B的数字调整为190、200、190。
![6786ecf7ea745c6f0560044517306df8.png](https://i-blog.csdnimg.cn/blog_migrate/57d5d4680bf2e60d39206317882ed821.jpeg)
我在设置的时候通过数字就能就知道,这个渐变是从白色到灰绿的渐变。
![f41039f93f6647d019ddb642bad57065.png](https://i-blog.csdnimg.cn/blog_migrate/b203a6315e84d318a4a4f2ebf61a641c.jpeg)
反之,通过减少某一个数值,得到的结果将偏向增加数值对应颜色的补色。
具体地讲,减少红色相当于增加青色、减少蓝色相当于增加黄色、减少绿色相当于增加紫色。
![db7267f1655bd99b49388db5e7658fb5.png](https://i-blog.csdnimg.cn/blog_migrate/a815b689b4ce5f1a7262831fb9fc8f4d.jpeg)
举个例子,下面这张PPT,产品是偏向青色的。
![f25f59e7dcaa0be8af0e76e05d50f82c.png](https://i-blog.csdnimg.cn/blog_migrate/72c9a213148d7b772589502e03e48548.jpeg)
我希望渐变也营造一种偏青的环境,那就可以设置第一个滑块是白色,第二个滑块在R、G、B都为230的基础上,大幅度减少红色的数值,相当于增加红色的补色青色。
![fa1a139ffbc555f64700d9633efb4d09.png](https://i-blog.csdnimg.cn/blog_migrate/751a366788de7025ada58765df864b98.jpeg)
通过数值,我们可以得到精确的渐变。
![c10499e096b3562a2a27c0f45f4ad806.png](https://i-blog.csdnimg.cn/blog_migrate/c4fe1a2ba0e434b7f75d67b490d149c6.jpeg)
以上是针对单一变量的控制,我们还可以对两个变量进行控制、比如说我想得到一个偏橙色的渐变,那么我就可以在RGB数值相等的情况下,去增加红色,然后再配以一点点绿色,那么我就得到了偏向橙色的结果。
03 科学地利用HSL做渐变
什么是HSL?
![5ac8d0703d9a121c4b73b10590cbffcc.png](https://i-blog.csdnimg.cn/blog_migrate/a6ce6c019c269cd233dac59faee89f5f.jpeg)
我曾经举过一个例子,是关于一顶帽子。
H代表色相,指色彩可呈现出来的质的面貌。有人说,这帽子颜色很独特,其实在说色相。
![72dc4d3c0d1c768b8e1fc6325b74e850.png](https://i-blog.csdnimg.cn/blog_migrate/f883f592b0ee736a753eae753bb051ff.jpeg)
色相即各类色彩的相貌称谓,你能叫出来的名字,就是色相 ,红色、绿色、黄色等等。
S代表饱和度,也叫纯度。它表示颜色中所含有色成分的比例。含有色彩成分的比例愈大,则色彩的纯度愈高,含有色成分的比例愈小,则色彩的纯度也愈低。有人说,这帽子颜色有点深沉,其实在说饱和度。
![445bb65131b3f144323de1efa3e1bb9a.png](https://i-blog.csdnimg.cn/blog_migrate/d41e133b596286d54e46783852e8cb0c.jpeg)
L代表明度,表示色所具有的亮度和暗度。有人说,这帽子有点亮眼,其实在说明度。
![4fa6c4394b812f34c5dca3ba8c294929.png](https://i-blog.csdnimg.cn/blog_migrate/fc773d190aab2f2a80bd7e21b0f68184.jpeg)
我们之前讲到颜色的渐变中,最好有一定的联系,而不是天马行空乱配。乱点鸳鸯谱容易出问题,两个颜色最好有一定的共同语言。
HSL就是这样的一个共同语言,在色相、明度和饱和度当中,我们固定两个要素不动,然后只去修改其中的一个要素,这样得到的渐变就会看起来过渡自然。
举个例子,我固定明度和饱和度,然后去修改色相。
第一个颜色的色相设置为140。
![128c562af396ade5702382cdcc2bfff1.png](https://i-blog.csdnimg.cn/blog_migrate/54465bd8cd7a20cff13f14f691f9a34e.jpeg)
第二个颜色的色相设置为100。
![719b6760cd0d30d99e8174691e3a91a7.png](https://i-blog.csdnimg.cn/blog_migrate/62ceb88fb8f74efde97324247a46419e.jpeg)
得到的就是一个不错的渐变。
![5f7748a084c37eda930b6b7304a5608b.png](https://i-blog.csdnimg.cn/blog_migrate/43295b1816c26d23c8a68a14a2601d36.jpeg)
这样的渐变既可以做背景,也可以做透明修饰。
![b3a45f639c0073a6d6ccc10f4d36b4b9.png](https://i-blog.csdnimg.cn/blog_migrate/54dea43dd23a91da2dd620da1950bcf9.jpeg)
![8a6a3d4df993062db2a44b14dc83e9e1.png](https://i-blog.csdnimg.cn/blog_migrate/51e2ef0e05980068ebdceaba40d7eb5f.jpeg)
遵从这个规律,我做出了一组色相的渐变。
![26d5f3af6d9b6a1fb4d854ca8615ed81.png](https://i-blog.csdnimg.cn/blog_migrate/5ad13d860e4ba36d3cf58328ad89d709.jpeg)
除了色相的变化之外,还可以尝试其它单个参数的渐变,举个例子,固定色相和饱和度,然后来修改明度。
![d344b2ae05a56ea6970af55db10c07a5.png](https://i-blog.csdnimg.cn/blog_migrate/878ff39d8ebece67af688372bf2b54cd.jpeg)
![7ed7831a40acc040127f2e45c991a574.png](https://i-blog.csdnimg.cn/blog_migrate/8d3b895c913d256f5451cf3ff1089d9f.jpeg)
例如,上面两页PPT,我将明度压低一些。就得到的是同个色相明暗的渐变,这种渐变在背景当中非常常见。因为它本身看起来是浑然一体的。
![4868ad8ebd8b552f1145b542636b6a13.png](https://i-blog.csdnimg.cn/blog_migrate/38f78b1fc8fd38a83296a55dabcb341e.jpeg)
![84b697fcd3ff665a7ca1ff08b3dc7ecd.png](https://i-blog.csdnimg.cn/blog_migrate/d7da05388d13296bac9a99cac9986195.jpeg)
并不是说所有的渐变都应该固定其它参数,然后变化单一参数,也可以有拓展。例如我们可以在变化色相的基础上,再压暗偏冷色的颜色。
![0d3cdaad7c4bb0ff620b749debbd5e2c.png](https://i-blog.csdnimg.cn/blog_migrate/e8c33fa85d4e71e5cef69f9cac85b102.jpeg)
![ac2662af4ca20df3d45323155affc710.png](https://i-blog.csdnimg.cn/blog_migrate/5bf13cdf763265e29199898f8063d38b.jpeg)
我们注意上例中的第三个数值,左上角明显比右下角要暗很多。
04 总结一下
总结一下,渐变处处都存在,做渐变最好能够符合光影的规律,并且从数值上看,要有一定的联系。
我们可以利用RGB色彩模式,控制单一变量或者是控制两个变量来准确找到想要的渐变方向。
我们也可以利用HSL色彩模式来做出过渡自然的色相渐变,明度渐变和纯度渐变。
这篇文章不仅是想要介绍怎样去得到一个渐变的色块,更多的是想要通过分析我们描述色彩的方式,找到搭配的规律并为我所用。
以上就是本期的分享~
更多文章,可关注公众号:黑白间设计。我准备了一份见面礼等你。
![f98396e2fad862c3e6ed77ad0b1f8ad4.png](https://i-blog.csdnimg.cn/blog_migrate/c2df54c299d26171329c66602c4718e8.jpeg)