用CSS写出更炫丽的渐变

这是一个CSS线性渐变，从纯黄色到纯蓝色： \

注意到它在中间部分的颜色变的很脏了吗？
这就是埃里克·肯尼迪（Erik Kennedy）创造的"灰色死区"。除非您在为渐变选择颜色时非常小心，否则CSS渐变中经常会出现不饱和的中段。
然而，事实证明，我们绝对可以避免灰色死区。在这篇博客文章中，我们将了解为什么会发生这种情况，以及我们如何使用色彩理论来创建丰富，生动，彻底的渐变。
如何计算梯度
你有没有想过CSS算法是如何工作的？它实际上如何计算光谱上每个像素的特定颜色值？linear-gradient
它通过获取3个颜色通道中每个通道的数学平均值来计算它：红色，绿色和蓝色。
单击并拖动以查看沿途每个像素的特定 RGB 细分：

如何使用： 单击并拖动以重新定位指示器，或聚焦指示器并使用向左/向右箭头键。
在 RGB 色彩空间中，我们通过混合三个通道来创建颜色：红色、绿色和蓝色。每个通道的范围从 0 到 255。
如果我们把所有三个通道都最大化 - 255 / 255 / 255 - 我们得到纯白色。如果我们把每个通道设置为0，我们会得到黑色，没有任何颜色。
实际上，如果将所有 3 个通道都设置为相同的值，则结果将始终为灰度颜色：

在上面的演示中，我们从纯黄色（255/255/0）开始。当我们穿过渐变时，我们开始在蓝色（0/0/255）中混合。当我们到达最中心时，我们已经混合了一半的黄色，混合了一半的蓝色。
换句话说，所有三个通道都收敛于其中间值 127.5。结果颜色是灰色。
对我来说有点奇怪的是，蓝色和黄色之间的中点是灰色的。通过将两种高饱和度的颜色混合在一起，我们最终得到一种完全不饱和的颜色。如果有一种方法可以只混合颜料，并在整个过程中保持饱和度一致，会怎么样？
链接到此标题其他颜色模式
有很多不同的方式来表示颜色。到目前为止，我们一直在使用R / G / B模式。而且，老实说，这种颜色模式有点糟糕。
让我们来谈谈一种不同的颜色模式： HSL。
HSL 代表 色相/饱和度/亮度。如果您曾经使用过颜色选取器，则可能使用此颜色模式。*
下面是一个实时示例：

以下是每个值所表示的内容：

• 色相控制颜料将是什么，颜色落在色轮上的位置。
• 饱和度控制颜色的鲜艳程度。
• 亮度控制颜色的亮度或深色程度。

就个人而言，我发现这是一种更直观的思考颜色的方式。
这是一件非常神奇的事情： 如果我们不是平均梯度中的RGB值，而是平均HSL值，该怎么办？
好吧，让我们试试看：
\

不再有灰色死区，因为我们不再混合 R/G/B 值，而是混合 H/S/L 值。
起始颜色和结束颜色具有相同的饱和度和亮度，因此唯一变化的值是色调。因此，我们有效地走过了色轮。
这是另一个例子，这次混合了具有不同饱和度和亮度的颜色：

有很大的不同，对吧？
现在，HSL不一定是在任何情况下使用的最佳颜色模式。它倾向于产生可能过于明亮和生动的渐变，因为它没有考虑到人类的感知。
根据HSL颜色模式，这两种颜色具有相同的"亮度"：

不是每个人都以同样的方式看待颜色，但大多数人会说黄色感觉比蓝色轻得多，尽管它们具有相同的"轻盈"值。不过，HSL并不关心人类如何感知颜色。它是根据原始物理，能量和波长等建模的。
幸运的是，还有其他颜色模式确实考虑了人类的感知。例如，HCL类似于HSL，但以人类视觉为模型：

哪种颜色模式最好？ 好吧，这真的取决于你想要什么效果！我喜欢尝试许多不同的颜色模式，以找到特定渐变的最佳颜色模式。
应用这些知识
我有一些好消息和一些坏消息。让我们从坏消息开始。
CSS没有给我们任何方法来改变渐变计算中使用的颜色模式。我们不能"选择加入"对给定的梯度使用HSL插值，至少现在还没有。CSS图像级别4确实提供了一种指定"颜色插值方法"的方法，但据我所知，它在浏览器中并不广泛支持。
不过，好消息是：如果我们有点鬼鬼祟祟，我们可以绕过这个限制。
CSS中的渐变不必只坚持两种颜色。我们可以传递3种颜色或10种颜色或100种颜色。
首先，我们需要手动计算一堆中间颜色。我们将使用JavaScript来执行此操作，以便我们可以使用我们想要的任何颜色模式（使用有用的库，如chroma.js）：

接下来，我们将采用该颜色集合，并将每个值传递给 CSS 渐变函数：
.box { background-image: linear-gradient( to right, #ffff00, #f8ea47, #f0d465, #f0d465, #e7bf7c, #ddaa8f, #d095a1, #c280b2, #b26cc2, #9d56d2, #8440e1, #6028f0, #0000ff ) } 复制代码
（我们在这里使用线性渐变，但同样的技巧也适用于径向和圆锥渐变！
但是等等，CSS引擎不会仍然使用RGB插值来计算每个提供的颜色之间的间距吗？ 除非我们传递数百种颜色，足以满足每个像素的需求，否则我们仍然依赖于RGB插值！
这是真的，但幸运的是这没什么大不了的。
当两种颜色彼此非常相似时，我们使用哪种颜色模式并不重要。你最终会得到大致相同的渐变。无论你如何定义"平均"，我们都不会得到一个截然不同的"平均"值。
例如，下面是一个使用两种非常相似的颜色的渐变：

颜色是如此相似，以至于RGB插值真的没有办法搞砸它。
那么：我们的鬼鬼祟祟的技巧是使用自定义颜色模式生成一堆中点颜色，并将它们全部传递给我们的CSS渐变函数。CSS引擎将使用RGB插值，但不会影响最终结果（至少，还不足以让人类感知）。
好了，现在是有趣的部分。让我们来谈谈如何生成这些渐变。
介绍"渐变生成器”
我创建了一个工具，可以帮助您生成可以在CSS中使用的丰富，美丽的渐变。

我对这个工具感到非常兴奋。它使用了我们在这篇博客文章中讨论的所有内容，以及其他一些漂亮的技巧（例如使用缓动曲线来控制颜色的分布）。
调整控件，直到你喜欢结果，然后复制底部的 CSS 代码段。目前，该工具仅生成线性渐变，但您可以复制/粘贴CSS颜色集，并在径向和圆锥渐变中使用它们！

我建了一个前端小白交流群，私信我，进入交流群。我会给大家分享我收集整理的各种学习资料，组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习，欢迎加入

作者：非优秀程序员
链接：用CSS写出更炫丽的渐变
来源：稀土掘金