您有点误解了，javaScript不会将颜色建模为十六进制，系统也不会。十六进制表示法仅用于人类可读的文档。您的系统在内部存储三个整数值。您可以查询和直接操作它们。
但是，仅说您要操作实际文档而不是系统内部。然后最好将您的计算推迟到为您执行此操作的某个库中。您会看到浏览器可以多种方式表示颜色，因此您需要对各种情况进行编程，例如ad rgb和hsv输入。因此，我建议您使用Color.js之类的方法，这样可以避免很多麻烦，因为您不需要自己实现混合，变暗，变亮等。
编辑：
如果您想自己做，我不建议这样做。首先将六边形表示转换为0-1范围内的整数或浮点数的数字三元组，这使计算更加容易。
现在，为了轻松进行颜色转换，将RGB值转换为HSL或HSB，这使亮度计算变得不那么容易了（维基百科提供了公式）。因此，只需添加或减去亮度或亮度。对于真实光仿真，只需将光色乘以基色即可轻松进行计算。因此，对于中性光而言，其简单之处在于：
结果=强度*颜色
正如拉斐尔（Rafael）解释的那样，公式按颜色通道重复。您可以通过以下方式模拟彩色光
结果=强度* LigtColor *颜色
为此，最好先转换为浮点，也可能是线性的。这样可以在您的区域提供温暖或凉爽的光线，从而带来更自然的感觉。
Alpha混合（颜色叠加在其他颜色之上）很简单
结果= ColorTop * alpha + ColorBottom *（1-alpha）
最终编辑
最后，这里是一些代码，可以对您的要求做出某些反应。很难看到它的原因是它现在的形式有点抽象。现场代码在这里
图1：下面的代码结果另请参见实时版本。
{
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，您应该在stackoverflow上询问，因为实际上大多数都可以在stackoverfow上找到。
