为什么你的渐变色总是脏脏的?

01 为什么你的渐变不好看？

制作渐变色时，是不是经常觉得中间的过渡色看起来脏脏的。即使渐变两端的颜色都很亮，中间过渡色还是灰蒙蒙的。
这是因为电脑系统都是运用简单的RGB运算，容易使中间的渐变色变得混浊。

那怎么才能实现从A到B的渐变效果呢？可以从「颜色渐变理论」和「色彩空间」两点来看~

02 颜色渐变理论

当两个渐变的颜色越接近互补色时,颜色越容易看起来脏脏的,这种现象常被称为“视觉噪音”。例如左图两种颜色直线穿过的渐变区域，过渡色就是灰蒙蒙的。
那要怎么解决这个问题呢？

最简单的方法就是「走弯路」，不穿过会产生灰色的中间区域（如右图)，而是在两种渐变色中间新增一种颜色。另一种方式是使用LCH色彩空间。

03 四种色彩空间介绍

虽然新增一个中间渐变色是最简单粗暴的方法，但如果想让色彩渐变更具逻辑性，可以看看LCH色彩空间。
设计中常见的色彩空间有RGB、HEX、HSL和LCH。

RGB

RGB是基于加法混色原理的颜色模型，通过组合红(R)、绿(G)、蓝(B)三种基本色来生成各种颜色，各色共有256个值。这是基于系统语言来描述颜色，不符合人的视觉感知。

HEX

HEX使用十六进制数来定义颜色，基于RGB颜色模型，通过组合红、绿、蓝这三种三原色来生成各种颜色。HEX也是基于系统语言来描述颜色,不符合人的视觉感知。

HSL

HSL分 别代表Hue(色相),Saturation(饱 和度)，Lightness(明度)。明度L是相对于系统运算而言,而不是人的视觉。

LCH

LCH的主要目标是实现感知一致性，与人的视觉保持一致。LCH分别代表感知明度(Luminance)、饱和度(Chroma)和色相(Hue)。感知明度(Luminance)用于量化人眼对光的明度的感知。

色彩空间有这么多种类,为什么要使用LCH色彩？

主要是因为LCH颜色感知上人的视觉一致，不会出现明度不一致的情况。

04 使用LCH做渐变色

HSL模式:在明度50的情况下，颜色是最鲜艳的。这是因为没有混合黑色或白色,只有纯色。但从视觉上来看,黄色看起来要比蓝色亮得多。

LCH模式：同样在明度50的情况下，黄色和蓝色的亮度值相同，在视觉上来看亮度是一样的。所以做渐变色就不会有亮度不均的问题。
虽然使用其他色彩空间也能让渐变色的过渡区域变得亮一些,但中间过渡区的颜色明度不容易与两端的颜色保持一致,渐变效果依然没有想像中的那么好看自然。

使用LCH色彩空间能让眼睛感知到的渐变色亮度一致。
中间渐变区域的明暗过渡流畅自然，同时也保持了中间区域的色彩饱和度。(尤其在互补色渐变时这种渐变过渡效果更明显)