pasteles - Códigos de color HTML: rojo a amarillo a verde

tabla de colores html pdf (12)

Acabo de tener un proyecto y comencé con una solución más o menos similar para jball y Asaph. Es decir, se incrementa gradualmente desde el rojo (FF0000) a (FFFF00) a (00FF00).

Sin embargo, descubrí que, visualmente, los cambios parecían ser mucho más drásticos en torno a "amarillo", mientras que apenas se notaban en "rojo" y "verde". Descubrí que podía compensar esto haciendo que los cambios fueran exponenciales en lugar de lineales, haciendo que los incrementos fueran más pequeños en torno a "amarillo" y más grandes alrededor de "rojo" y "verde". La solución (en Javascript) que resolví se veía así:

/** * Converts integer to a hexidecimal code, prepad''s single * digit hex codes with 0 to always return a two digit code. * * @param {Integer} i Integer to convert * @returns {String} The hexidecimal code */ function intToHex(i) { var hex = parseInt(i).toString(16); return (hex.length < 2) ? "0" + hex : hex; } /** * Return hex color from scalar *value*. * * @param {float} value Scalar value between 0 and 1 * @return {String} color */ function makeColor(value) { // value must be between [0, 510] value = Math.min(Math.max(0,value), 1) * 510; var redValue; var greenValue; if (value < 255) { redValue = 255; greenValue = Math.sqrt(value) * 16; greenValue = Math.round(greenValue); } else { greenValue = 255; value = value - 255; redValue = 256 - (value * value / 255) redValue = Math.round(redValue); } return "#" + intToHex(redValue) + intToHex(greenValue) + "00"; }

Esto produjo un gradiente mucho más suave cuando cambié el valor, y cambiar InputValue por cierto pareció afectar el color en más o menos el mismo grado independientemente del punto de partida.

Me gustaría encontrar tantos valores HEX HTML para tener un degradado de color suave desde el rojo al verde:

Me gustaría que esto sea similar al siguiente: http://www.utexas.edu/learn/html/colors.html

No tengo el mejor ojo para las elecciones de colores, por lo que espero que ya se haya preparado una tabla estándar que muestre cómo hacer la transición del rojo al amarillo y al verde sin problemas.

En ese sitio web "1 de 6" es más similar a lo que estoy buscando, pero ese ejemplo está limitado a 11 colores:

(1) FF0000 Red, (2) FF3300 Red(Orange) (3) ff6600 (4) ff9900 (5) FFCC00 Gold (6) FFFF00 Yellow (7) ccff00 (8) 99ff00 (9) 66ff00 (10) 33ff00 (11) 00FF00 Lime

Sería genial poder duplicar la cantidad de colores, pero hacer que la transición sea fluida.

Gracias por cualquier idea y ayuda.

Aquí hay un bonito degradado de verde a rojo

/* Green - Yellow - Red */ .gradient_0 {background: #57bb8a;} .gradient_5 {background: #63b682;} .gradient_10 {background: #73b87e;} .gradient_15 {background: #84bb7b;} .gradient_20 {background: #94bd77;} .gradient_25 {background: #a4c073;} .gradient_30 {background: #b0be6e;} .gradient_35 {background: #c4c56d;} .gradient_40 {background: #d4c86a;} .gradient_45 {background: #e2c965;} .gradient_50 {background: #f5ce62;} .gradient_55 {background: #f3c563;} .gradient_60 {background: #e9b861;} .gradient_65 {background: #e6ad61;} .gradient_70 {background: #ecac67;} .gradient_75 {background: #e9a268;} .gradient_80 {background: #e79a69;} .gradient_85 {background: #e5926b;} .gradient_90 {background: #e2886c;} .gradient_95 {background: #e0816d;} .gradient_100 {background: #dd776e;} /* Red - Yellow - Green */ .anti-gradient_100 {background: #57bb8a;} .anti-gradient_95 {background: #63b682;} .anti-gradient_90 {background: #73b87e;} .anti-gradient_85 {background: #84bb7b;} .anti-gradient_80 {background: #94bd77;} .anti-gradient_75 {background: #a4c073;} .anti-gradient_70 {background: #b0be6e;} .anti-gradient_65 {background: #c4c56d;} .anti-gradient_60 {background: #d4c86a;} .anti-gradient_55 {background: #e2c965;} .anti-gradient_50 {background: #f5ce62;} .anti-gradient_45 {background: #f3c563;} .anti-gradient_40 {background: #e9b861;} .anti-gradient_35 {background: #e6ad61;} .anti-gradient_30 {background: #ecac67;} .anti-gradient_25 {background: #e9a268;} .anti-gradient_20 {background: #e79a69;} .anti-gradient_15 {background: #e5926b;} .anti-gradient_10 {background: #e2886c;} .anti-gradient_5 {background: #e0816d;} .anti-gradient_0 {background: #dd776e;}

Aquí hay una manera simple pero sucia de generar estos colores:

COLORS = [ "FF00%0.2XFF" % x for x in range(0,260,5) ] + [ "FF00FF%0.2X" % x for x in range(250,-1,-5) ]

La codificación de color es para Google maps: aabbggrr.

Esto le dará una lista de 103 colores. Quité tres y luego indexé la lista usando un porcentaje como un entero.

Cuando tuve que hacer esto, mi elección fue cambiar de código hexadecimal a código rgb, que parecía más amigable con el cálculo.

Puede leer los detalles aquí:

http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/

Dependiendo de la cantidad de colores con los que desee terminar, la solución es simplemente aumentar el valor verde en una cierta cantidad, y luego cuando el verde esté al máximo ( FF ), disminuya el valor rojo repetidamente en la misma cantidad.

Pseudo-código:

int red = 255; //i.e. FF int green = 0; int stepSize = ?//how many colors do you want? while(green < 255) { green += stepSize; if(green > 255) { green = 255; } output(red, green, 0); //assume output is function that takes RGB } while(red > 0) { red -= stepSize; if(red < 0) { red = 0; } output(red, green, 0); //assume output is function that takes RGB }

Generando a mano, simplemente puede incrementar por 16, así:

FF0000 FF1000 FF2000 FF3000 FF4000 FF5000 FF6000 FF7000 FF8000 FF9000 FFA000 FFB000 FFC000 FFD000 FFE000 FFF000 FFFF00 //max, step by 15 F0FF00 //cheat, start with a -15 to simplify the rest E0FF00 D0FF00 C0FF00 B0FF00 A0FF00 90FF00 80FF00 70FF00 60FF00 50FF00 40FF00 30FF00 20FF00 10FF00

Hoy en día todos los navegadores modernos admiten gradientes de color en CSS que permiten gradientes totalmente suaves en cualquier ancho / alto. Sin embargo, todavía no todos los navegadores admiten el linear-gradient CSS oficial, por lo que para admitir todos los navegadores, use la siguiente clase de CSS:

.gradient { background: -moz-linear-gradient(left, red, yellow, green); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, red), color-stop(50%, yellow), color-stop(100%, green)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, red, yellow, green); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, red, yellow, green); /* Opera 11.10+ */ background: -ms-linear-gradient(left, red, yellow, green); /* IE10+ */ background: linear-gradient(to right, red, yellow, green); /* W3C */ }

