HTML 颜色代码：红到黄到绿

Question

我想提出尽可能多的十六进制 HTML 值，以获得从红色到绿色的平滑颜色渐变：

我希望它类似于以下内容： http://www.utexas.edu/learn/html/colors.html（死链接）

[编辑：用我记得的与原始链接相似的链接替换它] 现在去这里 (8/29/2024) https://www.unm.edu /~tbeach/IT145/color.html

我对颜色选择没有最好的眼光，所以我希望已经整理了一个标准图表，显示如何从红色顺利过渡到黄色到绿色。

在该网站上，“1 of 6”与我要寻找的最相似，但该示例仅限于 11 种颜色：

(1) FF0000 Red, 
(2) FF3300 Red(Orange)
(3) ff6600 
(4) ff9900 
(5) FFCC00 Gold 
(6) FFFF00 Yellow
(7) ccff00
(8) 99ff00
(9) 66ff00
(10) 33ff00
(11) 00FF00 Lime 

如果能够将颜色数量加倍，但又能让它们平滑过渡，那就太好了。

感谢您的任何见解和帮助。

Answer 1

根据您想要最终获得的颜色数量，解决方案只是不断将绿色值增加一定的量，然后当绿色达到最大（FF）时，将红色值重复减少相同的数量。

伪代码：

int red = 255; //i.e. FF
int green = 0;
int stepSize = ?//how many colors do you want?
while(green < 255)
{
    green += stepSize;
    if(green > 255) { green = 255; }
    output(red, green, 0); //assume output is function that takes RGB
}
while(red > 0)
{
    red -= stepSize;
    if(red < 0) { red = 0; }
    output(red, green, 0); //assume output is function that takes RGB
}

手动生成，您可以简单地增加 16，如下所示：

FF0000
FF1000
FF2000
FF3000
FF4000
FF5000
FF6000
FF7000
FF8000
FF9000
FFA000
FFB000
FFC000
FFD000
FFE000
FFF000
FFFF00 //max, step by 15
F0FF00 //cheat, start with a -15 to simplify the rest
E0FF00
D0FF00
C0FF00
B0FF00
A0FF00
90FF00
80FF00
70FF00
60FF00
50FF00
40FF00
30FF00
20FF00
10FF00

Answer 2

最好的方法是了解十六进制颜色代码的实际含义。一旦掌握了这一点，如何制作任意平滑度的渐变就会变得清晰。十六进制颜色代码是分别代表颜色的红色、绿色和蓝色分量的三元组。例如，在颜色 FF0000 中，红色分量为 FF，绿色分量为 00，蓝色分量为 00< /代码>。 FF0000 看起来是红色的，因为红色分量一直调到 FF，而绿色和蓝色分量一直调到 00。同样，纯绿色为 00FF00，纯蓝色为 0000FF。如果将十六进制数字转换为十进制，您将得到一个介于 0 和 255 之间的值。

那么现在如何制作从红色到黄色再到绿色的渐变过渡呢？简单的;您获取端点，决定中间需要多少步，然后均匀地逐步通过 3 个颜色通道中的每一个，从一种颜色过渡到下一种颜色。下面是一个以 11 十六进制（十进制的 17）为步长的示例：

FF0000 <-- red
FF1100
FF2200
FF3300
FF4400
FF5500
FF6600
FF7700
FF8800
FF9900
FFAA00
FFBB00
FFCC00
FFDD00
FFEE00
FFFF00 <-- yellow
EEFF00
DDFF00
CCFF00
BBFF00
AAFF00
99FF00
88FF00
77FF00
66FF00
55FF00
44FF00
33FF00
22FF00
11FF00
00FF00 <-- green

Answer 3

