我想提出尽可能多的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
能够将颜色数量增加一倍，但能够顺利过渡，真是太棒了。
感谢您的任何见解和帮助。
答案 0 :(得分：43)
根据您想要结束的颜色数量，解决方案只是将绿色值增加一定量，然后当绿色最大值（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
答案 1 :(得分：25)
最好的方法是了解十六进制颜色代码的实际含义。一旦掌握了这一点，就会清楚如何制作任意平滑度的渐变。十六进制颜色代码是三元组，分别代表颜色的红色，绿色和蓝色分量。例如，在颜色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
答案 2 :(得分：10)
我刚做了一个项目，并开始采用或多或少类似于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更改为某个似乎都会对颜色产生大致相同的影响。
答案 3 :(得分：2)
查看 任何 图表会产生错误，即“颜色代码”是您必须查找的单个值。实际上，您可以获得的最平滑过渡是简单地增加颜色中的绿色量并减少红色量。
看，隐秘的十六进制代码实际上并不是神秘的。它们有六位数，前两位显示颜色中的红色，中间两位显示绿色，最后两位显示蓝色。
与人类计算不同，当我们从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并使转换进度更顺畅（但也许更慢）。试验并看看哪些对您有用。
答案 4 :(得分：2)
我找到这个问题的原因是我试图为一个装满桌子的桌子制作一个彩色的正常运行时间指示器，然后办理登机手续＆＃34;每小时。这个想法是它在0％时变为红色，在50％时变为黄色，在100％时变为绿色。这当然是没用的，但这是让桌子看起来比实际更令人印象深刻的简单方法。给定min，max和value，它返回正确颜色的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;
}
答案 5 :(得分：2)
这是从绿色到红色的漂亮渐变
/* 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>
答案 6 :(得分：1)
如今所有现代浏览器都支持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开发人员网络中的以下文章：
一个非常好的网站，可以快速为所有浏览器生成完全自定义的颜色渐变Ultimate CSS Gradient Generator。
答案 7 :(得分：0)
适用于Chrome＆amp;仅限Safari
<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>
答案 8 :(得分：0)
当我必须这样做时，我的选择是从十六进制转换为rgb代码，这似乎更适合计算。
您可以在此处阅读详细信息：
http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/
答案 9 :(得分：0)
这是一种生成这些颜色的简单而又脏的方法：
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种颜色的列表。我删除了三个，然后使用百分比作为整数索引列表。
答案 10 :(得分：0)
在我这边，我用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 );
答案 11 :(得分：0)
我在php页面中使用了此
07-24 15:48:37.849 24376-24376/com.mygdx.game I/System.out: Ads: InterLoaded
07-24 15:48:37.968 24376-24376/com.mygdx.game W/Ads: Precache abort but no precache task running.
07-24 15:48:39.143 24376-24376/com.mygdx.game I/Ads: Starting ad request.
07-24 15:48:39.143 24376-24376/com.mygdx.game I/Ads: This request is sent from a test device.
07-24 15:48:39.161 24376-24376/com.mygdx.game I/System.out: Ads: InterClosed
07-24 15:48:39.213 19856-24595/? W/Ads: App does not have the required permissions to get location
07-24 15:48:39.779 24376-24376/com.mygdx.game I/System.out: Ads: InterLoaded
07-24 15:48:39.859 24376-24376/com.mygdx.game W/Ads: Precache abort but no precache task running.
07-24 15:48:41.145 24376-24376/com.mygdx.game I/Ads: Starting ad request.
07-24 15:48:41.145 24376-24376/com.mygdx.game I/Ads: This request is sent from a test device.
07-24 15:48:41.149 24376-24376/com.mygdx.game W/Ads: Not retrying to fetch app settings
07-24 15:48:41.164 24376-24376/com.mygdx.game I/System.out: Ads: InterClosed
07-24 15:48:41.232 19856-24595/? W/Ads: App does not have the required permissions to get location
07-24 15:48:41.784 24376-24376/com.mygdx.game I/System.out: Ads: InterLoaded
07-24 15:48:41.880 24376-24376/com.mygdx.game W/Ads: Precache abort but no precache task running.
那么您的RGB是（$红色，$绿色，$蓝色）
注意：5.1因子源自255/50
答案 12 :(得分：0)
我之所以写这篇文章，是因为寻找一种简单的方法来为一组值生成红黄绿色的颜色列表。
在对仪表盘或报表进行编程时很有用，这些仪表盘或报表需要显示“假设分析”并增强好值，平均值和坏值。在多个来源中找到有趣的文章，但是发现了这个非常简单的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博客，他提供了有助于我简化它的技术说明