HTML颜色代码：红色到黄色到绿色
我想拿出尽可能多的hexHTML值，以从红色到绿色平滑的颜色渐变：
我想这是类似于以下内容： http : //www.utexas.edu/learn/html/colors.html
我没有最好的颜色select的眼睛，所以我希望标准图表已经放在一起，显示如何从红色平滑过渡到黄色。
在该网站上，“6之1”与我所寻找的内容最相似，但是这个例子仅限于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 能够将颜色数量加倍，但却能使它们顺利过渡，真是太棒了。
感谢您的任何见解和帮助。
根据你想要结束多less种颜色，解决办法就是保持绿色值增加一定的数值，然后当绿色变为最大值（ FF ）时，将红色值重复减less相同的数值。
伪代码：
int red = 255; //ie 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
要做到这一点，最好的办法是了解hex颜色代码实际上是什么意思。 一旦掌握了这一点，就会明白如何使任意平滑的渐变。 hex颜色代码是分别表示颜色的红色，绿色和蓝色分量的三元组。 因此，例如在颜色FF0000 ，红色组件是FF ，绿色组件是00 ，蓝色组件是00 。 FF0000看起来是红色的，因为红色部分一直拨到FF ，绿色和蓝色一直拨到00 。 同样，纯绿色是00FF00 ，纯蓝色是0000FF 。 如果将hex数转换为十进制数，则会得到0到255之间的值。
那么现在如何让一个渐变从红色变成黄色变成绿色呢？ 简单; 您可以选取最终点，决定您需要的步数，然后均匀地遍历三个颜色通道中的每一个，从一种颜色转换为下一种颜色。 下面是一个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
我刚刚开始了一个项目，并开始或多或less类似jball和Asaph的解决scheme。 即，从红色（FF0000）到（FFFF00）到（00FF00）平滑递增。
然而，从视觉上看，这些变化似乎在“黄色”周围变得更为激烈，而在“红”和“绿”周围却几乎没有引人注意。 我发现我可以通过改变指数而不是线性来补偿这一点，导致增加在“黄色”附近变小，在“红色”和“绿色”附近变大。 解决scheme（在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一定程度上似乎影响颜色，或者不pipe起始点如何，都会有相同的程度。
看任何图表会给人错觉，“颜色代码”是你必须查找的个别值。 事实上，你可以得到的最平滑的过渡只是增加颜色的绿色量，减less红色的量。
看，隐含的hex代码其实并不是神秘的。 他们有六位数字，前两位显示颜色中红色的数量，中间两位显示绿色数量，最后两位数字显示蓝色数量。
而不像人类的计数，当我们从0到9的时候，我们移动到下一个位置的值，并得到10，hex我们一路数到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。
多less是“一点点”？ 不过，你认为需要平稳过渡。 你可以一次添加30个，并且从一个颜色跳到另一个颜色，或者一次加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开发者networking中的以下文章：
- 线性渐变 （也列出了支持的浏览器）
- 使用CSS渐变
Ultimate CSS渐变生成器是一个非常好的网站，可以为所有浏览器快速生成完全自定义的颜色渐变。
我find这个问题的原因是，我试图为一张桌面装上一个彩色的正常运行时间指示器，每小时进行一次“检查”。 这个想法是，在0％时是红色的，在50％时是黄色的，在100％时是绿色的。 这当然是无用的，但它是一个简单的方法，使桌子看起来比实际上更令人印象深刻。 给定一个最小值，最大值和值，它将返回正确颜色的rgb 0-255值。 假定有效的input。
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; }
仅适用于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>
当我不得不这样做时，我的select是从hex转换到rgb代码，这似乎更易于计算。
您可以在这里阅读详细信息：
http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/
下面是一个简单而又脏的方法来生成这些颜色：
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种颜色的清单。 我删除了三个，然后使用百分比作为整数索引列表。
在我身边，我用两把刷子解决了这个问题：
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 );
这里是从绿色到红色的漂亮的渐变
/* 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>
