Você entendeu um pouco as coisas, o javaScript não modela a cor como hexadecimal, nem o sistema. A notação hexadecimal é apenas para o documento legível por humanos. Internamente, seu sistema armazena três valores inteiros. Você pode consultar e manipular esses diretamente.
Mas digamos que você deseja manipular o documento real em vez dos internos do sistema. Então é melhor adiar seu cálculo para alguma biblioteca que faz isso por você. Você vê que o navegador pode representar cores de várias maneiras; portanto, é necessário programar todos os tipos de casos, como entradas ad rgb e hsv. Então, sugiro que você use algo como o Color.js , para evitar muita dor de cabeça, pois você não precisa implementar misturas, escurecimento, iluminação, etc ... você mesmo.
Edity:
Caso você queira fazer isso sozinho, o que eu não recomendo. Comece transformando a representação hexadecimal em trigêmeos numéricos de números inteiros ou números de ponto flutuante no intervalo 0-1, para facilitar a computação.
Agora, para facilitar a manipulação dos valores de conversão de cores RGB em HSL ou HSB, isso facilita os cálculos de brilho (a Wikipedia possui formulações). Então, basta adicionar ou subtrair a luminosidade ou o brilho. Para simulação de luz real, o cálculo é fácil o suficiente, basta multiplicar a cor da luz pela cor de base. Assim, para luz neutra, é simplesmente:
Resultado = Intensidade * Cor
Como Rafael explicou, fórmula repetida por canal de cores. Você pode simular a luz colorida fazendo
Resultado = Intensidade * LigtColor * Cor
Para isso, é melhor converter primeiro para flutuar, talvez também linear. Isso permite luz quente ou fria na sua área, o que pode trazer uma sensação mais natural.
A mistura alfa (camada de cor sobre a outra) é simplesmente
Resultado = ColorTop * alfa + ColorBottom * (1-alfa)
Edição final
Finalmente, aqui está um código que faz algo em relação ao que você pergunta. A razão pela qual isso é difícil de entender é que seu tipo de resumo está em forma no momento. Código ao vivo disponível aqui
Imagem 1 : Resultado do código abaixo, veja também a versão ao 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);
}
}
PS: você deve perguntar no stackoverflow, já que quase tudo isso já pode ser encontrado no stackoverfow.