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

Question

我想拿出尽可能多的十六进制HTML值有由红色变为绿色平滑的色彩渐变：

我想这是类似以下内容： http://www.utexas.edu/learn/html/colors.html

我没有最好的颜色选择眼睛，所以我希望标准图表已经放在一起，展示了如何从红色平滑过渡到黄色。

在该网站“的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 

这将是伟大的，是能够双数的颜色，但仍然让他们平稳过渡。

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

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

看着任何图表将给错觉“颜色代码“是您必须查找的单个值。事实上，您可以获得的最平滑的过渡只是增加颜色中的绿色量并减少红色量。

看，隐含的十六进制代码实际上并不是神秘的。他们有六位数字，其中前两位显示颜色中红色的数量，中间两位显示绿色数量，最后两位数字显示蓝色数量。

而且不像当我们从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 3

做到这一点的最好方法是了解十六进制颜色代码的实际含义。一旦掌握了这一点，就会明白如何使任意平滑的渐变。十六进制颜色代码是分别表示颜色的红色，绿色和蓝色分量的三元组。因此，例如在颜色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 4

作品在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 5

我刚做了一个项目并开始或多或少类似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 6

如今所有现代浏览器都支持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。

Answer 7

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

你可以在这里阅读细节：

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

Answer 8

下面是一个简单的，但脏，方式来生成这些颜色：

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种颜色的列表。我删除了三个，然后使用百分比作为整数为列表建立索引。

Answer 9

我找到这个问题的原因是，我试图让一个充满了“签到”每小时设备的台彩色的正常运行时间指标。这个想法是，它将在0％时变为红色，在50％时变为黄色，在100％时变为绿色。这当然很没用，但它是让桌子看起来比实际更令人印象深刻的简单方法。给定最小值，最大值和数值，它会返回正确颜色的rgb 0-255值。假定有效的输入。

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

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

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

 
\t return to_return; 
 
}

Answer 10

在我的身边，我解决了这个问题，用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); 

Answer 11

这里是不错的，从绿视渐变到红色

/* 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>