这是从绿色到红色的漂亮渐变

    /* Green - Yellow - Red */
    .gradient_0    {background: #57bb8a;}
    .gradient_5    {background: #63b682;}
    .gradient_10   {background: #73b87e;}
    .gradient_15   {background: #84bb7b;}
    .gradient_20   {background: #94bd77;}
    .gradient_25   {background: #a4c073;}
    .gradient_30   {background: #b0be6e;}
    .gradient_35   {background: #c4c56d;}
    .gradient_40   {background: #d4c86a;}
    .gradient_45   {background: #e2c965;}
    .gradient_50   {background: #f5ce62;}
    .gradient_55   {background: #f3c563;}
    .gradient_60   {background: #e9b861;}
    .gradient_65   {background: #e6ad61;}
    .gradient_70   {background: #ecac67;}
    .gradient_75   {background: #e9a268;}
    .gradient_80   {background: #e79a69;}
    .gradient_85   {background: #e5926b;}
    .gradient_90   {background: #e2886c;}
    .gradient_95   {background: #e0816d;}
    .gradient_100  {background: #dd776e;}

    /* Red - Yellow - Green */
    .anti-gradient_100  {background: #57bb8a;}
    .anti-gradient_95   {background: #63b682;}
    .anti-gradient_90   {background: #73b87e;}
    .anti-gradient_85   {background: #84bb7b;}
    .anti-gradient_80   {background: #94bd77;}
    .anti-gradient_75   {background: #a4c073;}
    .anti-gradient_70   {background: #b0be6e;}
    .anti-gradient_65   {background: #c4c56d;}
    .anti-gradient_60   {background: #d4c86a;}
    .anti-gradient_55   {background: #e2c965;}
    .anti-gradient_50   {background: #f5ce62;}
    .anti-gradient_45   {background: #f3c563;}
    .anti-gradient_40   {background: #e9b861;}
    .anti-gradient_35   {background: #e6ad61;}
    .anti-gradient_30   {background: #ecac67;}
    .anti-gradient_25   {background: #e9a268;}
    .anti-gradient_20   {background: #e79a69;}
    .anti-gradient_15   {background: #e5926b;}
    .anti-gradient_10   {background: #e2886c;}
    .anti-gradient_5    {background: #e0816d;}
    .anti-gradient_0    {background: #dd776e;}

<div class="gradient_0">0</div>
<div class="gradient_5">5</div>
<div class="gradient_10">10</div>
<div class="gradient_15">15</div>
<div class="gradient_20">20</div>
<div class="gradient_25">25</div>
<div class="gradient_30">30</div>
<div class="gradient_35">35</div>
<div class="gradient_40">40</div>
<div class="gradient_45">45</div>
<div class="gradient_50">50</div>
<div class="gradient_55">55</div>
<div class="gradient_60">60</div>
<div class="gradient_65">65</div>
<div class="gradient_70">70</div>
<div class="gradient_75">75</div>
<div class="gradient_80">80</div>
<div class="gradient_85">85</div>
<div class="gradient_90">90</div>
<div class="gradient_95">95</div>
<div class="gradient_100">100</div>

Answer 4

我刚刚有一个项目，并开始使用与 jball 和 Asaph 或多或少相似的解决方案。即从红色（FF0000）平滑递增到（FFFF00）再到（00FF00）。

然而，我发现，从视觉上看，“黄色”周围的变化似乎更加剧烈，而“红色”和“绿色”周围的变化几乎不明显。我发现我可以通过使变化呈指数而不是线性来补偿这一点，导致“黄色”周围的增量较小，“红色”和“绿色”周围的增量较大。我提出的解决方案（在 JavaScript 中）看起来像这样：

    /**
     * Converts integer to a hexidecimal code, prepad's single 
     * digit hex codes with 0 to always return a two digit code. 
     * 
     * @param {Integer} i Integer to convert 
     * @returns {String} The hexidecimal code
     */
    function intToHex(i) {
        var hex = parseInt(i).toString(16);
        return (hex.length < 2) ? "0" + hex : hex;
    }   

    /**
     * Return hex color from scalar *value*.
     *
     * @param {float} value Scalar value between 0 and 1
     * @return {String} color
     */
    function makeColor(value) {
        // value must be between [0, 510]
        value = Math.min(Math.max(0,value), 1) * 510;

        var redValue;
        var greenValue;
        if (value < 255) {
            redValue = 255;
            greenValue = Math.sqrt(value) * 16;
            greenValue = Math.round(greenValue);
        } else {
            greenValue = 255;
            value = value - 255;
            redValue = 256 - (value * value / 255)
            redValue = Math.round(redValue);
        }

        return "#" + intToHex(redValue) + intToHex(greenValue) + "00";
    }

当我更改值时，这会产生更平滑的渐变，并且无论起点如何，将 inputValue 更改一定程度似乎都会或多或少地影响颜色。

Answer 5

查看任何图表都会给人一种错觉：“颜色代码”是您必须查找的单独值。事实上，您可以获得的最平滑的过渡就是简单地增加颜色中绿色的数量并减少红色的数量。

看吧，神秘的十六进制代码实际上一点也不神秘。它们有六位数字，其中前两位显示颜色中红色的量，中间两位显示绿色的量，最后两位显示蓝色的量。

与人类计数不同的是，当我们从 0 到 9 时，我们会移至下一个位值并得到 10，而使用十六进制时，我们会一直计数到 F。0, 1, 2, 3, 4, 5, 6 , 7, 8, 9, A, B, C, D, E, F, 10

所以你的目标是从 FF 00 00 开始（只有红色，没有绿色或蓝色）到FF FF 00（红色与绿色混合，即黄色），最后到00 FF 00。

你怎么能这么做呢？只需每次向绿色量添加一点点，直到它一直达到 FF，然后开始从红色量中减去一点点，直到它下降到 00。

“一点点”是多少？ “？无论您认为需要付出多少努力才能实现平稳过渡。您可以一次添加 30 个颜色，并从一种颜色到另一种颜色进行相当大的跳跃，或者一次添加 1 个颜色，让过渡过程更顺利（但也可能更慢）。尝试一下，看看什么对你有用。

Answer 6

我发现这个问题的原因是我试图为一张满是每小时“签入”设备的桌子制作一个彩色的正常运行时间指示器。这个想法是，它在 0% 时为红色，在 50% 时转变为黄色，在 100% 时为绿色。这当然毫无用处，但这是一种让桌子看起来比实际更令人印象深刻的简单方法。给定最小值、最大值和值，它会返回正确颜色的 rgb 0-255 值。假设输入有效。

function redYellowGreen(min, max, value)
{
	var green_max = 220;
	var red_max = 220;
	var red = 0;
	var green = 0;
	var blue = 0;

	if (value < max/2)
	{
		red = red_max;
		green = Math.round((value/(max/2))*green_max);
	}
	else
	{
		green = green_max;
		red = Math.round((1-((value-(max/2))/(max/2)))*red_max);
	}

	var to_return = new Object();
	to_return.red = red;
	to_return.green = green;
	to_return.blue = blue;

	return to_return;
}

Answer 7

我写这篇文章是因为寻找一种简单的方法来生成一组值的红-黄-绿颜色列表。

在编写需要显示“假设”分析并增强良好值、平均值和不良值的仪表板或报告时非常有用。在多个来源上找到了有趣的文章，但发现了这个非常简单的 JavaScript 函数：

function fSemaphor(minimal, maximal, value) {
  var difference = maximal - minimal;
  var medium = (minimal + difference / 2) | 0; // |0 returns INT
  var RED = 255,
    GREEN = 255;

  if (value <= medium)
    GREEN = (GREEN * (value / medium)) | 0;
  else
    RED = (RED * (1.0 - value / maximal)) | 0;

  // returns HEX color, for usage in CSS or any style
  return ("#" + (('0') + RED.toString(16)).substr(-2) + ('0' + GREEN.toString(16)).substr(-2) + '00'); // blue

}

我什至提供了它的用法的完整示例。只需复制并粘贴到 HTML 页面，然后看看它会做什么。

Max value: <input value=0 id="minim" /> Min value: <input value=20 id="maxim" />
<input type=submit value="Calculate colors" onClick="fCalcul()">
<table id=tColors border=2></table>
<script>
  function fCalcul() {
    var i;
    var tblRows = "<tr><th>value</th><th>Color</th></tr>";
    var minValue = parseInt(minim.value);
    var maxValue = parseInt(maxim.value);
    var tblBody = "";
    var increment = 1;

    if ((maxValue - minValue) > 40) //  don't show more than 40 rows, for sample sake
      increment = ((maxValue - minValue) / 40) | 0;

    for (i = minValue; i <= maxValue; i += increment) {
      tblBody += "<tr><td>" + i + "</td><td style='background: " +
        fSemaphor(minValue, maxValue, i) + "'>" +
        fSemaphor(minValue, maxValue, i) + "</td></tr>";
    }

    tColors.innerHTML = tblRows + tblBody;
  }


    function fSemaphor(minimal, maximal, value) {
      var difference = maximal - minimal;
      var medium = (minimal + difference / 2) | 0; // |0 returns INT
      var RED = 255,
        GREEN = 255;

      if (value <= medium)
        GREEN = (GREEN * (value / medium)) | 0;
      else
        RED = (RED * (1.0 - value / maximal)) | 0;

      // returns HEX color, for usage in CSS or any style
      return ("#" + (('0') + RED.toString(16)).substr(-2) + ('0' + GREEN.toString(16)).substr(-2) + '00'); // blue

    }
</script>

特别感谢 http 中的 Ovid 博客： //blogs.perl.org/users/ovid/2010/12/perl101-red-to-green-gradient.html，他给出了技术解释，帮助我简化了它

Answer 8

如今，所有现代浏览器都支持 CSS 中的颜色渐变，这允许在任何宽度/高度上完全平滑的渐变。然而，仍然不是所有浏览器都支持官方的 CSS linear-gradient，因此为了支持所有浏览器，请使用以下 CSS 类：

.gradient {
    background:    -moz-linear-gradient(left, red, yellow, green); /* FF3.6+ */
    background:        -webkit-gradient(linear, left top, right top, color-stop(0%, red), color-stop(50%, yellow), color-stop(100%, green)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, red, yellow, green); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(left, red, yellow, green); /* Opera 11.10+ */
    background:     -ms-linear-gradient(left, red, yellow, green); /* IE10+ */
    background:         linear-gradient(to right, red, yellow, green); /* W3C */
}

有关 CSS 渐变函数的进一步参考，请参阅以下文章Mozilla 开发者网络：

• 线性渐变（还列出了支持的浏览器)
• 使用 CSS 渐变

一个非常好的网站，可以快速生成完全自定义的颜色适用于所有浏览器的渐变是终极 CSS 渐变生成器。

Answer 9

适用于 Chrome 和 Chrome仅限 Safari

来自 NiceWebType.com ：

<style type="text/css">
    h1 {
        position: relative;
        font-size: 60px;
        line-height: 60px;
        text-shadow: 0px 0px 3px #000;
    }
    h1 a {
        position: absolute;
        top: 0; z-index: 2;
        color: #F00;
        -webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    }
    h1:after {
        content: "CSS Text Gradient (Webkit)";
        color: #0F0;
    }
</style>

<h1><a>CSS Text Gradient (Webkit)</a></h1>

Answer 10

当我不得不这样做时，我的选择是从十六进制切换到 RGB 代码，这看起来更适合计算。

您可以在此处阅读详细信息：

http://blog.pathtosharepoint .com/2009/11/02/visualization-calculated-color-gradients/

Answer 11

这是生成这些颜色的一种简单但肮脏的方法：

COLORS = [ "FF00%0.2XFF" % x for x in range(0,260,5) ] + [ "FF00FF%0.2X" % x for x in range(250,-1,-5) ]

颜色编码适用于 Google 地图：aabbggrr。

这将为您提供 103 种颜色的列表。我删除了三个，然后使用百分比作为整数对列表进行索引。

Answer 12

在我这边，我用两把刷子解决了这个问题：

float sweepAngle = 45.0F; // angle you want ...
LinearGradientBrush linGrBrushUp = new LinearGradientBrush(
    new Point(0, 0), new     Point(w, 0),
    Color.FromArgb(255, 0, 255, 0),     // green
    Color.FromArgb(255, 255, 255, 0)    // yellow
);
LinearGradientBrush linGrBrushDown = new LinearGradientBrush(
    new Point(w, 0), new Point(0, 0),
Color.FromArgb(255, 255, 255, 0),   // yellow
Color.FromArgb(255, 255, 0, 0)      // red
);
g.DrawArc( new Pen(linGrBrushUp, 5), x, y, w, h, 180.0F, sweepAngle>180.0F?180.0F:sweepAngle );
g.DrawArc( new Pen(linGrBrushDown, 5), x, y, w, h, 0.0F, sweepAngle>180.0F?sweepAngle-180.0F:0 );

Answer 13

我在 php 页面中使用了它：

$percent = .....; //whatever the percentage you want to colour

If ($percent <= 50) {
    $red = 255;
    $green = $percent * 5.1;
}

If ($percent >= 50) {
    $green = 255;
    $red = 255 - ($percent - 50) * 5.1;
}

$blue = 0;

Your RGB is then ($red, $green, $blue)

注意：5.1 因子来自 255/50