Mise en forme conditionnelle – pourcentage de conversion en couleur

https://stackoverflow.com/questions/25007

09-06-2019
|

Question

Quelle est la manière la plus simple de convertir un pourcentage en une couleur allant du vert (100 %) au rouge (0 %), avec du jaune pour 50 % ?

J'utilise du RVB 32 bits simple - donc chaque composant est un entier compris entre 0 et 255.Je fais cela en C#, mais je suppose que pour un problème comme celui-ci, le langage n'a pas vraiment d'importance.

Sur la base des réponses de Marius et Andy, j'utilise la solution suivante :

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

Fonctionne parfaitement - Le seul ajustement que j'ai dû faire à partir de la solution Marius était d'utiliser 256, car (255 - (pour cent - 50) * 5,12 rendement -1 à 100 %, ce qui donne du jaune pour une raison quelconque dans Silverlight (-1, 255, 0 ) -> Jaune...

La solution

J'ai créé cette fonction en JavaScript.Il renvoie la couleur est une chaîne CSS.Il prend le pourcentage comme variable, avec une plage de 0 à 100.L'algorithme peut être réalisé dans n'importe quelle langue :

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

Autres conseils

Ce que vous voulez probablement faire est d'attribuer à vos 0 % à 100 % quelques points dans un espace colorimétrique HSV ou HSL.À partir de là, vous pouvez interpoler les couleurs (et le jaune se trouve justement entre le rouge et le vert :) et convertissez-les en RVB.Cela vous donnera un joli dégradé entre les deux.

En supposant que vous utiliserez la couleur comme indicateur d'état et du point de vue de l'interface utilisateur, ce n'est probablement pas une si bonne idée, car nous sommes assez mauvais pour voir de petits changements de couleur.Ainsi, diviser la valeur en, par exemple, trois à sept catégories vous donnerait des différences plus visibles lorsque les choses changent, au prix d'une certaine précision (que vous ne seriez probablement pas en mesure d'apprécier de toute façon).

Donc, tous les calculs mis à part, en fin de compte, je recommanderais une table de recherche avec les couleurs suivantes, v étant la valeur d'entrée :

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

Celles-ci ont été très naïvement converties à partir des valeurs 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) et vous souhaiterez peut-être ajuster quelque peu les couleurs en fonction de vos besoins (certains n'aiment pas que le rouge et le vert ne soient pas « purs »).

S'il te plait regarde:

Utilisation de la couleur HSL (teinte, saturation, luminosité) pour créer des interfaces graphiques plus esthétiques pour une discussion et
Conversions d'espace colorimétrique RVB et HSL pour un exemple de code source C#.

En pseudocode.

De 0 à 50 %, votre valeur hexadécimale serait FFxx00 où :
```
XX = ( Percentage / 50 ) * 255 converted into hex.
```
Entre 50 et 100, votre valeur hexadécimale serait xxFF00 où :
```
XX = ((100-Percentage) / 50) * 255 converted into hex.  
```

J'espère que cela aide et est compréhensible.

Il s'agit d'une solution propre et intéressante qui améliore la réponse actuellement acceptée de trois manières :

Supprime le nombre magique (5.12), rendant ainsi le code plus facile à suivre.
Ne produira pas l'erreur d'arrondi qui vous donne -1 lorsque le pourcentage est de 100 %.
Vous permet de personnaliser les valeurs RVB minimales et maximales que vous utilisez, afin que vous puissiez produire une plage plus claire ou plus sombre que le simple RVB (255, 0, 0) - RVB (0, 255, 0).

Le code affiché est C# mais il est trivial d'adapter l'algorithme à n'importe quel autre langage.

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

Remarques

Voici un tableau simple montrant quelques valeurs en pourcentage et les proportions de rouge et de vert correspondantes que nous souhaitons produire :

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

J'espère que vous pourrez voir assez clairement que

la valeur verte est 2x la valeur en pourcentage (mais plafonnée à 100)
le rouge est l'inverse :2x (100 - pourcentage) (mais plafonné à 100)

Mon algorithme calcule donc les valeurs à partir d'un tableau ressemblant à ceci...

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

...puis utilise Math.Min() pour les plafonner à 100 %.

J'ai écrit cette fonction python basée sur le code javascript.il prend un pourcentage sous forme décimale.J'ai également mis la valeur au carré pour garder les couleurs plus rouges plus longtemps sur l'échelle de pourcentage.J'ai également réduit la gamme de couleurs de 255 à 180 pour donner un rouge et un vert plus foncés à chaque extrémité.on peut jouer avec pour donner de jolies couleurs.J'aimerais ajouter une touche d'orange au milieu, mais je dois faire un bon travail, 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'

Comme le jaune est un mélange de rouge et de vert, vous pouvez probablement commencer par #F00 puis faites glisser le vert vers le haut jusqu'à ce que vous atteigniez #FF0, puis faites glisser le rouge vers le bas #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);
}

J'utilise les routines Python suivantes pour mélanger les couleurs :

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

Par exemple:

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

Une autre routine enveloppe cela pour bien mélanger les valeurs numériques pour le « formatage conditionnel » :

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

Ainsi, dans le cas de Jonas :

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

Ma solution pour 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;

Comme il s'agit de RVB, les couleurs vont de valeurs entières de -1 (blanc) à -16777216 pour le noir.avec du rouge, du vert et du jaune quelque part au milieu.Le jaune vaut en fait -256, tandis que le rouge vaut -65536 et le vert vaut -16744448.Le jaune n'est donc pas entre le rouge et le vert dans la notation RVB.Je sais qu'en termes de longueurs d'onde, le vert est d'un côté et le rouge de l'autre côté du spectre, mais je n'ai jamais vu ce type de notation utilisé dans les ordinateurs, car le spectre ne représente pas toutes les couleurs visibles.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow