图片中经常可以使用到渐变色,两个颜色形成自然过渡效果,在实际体验中可以发现,有时候渐变色看起来很舒服,有时候看起来比较别扭,下面分析一下其中原因。

下图是两个颜色组成的渐变效果,它们两端的颜色都一样,但是效果相差很多:
2022-07-06T03:24:36.png

明显左边的看起来更加舒服,右边的比较生硬。

我们知道每个颜色都是 RGB 的组合,通常 RGB 各自有 256 种变化范围,它们之间的组合产生了各种颜色:
2022-07-06T03:45:23.png

在 Photoshop 中选取一种颜色的方法有四种:RGB,HSB,LAB,CMYK。最常用的就是 RGB 和 HSB,下面主要围绕这两种方法介绍。

不同于 RGB,HSB 或 HSV 拾取一种颜色是通过 H色相,S饱和度,B亮度确定的:
2022-07-06T03:30:35.png

当我们需要创建两个颜色的渐变图时,如果使用 RGB 模式,则它们的渐变过程是直接从两个颜色之间直线过渡。而使用 HSB 模式,它们的渐变过程是围绕 H色相环过渡到目标颜色:
2022-07-06T03:45:52.png

所以 RGB 模式就会穿过中间的灰色地带,效果就是过渡中颜色变淡变暗,这也就是看起开不舒服的原因。而 HSB 模式下饱和度和亮度都保持不变,只是色相发生变化,从而整体色彩持续保持鲜艳,呈现的效果就是看起来舒服。

Photoshop 中创建渐变时,提供了 3 种模式可供选择,还原了 RGB 模式 和 HSB 模式的规则,分别是:perceptual,linear,classic:
2022-07-06T03:36:45.png

各种模式区别为:

  • linear 最接近 HSB 模式,保证了过渡时候的饱和度和亮度,反映出颜色最鲜艳
  • perceptual 在过渡中保证亮度稳定,但是降低了饱和度
  • classic 在过渡中保证了饱和度稳定,但是降低了亮度

三者对比图如下:
2022-07-06T03:43:30.png

实际使用中根据需要选择合适效果。

参考链接:
https://twitter.com/finmoorhouse/status/1543580508508065794