logo标签列表

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

csslinear-gradients
25

使用linear-gradient在CSS中创建彩虹很容易。

#grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
}
<div id="grad1"></div>

然而看看这个！这个渐变色美学上太可怕了。它是条纹状的，端点处有丑陋的色条，循环不够流畅，也不平滑，颜色之间存在明显的对比，而不应该无缝地融合。

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

我想找到完美的渐变色。一种以顺滑、平滑的方式包含彩虹，不留下任何明显的颠簸或视觉撕裂的渐变色。与其成为尖锐的混乱，这个渐变色是一个平滑曲线。

这样的渐变色存在吗？

1
你有没有一个你认为是“完美”的彩虹渐变的图像？ - Temani Afif
7个回答
40

你需要选择颜色，使它们能够很好地融合在一起，并增加更多的颜色层次。

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%
    );
}
<div class="rainbow-box"></div>

CSS gradient with a number of color steps, by each 10%

Screenshot of CSS rainbow gradient after rendering in the browser

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

7
在不久的将来，您可以像下面这样轻松操作，感谢新颜色插值。我们告诉浏览器在色相颜色空间中在红色和红色之间选择较长的路径。 

#grad1 {
  height: 200px;
  background: linear-gradient(in hsl longer hue 45deg, red 0 0);
}
<div id="grad1"></div>

rainbow gradient using CSS

当浏览器最终支持它时，看看它会是什么样子会很有趣。（已在 Firefox Nightly 113.0a1 上测试） - snazzybouche
1
@snazzybouche，你可以考虑启用 Dev 标志的最新 Chrome 版本。我也添加了一张截图。 - Temani Afif
请注意，此功能现在在Chrome v111和Safari 16.2中可用（但不适用于FF）：https://caniuse.com/mdn-css_types_image_gradient_linear-gradient_hue_interpolation_method - undefined
7

彩虹 或者 色彩轮 通常被称为色相。
CSS中有hsl()函数，其中H代表色相，S代表饱和度，L代表亮度。
要创建渐变，只需将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>

4
你可以通过叠加单独的红色，绿色和蓝色来得到外观更好的效果，并尝试匹配人类颜色锥敏感度。
这里有一个例子，但是通过调整线性渐变中的一些％数值和拥有更平滑的渐变形状（目前为带有截断顶部的三角形）可以改进它。 Rainbow with RGB components. 
<!DOCTYPE html>
<html>
<head>
    <title>Rainbow</title>
    <meta charset="UTF-8" />
    <style>
        * { box-sizing: border-box; }

        .separate   { width: 100%; height: 10em; }
        .separate>* { width: 100%; height: 100%; margin-top: 1em; }

        .overlay   { width: 100%; height: 10em; filter: brightness(3); }
        .overlay>* { width: 100%; height: 100%; position: absolute; }
        .overlay>:nth-of-type(1) { opacity: 1; }
        .overlay>:nth-of-type(2) { opacity: .5; }
        .overlay>:nth-of-type(3) { opacity: .33; }
        .overlay>:nth-of-type(4) { opacity: .25; }

        .blue   { background: linear-gradient(
           90deg,                 rgb(0,0,256)  0%, rgb(0,0,256) 5%,  rgb(0,0,0) 20% ); }
        .green  { background: linear-gradient(
           90deg, rgb(0,0,0) 0%,  rgb(0,256,0) 25%, rgb(0,256,0) 35%, rgb(0,0,0) 55% ); }
        .red    { background: linear-gradient(
           90deg, rgb(0,0,0) 15%, rgb(256,0,0) 35%, rgb(256,0,0) 45%, rgb(0,0,0) 100% ); }
        .blue2  { background: linear-gradient(
           90deg, rgb(0,0,0) 65%, rgb(0,0,256) 95%, rgb(0,0,256) 100% ); }
    </style>
</head>
<body>
<h1>Rainbow</h1>
    <div class="overlay">
        <div class="blue"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="blue2"></div>
    </div>
    <div class="separate">
        <div class="blue"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="blue2"></div>
    </div>
</body>
</html>
2
我不是CSS程序员，但在MS Word / Excel / PowerPoint中使用线性渐变填充时，我喜欢只使用以下4种RGB颜色来创建彩虹： (255,0,0) ; (255,255,0) ; (0,192,255) ; (192,0,255)。 这对我来说看起来非常好，而且付出的努力很少！{请见图片>>}

enter image description here

enter image description here enter image description here

另一种彩虹的变化是“海上日落”。（它将成为网页的很好背景）。从彩虹开始，用以下深蓝色替换最后一个（紫色）颜色：（60,70,200）。然后将黄色滑块移到靠近浅蓝色的位置（我的在60％和61％）。就这样！{查看图片>>}

enter image description here

我用 CSS 成功做到了！ :-) >> 

.Rainbow-4Color-Mix 
{  width:200px; height:350px;
   background: linear-gradient(180deg,
   rgba(255, 0, 0, 1) 0%,
   rgba(255, 255, 0, 1) 33%,
   rgba(0, 192, 255, 1) 66%,
   rgba(192, 0, 255, 1) 100%);
}

