条件付き書式-パーセントから色への変換

StackOverflow https://stackoverflow.com/questions/25007

  •  09-06-2019
  •  | 
  •  

質問

緑（100％）から赤（0％）の範囲の色にパーセンテージを変換する最も簡単な方法は何ですか？

単純な32ビットRGBを使用しているため、各コンポーネントは0〜255の整数です。C＃でこれを実行していますが、このような問題の場合、言語はそれほど重要ではありません。

マリウスとアンディの回答に基づいて、私は次のソリューションを使用しています：

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);

完全に動作する-Mariusソリューションから行う必要がある調整は、256を使用することだけでした。（255-（パーセント-50）* 5.12は、100％の場合は-1になり、Silverlightでは何らかの理由で黄色になります（-1 255、0）-＆gt;黄色...

役に立ちましたか？

解決

この関数は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)";
}

他のヒント

おそらくやりたいことは、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）、目的に合わせて色を調整したい場合があります（赤や緑が「純粋」ではないことを嫌う人もいます）。

ご覧ください：

擬似コード。

  • 0-50％の場合、16進値はFFxx00になります。

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

  • 50-100の場合、16進値はxxFF00となります。

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

助けになり、理解できる希望。

これは、現在受け入れられている答えを次の3つの方法で改善する、すっきりとしたきれいなソリューションです。

  1. マジックナンバー（5.12）を削除するため、コードを追跡しやすくなります。
  2. パーセンテージが100％の場合、-1を与える丸め誤差は生成されません。
  3. 使用する最小および最大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％に制限します。

JavaScriptコードに基づいてこのPython関数を作成しました。パーセンテージは小数として必要です。また、パーセンテージスケールを長くするために色を赤く保つために値を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'

黄色は赤と緑の組み合わせなので、おそらく＃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);
}

次の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"

別のルーチンがこれをラップして、＆quot;条件付き書式設定＆quot;の数値をうまくブレンドします：

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

したがって、Jonasの場合：

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

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;

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top