HTML 颜色代码：红色到黄色到绿色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4161369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Color Codes: Red to Yellow to Green
提问by JustADude
I would like to come up with as many HEX HTML values to have a smooth color gradient from red to green:
我想提出尽可能多的 HEX HTML 值，以实现从红色到绿色的平滑颜色渐变：
I would like this to be similar to the following: http://www.utexas.edu/learn/html/colors.html
我希望这类似于以下内容：http: //www.utexas.edu/learn/html/colors.html
I don't have the best eye for color choices, so I'm hoping a standard chart is already put together showing how to transition from red through yellow to green smoothly.
我对颜色选择没有最好的眼光，所以我希望已经有一个标准图表可以显示如何从红色平滑过渡到黄色到绿色。
On that website "1 of 6" is most similar to what I'm looking for, but that example is limited to 11 colors:
在该网站上，“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
It would be great to be able to double the number of colors, but yet make them transition smoothly.
能够将颜色数量增加一倍，但又能让它们平滑过渡，那就太好了。
Thanks for any insights and help.
感谢您的任何见解和帮助。
回答by jball
Depending on how many colors you want to end up with, the solution is just to keep incrementing the green value by a certain amount, and then when green is maxed (FF), decrement the red value repeatedly by the same amount.
根据你最终想要的颜色有多少，解决方案就是将绿色值不断增加一定量，然后当绿色达到最大值 ( FF) 时，将红色值重复减少相同的量。
Pseudo-code:
伪代码：
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
}
Generating by hand, you can simply increment by 16, like so:
手动生成，您可以简单地增加 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
回答by Asaph
The best way to do this is to understand what the hex color codes actually mean. Once you grasp this, it will become clear how to make gradients of arbitrary smoothness. The hex color codes are triplets representing the red, green and blue components of the color respectively. So for example in the color FF0000, the red component is FF, the green component is 00and the blue component is 00. FF0000looks red because the red component is dialed all the way up to FFand the green and blue are dialed all the way down to 00. Similarly, pure green is 00FF00and pure blue is 0000FF. If you convert the hex numbers to decimal, you'll get a value in between 0and 255.
最好的方法是了解十六进制颜色代码的实际含义。一旦你掌握了这一点，你就会清楚如何制作任意平滑度的渐变。十六进制颜色代码是分别代表颜色的红色、绿色和蓝色分量的三元组。因此，例如在颜色中FF0000，红色分量是FF，绿色分量是00，蓝色分量是00。FF0000看起来是红色的，因为红色组件一直拨到FF并且绿色和蓝色一直拨到00。同样，纯绿色是00FF00，纯蓝色是0000FF。如果您将十六进制数转换为十进制数，您将得到一个介于0和之间的值255。
So now how does one make a gradient transitioning from red to yellow to green? Easy; you take the end points, decide how many steps you want in between, and then evenly step through each of the 3 color channels to transition from one color to the next color. Below is an example going in steps of 11hex (17in decimal):
那么现在如何制作从红色到黄色再到绿色的渐变呢？简单; 你取终点，决定你想要多少个步骤，然后均匀地遍历 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
回答by Ascendant
I just had a project and began with more or less similar solution to jball and Asaph. That is, smoothly incrementing from red (FF0000) to (FFFF00) to (00FF00).
我刚刚有一个项目，并开始使用与 jball 和 Asaph 或多或少相似的解决方案。即，从红色 (FF0000) 到 (FFFF00) 到 (00FF00) 平滑递增。
However, I found that, visually, the changes seemed to be much more drastic around "yellow," while they were barely noticeable around "red" and "green." I found that I could compensate for this by making the changes exponential rather than linear, causing the increments to be smaller around "yellow" and larger around "red" and "green". The solution (in Javascript) I worked out looked like this:
然而，我发现，从视觉上看，“黄色”周围的变化似乎要剧烈得多，而“红色”和“绿色”周围的变化几乎不明显。我发现我可以通过使变化呈指数而不是线性来补偿这一点，导致“黄色”周围的增量较小，而“红色”和“绿色”周围的增量较大。我制定的解决方案（在 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";
}
This yielded a much smoother gradient as I changed the value, and changing inputValue by a certain seemed to affect the color to more or less the same degree regardless of the starting point.
当我更改值时，这产生了更平滑的渐变，并且无论起点如何，将 inputValue 更改为某个值似乎都会或多或少地影响颜色。
回答by VladSavitsky
Here is nice looking gradient from green to red
这是从绿色到红色的漂亮渐变
/* 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>回答by Chris Trudeau
My reason for finding this question was that I was trying to make a colored uptime indicator for a table full of devices that "check-in" hourly. The idea being that it would be red at 0%, transition to yellow at 50%, and be green at 100%. This is of course pretty useless but it was an easy way to make a table look more impressive than it actually was. Given a min, max, and value it returns rgb 0-255 values for the correct color. Assumes valid input.
我发现这个问题的原因是我试图为一张满是每小时“登记”的设备的桌子制作一个彩色的正常运行时间指示器。这个想法是它在 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;
}回答by VoteyDisciple
Looking at anychart will give the illusion that "color codes" are individual values that you must lookup. In fact, the smoothest transition you can get is to simply increment the amount of green in the color and decrement the amount of red.
查看任何图表都会给人一种错觉，即“颜色代码”是您必须查找的单个值。事实上，您可以获得的最平滑的过渡是简单地增加颜色中的绿色量并减少红色量。
See, the cryptic hexidecimal codes are actually not at all cryptic. They have six digits, where the first two show the amount of red in the color, the middle two show the amount of green, and the last two show the amount of blue.
看，神秘的十六进制代码实际上一点也不神秘。它们有六位数字，其中前两位表示颜色中红色的数量，中间两位表示绿色的数量，最后两位表示蓝色的数量。
And unlike human counting where when we get from 0 to 9 we move to the next place value and get 10, with hexidecimal we count all the way up to F. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10
与人类计数不同，当我们从 0 到 9 时，我们移动到下一个位置值并得到 10，使用十六进制我们一直计数到 F。 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10
So your goal is to get from FF 00 00(red only, no green or blue) to FF FF 00(red mixed with green, which is yellow), and finally to 00 FF 00.
因此，您的目标是从FF 00 00（仅红色，无绿色或蓝色）到FF FF 00（红色与绿色混合，即黄色），最后到00 FF 00.
How can you do that? Just keep adding a little bit at a time to the green amount until it gets all the way up to FF, and then start taking a little bit away from the red amount until it gets down to 00.
你怎么能这样做？只需不断地向绿色量添加一点，直到它一直上升到 FF，然后开始从红色量中减少一点，直到它下降到 00。
And how much is "a little bit"? However much you think it takes to get a smooth transition. You could add 30 at a time and get pretty major jumps from one color to another, or add 1 at a time and have the transition progress more smoothly (but perhaps also more slowly). Experiment and see what works for you.
而“一点点”又是多少？无论您认为需要多少才能实现平稳过渡。您可以一次添加 30 次，从一种颜色到另一种颜色的大幅跳跃，或者一次添加 1 次，使过渡过程更平滑（但也可能更慢）。试验一下，看看什么对你有用。
回答by Tobias
Nowadays all modern browsers support color gradients in CSS which allow totally smooth gradients over any width/height. However, still not all browsers support the official CSS linear-gradient, so in order to support all browsers, use the following CSS class:
现在所有现代浏览器都支持 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 */
}
For further reference of the CSS gradient functions, see the following articles in the Mozilla Developer Network:
如需进一步参考 CSS 渐变函数，请参阅 Mozilla 开发者网络中的以下文章：
- linear-gradient(also lists the supported browsers)
- Using CSS gradients
A very good web site to quickly generate completely customized color gradients for all browsers is the Ultimate CSS Gradient Generator.
Ultimate CSS Gradient Generator是一个非常好的网站，可以为所有浏览器快速生成完全自定义的颜色渐变。
回答by Christophe
When I had to do this my choice was to switch from hex to rgb code, which seemed more calculation-friendly.
当我不得不这样做时，我的选择是从十六进制代码切换到 rgb 代码，这似乎对计算更友好。
You can read the details here:
您可以在此处阅读详细信息：
http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/
http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/
回答by jmcarter9t
Here is a simple, yet dirty, way to generate these colors:
这是生成这些颜色的简单但肮脏的方法：
COLORS = [ "FF00%0.2XFF" % x for x in range(0,260,5) ] + [ "FF00FF%0.2X" % x for x in range(250,-1,-5) ]
The color encoding is for Google maps: aabbggrr.
颜色编码适用于 Google 地图：aabbggrr。
This will give you a list of 103 colors. I removed three and then indexed the list with using a percentage as an integer.
这将为您提供 103 种颜色的列表。我删除了三个，然后使用百分比作为整数索引列表。
回答by drudge
Works in Chrome & Safari only
仅适用于 Chrome 和 Safari
From 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>
