c# - poner - tabla de colores html pdf

Algoritmo: ¿Cómo me desvanezco de Rojo a Verde a través de Amarillo usando valores RGB?

Question

Quiero mostrar un color basado en un valor de 0 a 100. En un extremo (100), es rojo puro, el otro extremo (0), verde puro. En el medio (50), quiero que sea amarillo.

Y quiero que los colores se desvanezcan gradualmente de uno a otro, de modo que a los 75, el color sea mitad rojo y mitad amarillo, etc.

¿Cómo programo los valores RGB para reflejar este desvanecimiento? Gracias.

Answer 1

Aquí hay una interpolación lineal muy simple de los componentes de color. Podría servir a sus necesidades.

public Color GetBlendedColor(int percentage)
{
if (percentage < 50)
return Interpolate(Color.Red, Color.Yellow, percentage / 50.0);
return Interpolate(Color.Yellow, Color.Lime, (percentage - 50) / 50.0);
}
private Color Interpolate(Color color1, Color color2, double fraction)
{
double r = Interpolate(color1.R, color2.R, fraction);
double g = Interpolate(color1.G, color2.G, fraction);
double b = Interpolate(color1.B, color2.B, fraction);
return Color.FromArgb((int)Math.Round(r), (int)Math.Round(g), (int)Math.Round(b));
}
private double Interpolate(double d1, double d2, double fraction)
{
return d1 + (d2 - d1) * fraction;
}

Answer 2

Asigné valores de velocidad de CPU entre 1400 MHz y 3500 MHz a valores de rgb () para obtener desde verde -> amarillo -> rojo con esta función

