今天在网上看到一篇文章，说的是怎么才能用CSS创建一个更好的渐变色，原文地址：www.joshwcomeau.com/css/make-be…

1、解释下啥意思

这篇文章是个啥意思那？

就是说使用linear-gradient创建一个渐变的时候就比如：linear-gradient(to right, rgb(255, 255, 0), rgb(0, 0, 255));

在中间的混合处会有一块灰色，难看，不美观。

RGB颜色不是三种色彩混合吗，从黄(255, 255, 0)到蓝(0, 0, 255)，到中间的时候正好各自一半，就产生了(127.5,127.5,127.5)这附近的颜色，当三通道颜色一致时，就是一种灰度颜色

所谓灰度色,就是指纯白、纯黑以及两者中的一系列从黑到白的过渡色

就只要是两端是互补色，中间一定会产生灰色区域。

2、咋解决

除了RGB空间不是还有很多其他模式么，比如HSL，它是色相（Hue）、饱和度（Saturation）和亮度（Lightness）这三个属性的简称。

其中色相就是指颜色(0-360)：

咱就姑且让饱和度和亮度都一样，就只平均色相，还是黄色到蓝色：

这样不就没有灰色了嘛！！

3、这个思路不行

那咱就试一试：

可惜啊，不如咱们的意，它并不是这么计算的。

4、插值

有些人看文章喜欢看开头和结尾，比如我。

解决办法就是插值，写多个值：

background-image: linear-gradient( to right, #ffff00, #f8ea47, #f0d465, #f0d465, #e7bf7c, #ddaa8f, #d095a1, #c280b2, #b26cc2, #9d56d2, #8440e1, #6028f0, #0000ff);

文章最后，原作者给出了一个工具，很强大：

www.joshwcomeau.com/gradient-ge…