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

Question

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

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

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

但是看看吧！这种渐变在美学上是可怕的。它是条纹状的，端点相交处有难看的纯色条带，循环不太好，不光滑，当它们应该无缝融合时，颜色彼此形成鲜明对比。

简而言之：这是一个可怕的梯度。

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

这个梯度存在吗？

Answer 1

借助新的颜色插值，您可以像下面这样轻松地完成此操作。我们告诉浏览器在色调颜色空间中采取红色和红色之间的较长路线。

#grad1 {
  height: 200px;
  background: linear-gradient(in hsl longer hue 45deg, red 0 0);
}

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

Answer 2

您需要选择能够很好地融合在一起的颜色和更多的颜色步骤。

background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

.rainbow-box {
    width: 80vw;
    height: 200px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

我使用 CSS 渐变生成器制作了它：https : //cssgradient.io/

Answer 3

“彩虹”或“色轮”通常称为色调。
CSS有这个hsl()功能（代表色相（Hue）、饱和度（Saturation）、亮度（Lightness））。
要创建渐变，只需将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>

Answer 4

只是一个想法：您可以只指定红色、黄色和蓝色，而不是明确指定彩虹中的所有颜色。然后颜色应该自然地混合。

另一个想法：如果您不喜欢这些特定的黄色、红色和蓝色色调，您可以尝试使用 RGB 值进行自定义。基本思想是相同的，尽管只使用彩虹中的三种基色。

编辑：您可以通过在末尾添加红色来添加紫色。

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

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