Bedingte Formatierung - Prozentsatz an Farbkonvertierung

https://stackoverflow.com/questions/25007

09-06-2019
|

Frage

Was ist der einfachste Weg, einen bestimmten Prozentsatz zu einer Farbe im Bereich von Green (100%) bis Rot (0%), mit Gelb für 50%?

konvertieren

Ich verwende Ebene 32bit RGB - so jede Komponente eine ganze Zahl zwischen 0 und 255. Ich bin dies in C # zu tun, aber ich denke, für ein Problem, wie dies die Sprache nicht wirklich wichtig, dass viel

Auf der Grundlage von Marius und Andys Antworten ich die folgende Lösung verwendet:

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

Funktioniert perfekt - nur Einstellung ich von Marius Lösung machen musste, waren 256 zu verwenden, wie (255 - (Prozent - 50) * 5,12 Ausbeute -1, wenn 100%, was in Gelb aus irgendeinem Grunde in Silverlight (-1, 255, 0) -> Gelb ...

Lösung

Ich habe diese Funktion in JavaScript. Es gibt die Farbe ein CSS-String ist. Es nimmt den Prozentsatz als eine Variable, mit einem Bereich von 0 bis 100. Der Algorithmus könnte in jeder Sprache vorgenommen werden:

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

Andere Tipps

Was möchten Sie wahrscheinlich zu tun ist, um 0% bis 100%, einige Punkte in einem HSV oder HSL-Farbraum zuweisen. Von dort können Sie Farben interpolieren (und gelb gerade passiert zwischen rot und grün :) und wandeln sie in RGB sein . Das gibt Ihnen eine gut aussehende Gefälle zwischen den beiden.

Unter der Annahme, dass Sie die Farbe als Statusanzeige verwenden und von einer Benutzer-Interface Perspektive jedoch, dass wahrscheinlich nicht so eine gute Idee, da wir sehen, kleine Veränderungen in der Farbe ziemlich schlecht sind. So Teilung des Wertes in zum Beispiel drei vor sieben Eimer würden Sie mehr wahrnehmbare Unterschiede geben, wenn die Dinge zu ändern, um den Preis einiger Genauigkeit (die Sie wahrscheinlich sowieso nicht zu schätzen, wäre in der Lage).

Also, alle die Mathematik beiseite, am Ende würde ich eine Look-up-Tabelle mit den folgenden Farben mit v der Eingabewert empfehlen:

#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%

Diese wurden sehr naiv von HSL-Werten umgewandelt (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 ), und Sie können die Farben etwas anpassen möchten Ihre Zwecke anpassen (manche mögen es nicht, dass rot und grün sind nicht ‚rein‘).

Bitte beachten Sie:

Verwendung von HSL Farbe (Farbton, Sättigung, Luminanz) zu erstellen, besser aussehende GUIs für einige Diskussion und
RGB und HSL Farbraumkonvertierungen für Probe C # Source-Code.

In Pseudo-Code.

Von 0-50% Ihres Hex-Wert wäre FFxx00 wo:

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

Von 50 bis 100 Ihr Hex-Wert wäre xxFF00 wo:

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

Ich hoffe, das hilft und ist verständlich.

Dies ist eine schöne, saubere Lösung, die auf drei Arten auf der derzeit akzeptierte Antwort verbessert:

Entfernt die magische Zahl (5.12), also den Code leichter zu folgen.
Wird der Rundungsfehler nicht erzeugen, die Sie ist zu geben -1, wenn der Anteil 100%.
Hier können Sie die minimalen und maximalen RGB-Werte Sie verwenden anpassen, so dass Sie einen helleren oder dunklere Bereich als einfacher rgb produzieren können (255, 0, 0) -. Rgb (0, 255, 0)

Der Code gezeigt ist C #, aber es ist trivial, den Algorithmus zu einer anderen Sprache anzupassen.

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

Notizen

Hier ist eine einfache Tabelle zeigt einige Prozentwerte und die entsprechenden roten und grünen Anteile wollen wir produzieren:

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

Hoffentlich kann man ziemlich deutlich sehen, dass

der grüne Wert wird 2x den Prozentwert (aber bei 100 capped)
die rote ist die inverse: 2x (100 - Prozentsatz) (aber bei 100 capped)

Also mein Algorithmus berechnet die Werte aus einer Tabelle etwas wie folgt aussehen ...

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

... und verwendet dann Math.Min() sie zu 100% zu begrenzen.

Ich schrieb diese Python-Funktion auf dem JavaScript-Code basiert. es nimmt einen Prozentsatz als Dezimalzahl. Ich habe auch den Wert quadriert die Farben röter länger auf der Prozentskala zu halten. I verengt auch den Bereich der Farben 255 bis 180 geben eine dunklere Rot und Grün an jedem Ende. diese können mit gespielt werden schöne Farben zu geben. Ich möchte einen Hauch von Orange in der Mitte hinzufügen, aber ich muss mit der richtigen Arbeit bekommen auf, boo.

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

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

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

Als Gelb ist eine Mischung aus Rot und Grün, werden Sie wahrscheinlich mit #F00 beginnen und dann grün schieben, bis Sie #FF0 schlagen, dann rot nach unten rutschen zu #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);
}

Ich verwende die folgenden Python-Routinen zwischen den Farben zu mischen:

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

Zum Beispiel:

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

Eine andere Routine Wraps dies für „bedingte Formatierung“ schön zwischen numerischen Werten mischen:

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

Also, in Jonas' Fall:

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

Meine Lösung für 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;

Weil es R-G-B, die Farben gehen von ganzzahligen Werten von -1 (weiß), zu -16777216 für Schwarz. mit roten, grünen und gelben irgendwo in der Mitte dieser. Gelb ist eigentlich -256, während rote -65536 und grün ist -16744448. So gelb ist eigentlich nicht zwischen Rot und Grün in der Notation RGB. Ich weiß, dass in Bezug auf die Wellenlängen, grün auf der einen Seite ist, und rot ist auf der anderen Seite des Spektrums, aber ich habe nie diese Art der Notation in Computern gesehen, wie sich das Spektrum nicht alle sichtbaren Farben darstellt.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow