在 CSS 中创建完美的彩虹渐变

Question

使用线性渐变在 CSS 中创建彩虹很容易。

 #grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
}

 <div id="grad1"></div>

但是看看吧！这种渐变在美学上是 可怕 的。它是条纹的，端点相交的地方有难看的纯色条，循环不好，不平滑，当颜色应该无缝混合时，它们之间明显形成对比。

简而言之：这是一个可怕的渐变。

我想找到完美的渐变。一种以光滑、平滑的方式包围彩虹，一种不会留下任何明显的颠簸或视觉撕裂。这个渐变不是一团乱麻，而是一条平滑的曲线。

这个梯度存在吗？

原文由 snazzybouche 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

“彩虹” 或 “色轮” 通常被称为 色调。

CSS 有 hsl() 功能（代表 色相、饱和度、亮度）。

要创建渐变，只需将 360 色调度除以 12 种主要颜色（= 30 度步长）。

在色相上应用 30 度的增量：

 #hue {
  height: 40px;
  background: linear-gradient(90deg,
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

 <div id="hue"></div>

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 4.0 许可协议