c# - 条件付き書式 -- パーセンテージから色への変換

Question

パーセンテージを緑 (100%) から赤 (0%) までの範囲の色に変換し、黄色を 50% に変換する最も簡単な方法は何ですか?

私はプレーンな 32 ビット RGB を使用しているため、各コンポーネントは 0 ～ 255 の整数です。これを C# で行っていますが、このような問題では言語はそれほど重要ではないと思います。

Marius と Andy の回答に基づいて、次のソリューションを使用しています。

double red = (percent < 50) ? 255 : 256 - (percent - 50) * 5.12;
double green = (percent > 50) ? 255 : percent * 5.12;
var color = Color.FromArgb(255, (byte)red, (byte)green, 0);

完全に機能します-マリウスのソリューションから行う必要があった調整は、(255 - (パーセント - 50) * 5.12 利回り -1 のように) 256 を使用することだけでした。100% の場合、何らかの理由で Silverlight (-1, 255, 0 ) -> 黄色 ...

score 13 · Accepted Answer

この関数を JavaScript で作成しました。色が css 文字列であることを返します。パーセンテージを変数として取り、範囲は 0 から 100 です。アルゴリズムは任意の言語で作成できます。

function setColor(p){
    var red = p<50 ? 255 : Math.round(256 - (p-50)*5.12);
    var green = p>50 ? 255 : Math.round((p)*5.12);
    return "rgb(" + red + "," + green + ",0)";
}

score 6 · Accepted Answer

おそらくやりたいことは、HSV または HSL 色空間で 0% から 100% のいくつかのポイントを割り当てることです。そこから色を補間し (黄色はたまたま赤と緑の間にあります:)、それらを RGB に変換できます。これにより、2 つの間の見栄えの良いグラデーションが得られます。

ただし、色をステータスインジケータとして、またユーザーインターフェイスの観点から使用すると仮定すると、色の小さな変化を認識するのは非常に苦手なので、これはおそらくあまり良い考えではありません。そのため、値をたとえば 3 ～ 7 個のバケットに分割すると、状況が変化したときに違いがより顕著になりますが、ある程度の精度が犠牲になります (いずれにせよ、評価できない可能性が最も高いでしょう)。

したがって、すべての数学はさておき、最終的には、v を入力値として、次の色のルックアップテーブルをお勧めします。

#e7241d for v <= 12%
#ef832c for v > 12% and v <= 36%
#fffd46 for v > 36% and v <= 60%
#9cfa40 for v > 60% and v <= 84%
#60f83d for v > 84%

これらは HSL 値 (0.0, 1.0, 1.0)、(30.0, 1.0, 1.0)、(60.0, 1.0, 1.0)、(90.0, 1.0, 1.0)、(120.0, 1.0, 1.0)、および目的に合わせて色を多少調整したい場合があります (赤と緑が「純粋」ではないことを好まない人もいます)。

参照してください：

HSL カラー (色相、彩度、明度) を使用して見栄えの良い GUI を作成する
サンプル C# ソースコードのRGB および HSL 色空間変換。

score 5 · Accepted Answer

疑似コードで。

0 ～ 50% の 16 進値は FFxx00 になります。

XX = ( Percentage / 50 ) * 255 converted into hex.

50 ～ 100 の場合、16 進値は xxFF00 になります。
```
XX = ((100-Percentage) / 50) * 255 converted into hex.  
```

それが役に立ち、理解できることを願っています。

score 3 · Accepted Answer

これは、現在受け入れられている回答を次の 3 つの方法で改善する、クリーンなソリューションです。

マジックナンバー (5.12) を削除して、コードを理解しやすくします。
パーセンテージが 100% の場合に -1 になる丸め誤差は発生しません。
使用する最小および最大 RGB 値をカスタマイズできるため、単純な rgb(255, 0, 0) - rgb(0, 255, 0) よりも明るいまたは暗い範囲を生成できます。

示されているコードは C# ですが、アルゴリズムを他の言語に適応させるのは簡単です。

private const int RGB_MAX = 255; // Reduce this for a darker range
private const int RGB_MIN = 0; // Increase this for a lighter range

private Color getColorFromPercentage(int percentage)
{
    // Work out the percentage of red and green to use (i.e. a percentage
    // of the range from RGB_MIN to RGB_MAX)
    var redPercent = Math.Min(200 - (percentage * 2), 100) / 100f;
    var greenPercent = Math.Min(percentage * 2, 100) / 100f;

    // Now convert those percentages to actual RGB values in the range
    // RGB_MIN - RGB_MAX
    var red = RGB_MIN + ((RGB_MAX - RGB_MIN) * redPercent);
    var green = RGB_MIN + ((RGB_MAX - RGB_MIN) * greenPercent);

    return Color.FromArgb(red, green, RGB_MIN);
}