function green_yellow_red(core_MHz, core_id){
var core_color = ~~core_MHz.map(1400, 3500, 0, 510)
if(core_color < 255){
$(''#cpu_core_''+core_id).css(''background'', ''rgb(''+core_color+'',255 , 0)'')
}else{
core_color-=255
$(''#cpu_core_''+core_id).css(''background'', ''rgb(255 ,''+ (255-core_color) +'', 0)'')
}
}

Answer 3

Después de experimentar por un tiempo con colores más realistas, esta es mi fórmula:

public Color GetColorOf(double value, double minValue, double maxValue)
{
if (value == 0 || minValue == maxValue) return Color.White;
var g = (int)(240 * value / maxValue);
var r = (int)(240 * value / minValue);
return (value > 0
? Color.FromArgb(240 - g, 255 - (int)(g * ((255 - 155) / 240.0)), 240 - g)
: Color.FromArgb(255 - (int)(r * ((255 - 230) / 240.0)), 240 - r, 240 - r));
}

• No obtiene ningún fondo (es decir Color.White) para 0 (o NULL), o cuando min = max.
• Para todos los valores positivos, obtiene un color verde distribuido uniformemente entre RGB (240, 255, 240) y RGB (0, 155, 0).
• Para todos los valores negativos, obtiene un color rojo distribuido uniformemente entre RGB (255, 240, 240) y RGB (230, 0, 0).

Answer 4

Eche un vistazo a LinearGradientBrush . Debe ser una implementación completa de lo que estás buscando.

Answer 5

En su lugar, debe usar la representación de color HSB o HSV y jugar con el valor H ("Hue"). Vea esta otra pregunta AS para la transformación entre RGB y HSB / HSV: ¿Cómo cambiar el color RGB a HSV?

Answer 6

Escribí una extensión Swift 4 para UIColor que convierte un porcentaje (0-100) en un UIColor de rojo a verde.

Actualmente lo estoy usando para barras de progreso en una aplicación de análisis. Aquí hay un ejemplo:

let myNewColor = UIColor().greenRedProgress(percent: Int))

Aquí está la extensión:

extension UIColor{
func greenRedProgress(percent: Int) -> UIColor{
let modVal = CGFloat((Double(percent).truncatingRemainder(dividingBy: 50) / 50) * 255)
if percent <= 0{
return UIColor(red: 1.0, green: 0, blue: 0, alpha: 1)
}else if percent >= 100{
return UIColor(red: 0, green: 1.0, blue: 0, alpha: 1)
}else{
switch percent{
case 1..<50: return UIColor(red: 1.0, green: (modVal/255), blue: 0, alpha: 1)
case 51..<100: return UIColor(red: (255 - modVal)/255, green: 1.0, blue: 0, alpha: 1)
case 50: return UIColor(red: 1.0, green: 1.0, blue: 0, alpha: 1)
default: return UIColor(red: 0, green: 1.0, blue: 0, alpha: 1)
}
}
}}

Answer 7

Los valores RGB para los colores:

• Rojo 255, 0, 0
• Amarillo 255, 255, 0
• Verde 0, 255, 0

Entre Rojo y Amarillo, igualmente espacio sus adiciones al canal verde hasta que llegue a 255. Entre amarillo y verde, igualmente espacio sus sustracciones del canal rojo.

Answer 8

Método de extensión simplificado;

public static Color Interpolate(this Color source, Color target, double percent)
{
var r = (byte)(source.R + (target.R - source.R) * percent);
var g = (byte)(source.G + (target.G - source.G) * percent);
var b = (byte)(source.B + (target.B - source.B) * percent);
return Color.FromArgb(255, r, g, b);
}

Uso;

var low = 33.0;
var high = 100.0;
var color = Color.Red.Interpolate(Color.Green, low / high);

Answer 9

Necesitaba algo similar hoy. La entrada fue por ciento de 0.0 a 1.0 y la salida de rojo a verde. Implementación basada en la respuesta de jterrace:

Color percentToColor(float percent)
{
if (percent<0 || percent>1) { return Color.Black; }
int r, g;
if (percent<0.5)
{
r=255;
g = (int)(255*percent/0.5); //closer to 0.5, closer to yellow (255,255,0)
}
else
{
g=255;
r = 255 - (int)(255*(percent-0.5)/0.5); //closer to 1.0, closer to green (0,255,0)
}
return Color.FromArgb(r, g, 0);
}

Answer 10

No sé C #, por lo que esta respuesta es solo un enfoque sugerido. Deje x denotar el int que va de 0 a 100 . Algo como esto debería funcionar:

red = (x > 50 ? 1-2*(x-50)/100.0 : 1.0);
green = (x > 50 ? 1.0 : 2*x/100.0);
blue = 0.0

La idea es comenzar en rojo: (1.0,0.0,0.0) . Luego aumente el verde para obtener amarillo: (1.0,1.0,0.0) . Luego disminuya el rojo para ponerse verde: (0.0,1.0,0.0) .

Editar: Aquí está el código en C #

static Color GetColorFromRedYellowGreenGradient(double percentage)
{
var red = (percentage > 50 ? 1 - 2 * (percentage - 50) / 100.0 : 1.0) * 255;
var green = (percentage > 50 ? 1.0 : 2 * percentage / 100.0) * 255;
var blue = 0.0;
Color result = Color.FromArgb((int)red, (int)green, (int)blue);
return result;
}

Answer 11

Tenía la misma necesidad y acabo de resolver con esto:

myColor = new Color(2.0f * x, 2.0f * (1 - x), 0);

Explicación: En lugar del rango [0-255], centrémonos en el rango [0.0-1.0] para los componentes de color:

• Verde = 0.0, 1.0, 0.0
• Amarillo = 1.0, 1.0, 0.0
• Rojo = 1.0, 0.0, 0.0

Si solo escala el componente verde de 0.0 (en un extremo) a 1.0 (en el otro extremo) y hace lo mismo con el componente rojo (pero retrocede), obtendrá una distribución de color fea y no uniforme.

Para que se vea bien, podríamos escribir mucho código, o podríamos ser más inteligentes.

Si observa cuidadosamente los componentes individuales, verá que podemos dividir el rango en dos partes iguales: en el primero aumentamos el componente rojo de 0.0 a 1.0, dejando el verde en 1.0 y el azul en 0.0; en el segundo, disminuimos el componente verde, dejando los otros 2 tal como están. Podemos aprovechar el hecho de que cualquier valor superior a 1.0 se leerá como 1.0, al máximo nuestros valores para simplificar el código. Suponiendo que su valor de x va de 0.00 (0%) a 1.00 (100%), puede multiplicarlo por 2 para que supere el límite de 1.0 para los componentes de color. Ahora tiene sus componentes pasando de 0.0 a 2.0 (el rojo) y de 2.0 a 0.0 (el rojo). Deje que se recorten en rangos [0.0-1.0] y listo.

Si su x se mueve en otro rango (como [0-100]), debe elegir un factor apropiado en lugar de 2

Answer 12

solo necesitas crear una función con parámetro entero

• la entrada 100 devolverá RGB (100, 0, 0)
• la entrada 50 devolverá RGB (50, 50, 0)
• la entrada 0 devolverá RGB (0, 100, 0)
• la entrada 99 devolverá RGB (99, 1, 0)
• la entrada 98 devolverá RGB (98, 2, 0)
• la entrada 2 devolverá RGB (2, 98, 0)

• la entrada 1 devolverá RGB (1, 99, 0)

  private Color fader(int v){ return Color.FromArgb(v, 100-v, 0); }