javascript - sublime - tabla de colores html pdf
Genere colores entre rojo y verde para un rango de entrada (3)
De una manera muy ondulada, creo que lo haría de esta manera:
Haga que el rango de 1 a 50 tenga el máximo verde (FF), y un valor escalado tanto para el rojo como para el azul, desde 00 para el rojo y el azul en 1, hasta FF para el rojo y el azul en 50.
(Valores de muestra: 1 -> 00FF00, 25 -> 7FFF7F, 50 -> FFFFFF)
Luego, desde el 51 al 100, manténgase rojo en FF, mientras reduce la escala azul y verde para que el azul y el verde se acerquen a 0 cuando llegue a 100.
(Valores de muestra: 51 -> FFFFFF, 75 -> FF7F7F, 100 -> FF0000)
Esto está garantizado para darle un color verde brillante a 0, blanco a 50 y rojo a 100.
Es posible que las áreas intermedias no sean exactamente perfectas, simplemente porque el ojo interpreta diferentes intensidades de color de manera diferente (somos mejores en algunos colores que en otros), pero debería acercarse bastante.
Modifiqué el código en tu violín a lo siguiente, y hace lo que describo:
$(document).on({
change: function(e) {
var self = this,
span = $(self).parent("span"),
val = parseInt(self.value);
if (val > 100) {
val = 100;
}
else if (val < 0) {
val = 0;
}
$(".value", span).text(val);
if (val <= 50)
{
r = Math.floor((255 * (val / 50))),
g = 255,
b = Math.floor((255 * (val / 50)));
}
else
{
r = 255,
g = Math.floor((100 - val) / 50 * 255),
b = Math.floor((100 - val) / 50 * 255);
}
span.css({
backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
});
}
}, "input[type=''range'']");
Posible duplicado:
Codificación por colores basada en el número
Quiero que un usuario pueda seleccionar entre un rango de 1 a 100, donde a medida que los números son menores que 50, el color del área se vuelve verde oscuro, y cuando el color se acerca a 100, el color se vuelve más rojo. .
Estoy tratando de hacerlo de manera que a medida que el rango se acerque más hacia el centro, el color debería ser cercano al blanco (donde 50 = blanco completo).
Intenté la respuesta desde aquí: ¿ Generar colores entre rojo y verde para un medidor de potencia? En vano .... 50 termina siendo un verde confuso ...
Tengo el siguiente html:
<span><span class="value">50</span><input type="range" /></span>
Y el siguiente javascript:
$(document).on({
change: function(e) {
var self = this,
span = $(self).parent("span"),
val = parseInt(self.value);
if (val > 100) {
val = 100;
}
else if (val < 0) {
val = 0;
}
$(".value", span).text(val);
var r = Math.floor((255 * val) / 100),
g = Math.floor((255 * (100 - val)) / 100),
b = 0;
span.css({
backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
});
}
}, "input[type=''range'']");
Fiddle: http://jsfiddle.net/maniator/tKrM9/1/
He probado muchas combinaciones diferentes de r, g, b pero parece que no puedo hacerlo bien.
Se está volviendo verde confuso debido a la forma en que está creando su gradiente en el espacio RBG. Para obtener un gradiente "más limpio", puede usar el modelo HSV como se menciona en la respuesta de la pregunta a la que se vinculó .
Gradiente RGB (arriba) vs HSV (abajo)
Al escalar el valor H (tono) entre 0 (rojo) y 120 (verde) obtendrá una transición limpia y agradable. Sin embargo, en el punto medio (60) terminarás con amarillo brillante en lugar del blanco deseado. Puede abordar esto modificando el valor de S (saturación): con una saturación de 0, terminará con blanco (1 le ofrece una saturación de color total).
Aquí hay un ejemplo simple que escala la saturación de 1 a 0 y vuelve a 1 cuando el valor de entrada va de 0 a 50 a 100 - http://jsfiddle.net/xgJ2e/2/
var hue = Math.floor((100 - val) * 120 / 100); // go from green to red
var saturation = Math.abs(val - 50)/50; // fade to white as it approaches 50
ps. Convertir entre modelos de color es fácil usando jquery-colors , aunque no es demasiado difícil hacerlos tuyos.
Se me ocurrió esta respuesta con algo de ayuda desde here , que utiliza una función de Interpolate en la que puedo configurar los colores de inicio y final fácilmente.
function Interpolate(start, end, steps, count) {
var s = start,
e = end,
final = s + (((e - s) / steps) * count);
return Math.floor(final);
}
function Color(_r, _g, _b) {
var r, g, b;
var setColors = function(_r, _g, _b) {
r = _r;
g = _g;
b = _b;
};
setColors(_r, _g, _b);
this.getColors = function() {
var colors = {
r: r,
g: g,
b: b
};
return colors;
};
}
$(document).on({
change: function(e) {
var self = this,
span = $(self).parent("span"),
val = parseInt(self.value),
red = new Color(232, 9, 26),
white = new Color(255, 255, 255),
green = new Color(6, 170, 60),
start = green,
end = white;
$(".value", span).text(val);
if (val > 50) {
start = white,
end = red;
val = val % 51;
}
var startColors = start.getColors(),
endColors = end.getColors();
var r = Interpolate(startColors.r, endColors.r, 50, val);
var g = Interpolate(startColors.g, endColors.g, 50, val);
var b = Interpolate(startColors.b, endColors.b, 50, val);
span.css({
backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
});
}
}, "input[type=''range'']");