.Gap {width:200px; height:50px; background-color:white;}

.Ocean-Sunset 
{  width:200px; height:350px;
   background: linear-gradient(180deg,
   rgba(255, 0, 0, 1) 0%,
   rgba(255, 255, 0, 1) 60%,
   rgba(0, 192, 255, 1) 61%,
   rgba(60, 70, 200, 1) 100%);
}
<div class="Rainbow-4Color-Mix"></div>
<div class="Gap"></div>
<div class="Ocean-Sunset"></div>

1
为了补充Roko的出色回答，你可以调整每种颜色的亮度，以实现接近等感知亮度的效果，具体操作如下（不用在意JavaScript代码，那只是用来循环--lightness CSS变量的）： 

let hue = document.getElementById("hue");
let btn = document.getElementById("btn");
let fade;

setTimeout(() => {
  btn.style.visibility = "visible";
  setFade();
},4000);

btn.addEventListener("click",() => {
  if (fade) {
    clearInterval(fade);
    fade = false;
    hue.style.setProperty('--lightness','50%');
    btn.innerHTML = "Start";
  } else {
    btn.innerHTML = "Stop";
    setFade();
  }
});

function setFade() {
  let i=31;
  fade = setInterval(() => {
    hue.style.setProperty('--lightness', `${(Math.sin(i/80)/3+0.667)*63}%`);
    i++;
  },50);
}
#hue {
  height: 40px;
  
  --lightness: 50%;
  
  background: linear-gradient(90deg,  
    hsl(0, 100%, calc(var(--lightness) * 1.26)),
    hsl(30, 100%, calc(var(--lightness) * .96)),
    hsl(60, 100%, calc(var(--lightness) * .74)),
    hsl(90, 100%, calc(var(--lightness) * .68)),
    hsl(120, 100%, calc(var(--lightness) * .70)),
    hsl(150, 100%, calc(var(--lightness) * .70)),
    hsl(180, 100%, calc(var(--lightness) * .66)),
    hsl(210, 100%, calc(var(--lightness) * 1.20)),
    hsl(240, 100%, calc(var(--lightness) * 1.38)),
    hsl(270, 100%, calc(var(--lightness) * 1.26)),
    hsl(300, 100%, calc(var(--lightness) * 0.86)),
    hsl(330, 100%, calc(var(--lightness) * 1.18)),
    hsl(360, 100%, calc(var(--lightness) * 1.26))
  );

}

#btn {
  margin-top: 1em;
  visibility: hidden;
}
<div id="hue"></div>
<button id="btn">Stop</button>

根据个人喜好调整数值。我还尝试了24个停止位，并微调了一些色调和饱和度数值。我猜效果会更加顺滑一些。 

#hue {
  height: 40px;
  
  --lightness: 50%;
  
  background: linear-gradient(90deg,  
    hsl(0, 100%, calc(var(--lightness) * 1.30)),
    hsl(15, 100%, calc(var(--lightness) * 1.10)),
    hsl(35, 100%, calc(var(--lightness) * 1.02)),
    hsl(48, 100%, calc(var(--lightness) * 0.90)),
    hsl(60, 100%, calc(var(--lightness) * .76)),
    hsl(72, 100%, calc(var(--lightness) * .71)),
    hsl(90, 100%, calc(var(--lightness) * .70)),
    hsl(105, 100%, calc(var(--lightness) * .70)),
    hsl(120, 100%, calc(var(--lightness) * .695)),
    hsl(135, 100%, calc(var(--lightness) * .70)),
    hsl(150, 100%, calc(var(--lightness) * .70)),
    hsl(165, 100%, calc(var(--lightness) * .69)),
    hsl(180, 100%, calc(var(--lightness) * .65)),
    hsl(195, 80%, calc(var(--lightness) * .85)),
    hsl(215, 75%, calc(var(--lightness) * 1.25)),
    hsl(225, 100%, calc(var(--lightness) * 1.40)),
    hsl(240, 100%, calc(var(--lightness) * 1.48)),
    hsl(255, 100%, calc(var(--lightness) * 1.44)),
    hsl(270, 100%, calc(var(--lightness) * 1.35)),
    hsl(285, 100%, calc(var(--lightness) * 1.15)),
    hsl(300, 90%, calc(var(--lightness) * .89)),
    hsl(315, 80%, calc(var(--lightness) * .98)),
    hsl(330, 90%, calc(var(--lightness) * 1.12)),
    hsl(345, 95%, calc(var(--lightness) * 1.21)),
    hsl(360, 100%, calc(var(--lightness) * 1.30))
  );

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

-1

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

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

编辑：通过在末尾添加红色，可以将紫色重新加入。

#grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, yellow, blue, red);
}
<div id="grad1"></div>

4
我看不见绿色和紫色。 - Temani Afif
1
...以及青色、粉色等。 - Roko C. Buljan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接