少し誤解しているかもしれませんが、javaScriptは色を16進数としてモデル化せず、システムもモデル化しません。16進表記は、人間が読めるドキュメント用です。システムは内部的に3つの整数値を格納します。これらを直接クエリして操作できます。
しかし、システム内部ではなく実際のドキュメントを操作したいとだけ言ってください。次に、これを行うライブラリに計算を延期するのが最善です。ブラウザーはさまざまな方法で色を表現できるので、ad rgbやhsv入力など、あらゆる種類のケースをプログラムする必要があります。ですから、Color.jsのようなものを使用することをお勧めします。ブレンド、暗くする、明るくするなどを自分で実装する必要がないため、頭痛が大幅に軽減されます。
Edity：
これを自分で行いたい場合は、お勧めしません。hexarepresentationを整数の数値トリプレットまたは0〜1の範囲の浮動小数点数に変換することから始めます。これにより、計算が容易になります。
色を簡単に操作できるように、RGB値をHSLまたはHSBに変換すると、明るさの計算が簡単になります（Wikipediaに公式があります）。したがって、明度または明るさを加算または減算します。実際の光のシミュレーションでは、計算は光の色にベース色を掛けるだけで十分簡単です。したがって、ニュートラルライトの場合は次のようになります。
結果=強度*色
ラファエルが説明したように、カラーチャンネルによって式が繰り返されます。あなたは色のついた光をシミュレートすることができます
結果=強度* LigtColor *色
これを最初に浮動小数点に変換するために、おそらく線形も。これはあなたの地域に暖かいか涼しい光を与えて、より自然な感じをもたらすことができます。
アルファブレンディング（他の色の上に色を重ねる）は簡単です
結果= 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これのほとんどは実際にはすでにstackoverfowで見つけることができるため、stackoverflowで確認する必要があります。
