HTML 颜色代码：红色到黄色到绿色答案

【问题标题】：HTML Color Codes: Red to Yellow to GreenHTML 颜色代码：红色到黄色到绿色
【发布时间】：2011-05-08 20:43:10
【问题描述】：

我想提出尽可能多的 HEX HTML 值，以实现从红色到绿色的平滑颜色渐变：

我希望这类似于以下内容： http://www.utexas.edu/learn/html/colors.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

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

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

【问题讨论】：

我发现这个答案令人印象深刻，它链接到一个可编辑的演示：stackoverflow.com/a/17267684/470749

标签： html colors hex scale

【解决方案1】：

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

在编写需要显示“假设”分析并增强好、平均和坏值的仪表板或报告时很有用。在几个来源上找到了有趣的文章，但得出了这个非常简单的 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://blogs.perl.org/users/ovid/2010/12/perl101-red-to-green-gradient.html 的 Ovid 博客，他提供了帮助我简化它的技术解释

【讨论】：

【解决方案2】：

我在一个 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;

你的 RGB 是 ($red, $green, $blue)

注意：5.1 系数源自 255/50

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

那么现在如何使渐变从红色过渡到黄色再到绿色？简单;您获取端点，决定中间需要多少步，然后均匀地通过 3 个颜色通道中的每一个，以从一种颜色过渡到下一种颜色。下面是一个以11 hex（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

【讨论】：

虽然在数学上是正确的，但这并不总是能产生最佳的颜色感知值。

【解决方案5】：

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

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 );

【讨论】：

【解决方案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;
}

【讨论】：

从不使用最小值。您应该计算范围（最大-最小）并将其用于计算

【解决方案7】：

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

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

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

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

【讨论】：

【解决方案8】：

我刚刚有一个项目，并开始使用与 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 更改一定程度似乎都会对颜色产生或多或少相同程度的影响。

【讨论】：

非常酷！不过有一个奇怪的地方：尝试将 0.5 传递给 makeColor。你得到#100ff00！我为缓解这种情况所做的是将redValue = 256 - (value * value / 255) 更改为redValue = 255 - (value * value / 255)。

【解决方案9】：

根据你想要最终得到多少颜色，解决方案就是不断增加绿色值一定数量，然后当绿色最大化时（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

【讨论】：

【解决方案10】：

当我不得不这样做时，我的选择是从十六进制代码切换到 rgb 代码，这似乎对计算更友好。

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

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

【讨论】：

【解决方案11】：

现在所有现代浏览器都支持 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 开发者网络中的以下文章：

linear-gradient（也列出了支持的浏览器）
Using CSS gradients

Ultimate CSS Gradient Generator 是一个非常好的网站，可以为所有浏览器快速生成完全自定义的颜色渐变。

【讨论】：

【解决方案12】：

仅适用于 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>

【讨论】：

它适用于 Safati 和 Chrome，因为它们都基于 webkit 引擎，并且您使用了 webkit 特定的功能。 Firefox 基于 Gecko 引擎，而 IE 基于 Microsoft 的 Trident 引擎，因此您的代码无法在 Firefox/IE 中运行也就不足为奇了。我怀疑它永远不会。
webkit 特有的特性可能是对 CSS3 的初步支持。当 CSS3 支持为主流消费做好准备时，我想他们会从 CSS 字段名称中删除 -webkit- 前缀。

【解决方案13】：

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

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

与人类计数不同，当我们从 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 个，让过渡过程更顺畅（但也可能更慢）。试验一下，看看什么对你有用。

【讨论】：