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>