html - tag - rgb to hex




HTML顏色代碼:紅色到黃色到綠色 (9)

我想提出盡可能多的HEX HTML值,以獲得從紅色到綠色的平滑顏色漸變:

我希望這類似於以下內容: http://www.utexas.edu/learn/html/colors.htmlhttp://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 

能夠將顏色數量增加一倍,但能夠順利過渡,真是太棒了。

感謝您的任何見解和幫助。


僅適用於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>

在我這邊,我用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 );

我來到這篇文章是因為尋找一種簡單的方法來為一組值生成紅黃綠色的列表。

在編寫儀表板或報告時需要顯示“假設”分析並增強良好與平均值和壞值之間的關係。 在幾個來源上找到了有趣的文章,但是這個非常簡單的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>

特別感謝Ovid博客http://blogs.perl.org/users/ovid/2010/12/perl101-red-to-green-gradient.html ,他提供了技術說明,幫助我簡化了它


我剛做了一個項目,開始時或多或少類似於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改變一定似乎都會將顏色或多或少地影響到相同的程度。


我找到這個問題的原因是我試圖為一個裝滿每小時“登記”設備的桌子製作一個彩色的正常運行時間指示器。 這個想法是它在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;
}


最好的方法是了解十六進制顏色代碼的實際含義。 一旦掌握了這一點,就會清楚如何製作任意平滑度的漸變。 十六進制顏色代碼是三元組,分別代表顏色的紅色,綠色和藍色分量。 因此,例如在顏色FF0000 ,紅色分量是FF ,綠色分量是00而藍色分量是00FF0000看起來是紅色的,因為紅色組件一直撥到FF ,綠色和藍色一直撥到00 。 類似地,純綠色為00FF00 ,純藍色為0000FF 。 如果將十六進制數轉換為十進制數,則將獲得介於0255之間的值。

那麼現在如何使梯度從紅色變為黃色變為綠色? 簡單; 你取出終點,決定你想要的步數,然後均勻地逐步通過3個顏色通道中的每一個,從一種顏色過渡到下一種顏色。 下面是一個以十六進制(十進制為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

根據您想要結束的顏色數量,解決方案只是將綠色值增加一定量,然後當綠色達到最大值( 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


這是從綠色到紅色的漂亮漸變

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





scale