Para obtener más referencias de las funciones de degradado de CSS, consulte los siguientes artículos en la Red de desarrolladores de Mozilla:

linear-gradient (también enumera los navegadores compatibles)
Usar gradientes de CSS

Un sitio web muy bueno para generar rápidamente gradientes de color completamente personalizados para todos los navegadores es el Generador de degradado CSS definitivo .

La mejor forma de hacerlo es comprender qué significan realmente los códigos de color hexadecimales. Una vez que comprenda esto, quedará claro cómo hacer gradientes de suavidad arbitraria. Los códigos de color hexadecimal son trillizos que representan los componentes rojo, verde y azul del color, respectivamente. Entonces, por ejemplo, en el color FF0000 , el componente rojo es FF , el componente verde es 00 y el componente azul es 00 . FF0000 ve rojo porque el componente rojo se marca hasta FF y el verde y azul se marcan hasta 00 . Del mismo modo, el verde puro es 00FF00 y el azul puro es 0000FF . Si convierte los números hexadecimales a decimal, obtendrá un valor entre 0 y 255 .

Entonces, ¿cómo se hace una gradiente de transición de rojo a amarillo a verde? Fácil; usted toma los puntos finales, decide cuántos pasos desea entre ellos, y luego camina uniformemente por cada uno de los 3 canales de color para pasar de un color al siguiente. A continuación se muestra un ejemplo en pasos de 11 hex ( 17 en decimal):

