Has entendido mal las cosas un poco, javaScript no modela el color como hexadecimal, ni el sistema. La notación hexadecimal es solo para el documento legible por humanos. Internamente su sistema almacena tres valores enteros. Puede consultarlos y manipularlos directamente.
Pero digamos que desea manipular el documento real en lugar de los elementos internos del sistema. Entonces es mejor diferir su cálculo a alguna biblioteca que haga esto por usted. Verá que el navegador puede representar colores de muchas maneras, por lo que necesitaría programar todo tipo de casos, como entradas de anuncios rgb y hsv. Por lo tanto, le sugiero que use algo como Color.js, le ahorrará mucho dolor de cabeza, ya que no necesita implementar mezclas, oscurecimientos, aclaraciones, etc. usted mismo.
Edity
En caso de que quiera hacer esto usted mismo, no lo recomiendo. Comience por convertir la representación hexadecimal en tripletes numéricos de enteros o números de coma flotante en el rango 0-1, esto facilita el cálculo.
Ahora, para una fácil manipulación de los valores de conversión de color RGB a HSL o HSB, esto hace que los cálculos de brillo sean triviales (Wikipedia tiene formulaciones). Entonces, simplemente agregue o reste ligereza o brillo. Para la simulación de luz real, el cálculo es bastante fácil, simplemente multiplique el color de la luz por el color base. Por lo tanto, para luz neutral es simplemente:
Resultado = Intensidad * Color
Como explicó Rafael, la fórmula se repite por canal de color. Puedes simular luz de color haciendo
Resultado = Intensidad * LigtColor * Color
Para esto es mejor convertir a flotante primero, quizás también lineal. Esto permite una luz cálida o fría en su área que puede brindar una sensación más natural.
La mezcla alfa (capa de color encima de otra) es simplemente
Resultado = ColorTop * alpha + ColorBottom * (1-alpha)
Edición final
Finalmente, aquí hay un código que hace algo hacia lo que pides. La razón por la que esto es difícil de ver es porque es una especie de resumen en forma en este momento. Código en vivo disponible aquí
Imagen 1 : Resultado del código a continuación, vea también la versión en vivo .
{
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var Color = function(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
Color.prototype.asHex = function() {
return "#" + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
}
Color.prototype.asRGB = function() {
return 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')';
}
Color.prototype.blendWith = function(col, a) {
r = Math.round(col.r * (1 - a) + this.r * a);
g = Math.round(col.g * (1 - a) + this.g * a);
b = Math.round(col.b * (1 - a) + this.b * a);
return new Color(r, g, b);
}
Color.prototype.Mul = function(col, a) {
r = Math.round(col.r/255 * this.r * a);
g = Math.round(col.g/255 * this.g * a);
b = Math.round(col.b/255 * this.b * a);
return new Color(r, g, b);
}
Color.prototype.fromHex = function(hex) {
// http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
hex = hex.substring(1,7)
var bigint = parseInt(hex, 16);
this.r = (bigint >> 16) & 255;
this.g = (bigint >> 8) & 255;
this.b = bigint & 255;
}
ctx.font = "16px Arial";
ctx.fillText("Manual Alpha Blend", 18, 20);
var a = new Color(220, 0, 150);
var b = new Color();
b.fromHex('#00C864');
//Alpha blend
ctx.fillStyle = a.asHex();
ctx.fillRect(25, 25, 100, 100);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(a.asHex(), 30, 45);
ctx.fillStyle = b.asRGB()
ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(a.asHex(), 55, 145);
var bl = a.blendWith(b, 0.3);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(50, 50, 75, 75);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(bl.asHex(), 55, 70);
// lighten 1
ctx.fillStyle = '#000000';
ctx.fillText('Neutral Light', 200, 20);
var c = new Color(100, 100, 100);
var purelight= new Color(255, 255, 255);
ctx.fillStyle = c.asRGB();
ctx.fillRect(200, 25, 100, 100);
var bl = c.Mul(purelight,1.2);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(225, 50, 100, 100);
var bl = c.Mul(purelight, 0.8);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(250, 75, 100, 100);
// lighten 2
ctx.fillStyle = '#000000';
ctx.fillText('Yellowish Light', 400, 20);
var c = new Color(100, 100, 100);
var yellowlight= new Color(255, 255, 220);
var bl = c.Mul(yellowlight,1.0);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(400, 25, 100, 100);
var bl = c.Mul(yellowlight,1.2);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(425, 50, 100, 100);
var bl = c.Mul(yellowlight, 0.8);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(450, 75, 100, 100);
}
}
PD: debe preguntar en stackoverflow ya que la mayoría de esto ya se puede encontrar en stackoverfow.
