web-dev-qa-db-ja.com

HTMLカラーコード：赤から黄、緑

赤から緑への滑らかな色のグラデーションを持つように、できるだけ多くの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

色の数を2倍にできるが、それでもそれらをスムーズに移行できるようにすることは素晴らしいことです。

洞察と助けてくれてありがとう。

htmlcolorshexscale
38
JustADude

最終的に必要な色の数に応じて、緑の値を一定量だけ増やし続け、緑が最大になったら（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
44
jball

これを行う最良の方法は、16進カラーコードが実際に意味するものを理解することです。これを把握すると、任意の滑らかさの勾配を作成する方法が明確になります。 16進数の色コードは、それぞれ色の赤、緑、青のコンポーネントを表すトリプレットです。たとえば、FF0000という色では、赤のコンポーネントはFF、緑のコンポーネントは00、青のコンポーネントは00です。 FF0000は赤に見えます。これは、赤のコンポーネントがFFまでダイヤルされ、緑と青が00までダイヤルされるためです。同様に、純粋な緑は00FF00であり、純粋な青は0000FFです。 16進数を10進数に変換すると、0と255の間の値が得られます。

それでは、赤から黄色、緑へと変化するグラデーションをどのように作成するのでしょうか？簡単;エンドポイントを取得し、その間に必要なステップ数を決定し、3つのカラーチャネルのそれぞれを均等にステップ実行して、ある色から次の色に移行します。以下は、11 hex（10進数で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
25
Asaph

私はちょうどプロジェクトを持っていて、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を特定の値だけ変更すると、開始点に関係なく色にほぼ同じ程度の影響を及ぼすように見えました。

10
Ascendant

anyを見ると、「カラーコード」はルックアップする必要がある個々の値であるという錯覚を与えます。実際、最もスムーズに移行できるのは、単に色の緑の量を増やし、赤の量を減らすことです。

不可解な16進コードは、実際にはまったく不可解ではありません。それらは6桁で、最初の2つは色の赤の量を示し、中央の2つは緑の量を示し、最後の2つは青の量を示します。

そして、0から9に到達すると次の値に移動して10を取得する人間のカウントとは異なり、16進数では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を追加して、トランジションをよりスムーズに（ただし、よりゆっくりと）進めることができます。試してみて、何が効果的かを確認してください。

2
VoteyDisciple

緑から赤への素敵なグラデーション

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

この質問を見つけたのは、1時間ごとに「チェックイン」するデバイスでいっぱいのテーブルに対して、色付きの稼働時間インジケータを作成しようとしていたからです。これは、0％で赤くなり、50％で黄色に変わり、100％で緑になるという考えです。これはもちろん役に立たないが、テーブルを実際よりも印象的に見せるための簡単な方法だった。最小値、最大値、および値を指定すると、正しい色の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;
}
2
Chris Trudeau

今日、すべての最新のブラウザは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 Developer Networkの次の記事を参照してください。

すべてのブラウザ用に完全にカスタマイズされたカラーグラデーションをすばやく生成するための非常に優れたWebサイトは、 ltimate CSS Gradient Generator です。

1
Tobias

私はこれをPHPページで使用しました：

$percent = .....; //whatever the percentage you want to colour

If ($percent <= 50) {
    $red = 255;
    $green = $percent * 5.1;
}

If ($percent >= 50) {
    $green = 255;
    $red = 255 - ($percent - 50) * 5.1;
}

$blue = 0;

RGBは（$ red、$ green、$ blue）です

注：255/50からの5.1係数の派生

0
RGriffiths

これらの色を生成する、シンプルでありながら汚れた方法を次に示します。

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色のリストが表示されます。 3つを削除し、整数としてパーセンテージを使用してリストにインデックスを付けました。

0
jmcarter9t

これをしなければならなかったとき、私の選択は16進数からrgbコードに切り替えることでした。

ここで詳細を読むことができます：

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

0
Christophe

値のセットに対して赤-黄-緑の色のリストを生成する簡単な方法を探していたので、私はこの投稿に来ました。

「what-if」分析を表示し、良い値と平均値と悪い値を強化する必要があるダッシュボードまたはレポートをプログラミングするときに役立ちます。いくつかのソースに関する興味深い記事を見つけましたが、次の非常に単純な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ブログに感謝します。私はそれを簡素化します

0
Pablo Martinez

私の側では、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 );
0
smartcomtest

Works in 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>
0
drudge