ノート

これは、いくつかのパーセンテージ値と、対応する赤と緑の比率を示す簡単な表です。

VALUE   GREEN    RED       RESULTING COLOUR
 100%    100%     0%       green
  75%    100%    50%       yellowy green
  50%    100%   100%       yellow
  25%     50%   100%       orange
   0%      0%   100%       red

うまくいけば、あなたはそれをかなりはっきりと見ることができます

緑の値はパーセンテージ値の 2 倍です (ただし、上限は 100 です)。
赤は逆: 2x (100 - パーセンテージ) (ただし、上限は 100)

したがって、私のアルゴリズムは、次のようなテーブルから値を計算します...

VALUE   GREEN    RED
 100%    200%     0%
  75%    150%    50%
  50%    100%   100%
  25%     50%   150%
   0%      0%   200%

...そして、Math.Min()それらを 100% に制限するために使用します。

score 1 · Accepted Answer

黄色は赤と緑の混合であるため、おそらく最初から#F00緑を上にスライドさせてにヒットし#FF0、次に赤を下にスライドさせてにし#0F0ます。

for (int i = 0; i < 100; i++) {
    var red = i < 50
        ? 255
        : 255 - (256.0 / 100 * ((i - 50) * 2));
    var green = i < 50
        ? 256.0 / 100 * (i * 2)
        : 255;
    var col = Color.FromArgb((int) red, (int) green, 0);
}

score 1 · Accepted Answer

この python 関数は、javascript コードに基づいて作成しました。小数としてパーセンテージを取ります。また、パーセンテージスケールでより長く色を赤く保つために、値を2乗しました。また、色の範囲を 255 から 180 に狭めて、両端の赤と緑を暗くしました。これらは、素敵な色を与えるために遊ぶことができます。真ん中にオレンジのタッチを追加したいのですが、適切な作業を行う必要があります、ブー。

def getBarColour(value):
    red = int( (1 - (value*value) ) * 180 )
    green = int( (value * value )* 180 )

    red = "%02X" % red
    green = "%02X" % green

    return '#' + red + green +'00'

score 0 · Accepted Answer

次の Python ルーチンを使用して、色をブレンドします。

def blendRGBHex(hex1, hex2, fraction):
    return RGBDecToHex(blendRGB(RGBHexToDec(hex1), 
                                RGBHexToDec(hex2), fraction))

def blendRGB(dec1, dec2, fraction):
    return [int(v1 + (v2-v1)*fraction) 
        for (v1, v2) in zip(dec1, dec2)]

def RGBHexToDec(hex):
    return [int(hex[n:n+2],16) for n in range(0,len(hex),2)]

def RGBDecToHex(dec):
    return "".join(["%02x"%d for d in dec])

例えば：

>>> blendRGBHex("FF8080", "80FF80", 0.5)
"BFBF80"

別のルーチンはこれをラップして、「条件付き書式設定」の数値をうまくブレンドします。

def colourRange(minV, minC, avgV, avgC, maxV, maxC, v):
    if v < minV: return minC
    if v > maxV: return maxC
    if v < avgV:
        return blendRGBHex(minC, avgC, (v - minV)/(avgV-minV))
    elif v > avgV:
        return blendRGBHex(avgC, maxC, (v - avgV)/(maxV-avgV))
    else:
        return avgC

したがって、ジョナスの場合は次のようになります。

>>> colourRange(0, "FF0000", 50, "FFFF00", 100, "00FF00", 25)
"FF7F00"

score 0 · Accepted Answer

ActionScript 3 の私のソリューション:

var red:Number = (percentage <= 50) ? 255 : 256 - (percentage - 50) * 5.12;
var green:Number = (percentage >= 50) ? 255 : percentage * 5.12;

var redHex:Number = Math.round(red) * 0x10000;
var greenHex:Number = Math.round(green) * 0x100;

var colorToReturn:uint = redHex + greenHex;

score -1 · Accepted Answer

RGB であるため、色は -1 (白) の整数値から黒の -16777216 まで変化します。その中間のどこかに赤、緑、黄色があります。黄色は実際には -256、赤は -65536、緑は -16744448 です。そのため、黄色は実際には RGB 表記の赤と緑の間にありません。波長に関しては、緑がスペクトルの片側にあり、赤がスペクトルの反対側にあることは知っていますが、スペクトルがすべての可視色を表すわけではないため、このタイプの表記法がコンピューターで使用されているのを見たことがありません。

c# - 条件付き書式 -- パーセンテージから色への変換

9 に答える 9

ノート

Related

Reference