FF0000 <-- red FF1100 FF2200 FF3300 FF4400 FF5500 FF6600 FF7700 FF8800 FF9900 FFAA00 FFBB00 FFCC00 FFDD00 FFEE00 FFFF00 <-- yellow EEFF00 DDFF00 CCFF00 BBFF00 AAFF00 99FF00 88FF00 77FF00 66FF00 55FF00 44FF00 33FF00 22FF00 11FF00 00FF00 <-- green

Lo usé en una página php:

$percent = .....; //whatever the percentage you want to colour If ($percent <= 50) { $red = 255; $green = $percent * 5.1; } If ($percent >= 50) { $green = 255; $red = 255 - ($percent - 50) * 5.1; } $blue = 0;

Su RGB es entonces ($ rojo, $ verde, $ azul)

Nota: El factor 5.1 deriva de 255/50

Mi razón para encontrar esta pregunta fue que estaba tratando de hacer un indicador de tiempo de actividad de color para una tabla llena de dispositivos que "registran" cada hora. La idea es que sea roja al 0%, transición al amarillo al 50% y verde al 100%. Esto es, por supuesto, bastante inútil, pero fue una manera fácil de hacer que una mesa se vea más impresionante de lo que realmente era. Dado un mínimo, máximo y valor, devuelve valores rgb 0-255 para el color correcto. Asume una entrada válida.

function redYellowGreen(min, max, value) { var green_max = 220; var red_max = 220; var red = 0; var green = 0; var blue = 0; if (value < max/2) { red = red_max; green = Math.round((value/(max/2))*green_max); } else { green = green_max; red = Math.round((1-((value-(max/2))/(max/2)))*red_max); } var to_return = new Object(); to_return.red = red; to_return.green = green; to_return.blue = blue; return to_return; }

Por mi parte, resolví el problema con 2 pinceles:

float sweepAngle = 45.0F; // angle you want ... LinearGradientBrush linGrBrushUp = new LinearGradientBrush( new Point(0, 0), new Point(w, 0), Color.FromArgb(255, 0, 255, 0), // green Color.FromArgb(255, 255, 255, 0) // yellow ); LinearGradientBrush linGrBrushDown = new LinearGradientBrush( new Point(w, 0), new Point(0, 0), Color.FromArgb(255, 255, 255, 0), // yellow Color.FromArgb(255, 255, 0, 0) // red ); g.DrawArc( new Pen(linGrBrushUp, 5), x, y, w, h, 180.0F, sweepAngle>180.0F?180.0F:sweepAngle ); g.DrawArc( new Pen(linGrBrushDown, 5), x, y, w, h, 0.0F, sweepAngle>180.0F?sweepAngle-180.0F:0 );

Ver cualquier gráfico dará la ilusión de que los "códigos de color" son valores individuales que debe buscar. De hecho, la transición más suave que puede obtener es simplemente aumentar la cantidad de verde en el color y disminuir la cantidad de rojo.

Mira, los crípticos códigos hexadecimales en realidad no son en absoluto crípticos. Tienen seis dígitos, donde los dos primeros muestran la cantidad de rojo en el color, los dos medios muestran la cantidad de verde, y los dos últimos muestran la cantidad de azul.

Y a diferencia del conteo humano, cuando pasamos del 0 al 9 pasamos al siguiente valor de posición y obtenemos el 10, con el hexadecimal contamos todo hasta F. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10

Entonces, su objetivo es pasar de FF 00 00 (solo rojo, no verde o azul) a FF FF 00 (rojo mezclado con verde, que es amarillo), y finalmente a 00 FF 00 .

Como puedes hacer eso? Simplemente agregue un poco cada vez la cantidad verde hasta que llegue a FF, y luego empiece a alejarse un poco de la cantidad roja hasta que llegue a 00.

¿Y cuánto es "un poco"? Por mucho que creas necesario para lograr una transición sin problemas. Puede agregar 30 a la vez y obtener saltos muy importantes de un color a otro, o agregar 1 a la vez y hacer que la transición progrese más suavemente (pero quizás también más lentamente). Experimenta y ve lo que funciona para ti.

Funciona solo en Chrome y Safari

De NiceWebType.com :

<style type="text/css"> h1 { position: relative; font-size: 60px; line-height: 60px; text-shadow: 0px 0px 3px #000; } h1 a { position: absolute; top: 0; z-index: 2; color: #F00; -webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); } h1:after { content: "CSS Text Gradient (Webkit)"; color: #0F0; } </style> <h1><a>CSS Text Gradient (Webkit)</a></h1>