mzechmeister/gist:943ce68c9c84d662cea1ecd42bc3064b

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Convert RGBA to RGB</title>
<style>
   #divrgba, #divresult {
      width: 120%;
      padding: 8px;
   }
   keyword {
      color: rgb(255, 0, 200);
   }
   literal {
      color: rgb(42, 42, 200);
   }
</style>
</head>

<body>
<div id="divbg" style="padding: 10px; width: 80%">
    RGB_background
    <input id='hex_bg' value="#af9" oninput="recalculate()"/>
    <input id='rgb_bg' oninput="hex_bg.value = '#' + this.value.split(',').map(x => (+x).toString(16).padStart(2,0)).join(''); recalculate()"/>
    <div id="divrgba">
        RGBA_color
        <input id='hex_rgba' oninput="recalculate()" value="#4446"/>
        <input id='rgb_rgba' onchange="[r, g, b, a] = rgb_rgba.value.split(','); hex_rgba.value = '#' + [r, g, b, Math.round(a*255)].map(x => (+x).toString(16).padStart(2,0)).join(''); recalculate()"/>
    </div>
    <div id="divresult">
        RGB_result
        <input id="hex_result" readonly="">
        <input id="rgb_result" readonly="">
    </div>
</div>

<h3>Source code</h3>
<pre><keyword>function</keyword> rgba2rgb(RGB_background, RGBA_color) {
    <keyword>var</keyword> alpha = RGBA_color.a;

    <keyword>return new</keyword> Color(
        (<literal>1</literal> - alpha) * RGB_background.r + alpha * RGBA_color.r,
        (<literal>1</literal> - alpha) * RGB_background.g + alpha * RGBA_color.g,
        (<literal>1</literal> - alpha) * RGB_background.b + alpha * RGBA_color.b
    );
}</pre>

</body>

<script>
function Color(r, g, b, a) {
    col = {}
      col.r = r;
      col.g = g;
      col.b = b;
      col.a = typeof +a == "number" ? a : 1;
    return col;
}

rgba2rgb = function (background, rgba) {
      var alpha = rgba.a;

      return [(1-alpha) * background.r + alpha * rgba.r,
              (1-alpha) * background.g + alpha * rgba.g,
              (1-alpha) * background.b + alpha * rgba.b]
};

function recalculate() {
    divbg.style.backgroundColor = hex_bg.value;
    rgb_bg.value = divbg.style.backgroundColor.split(/[()]/)[1]
    divrgba.style.backgroundColor = hex_rgba.value;
    rgb_rgba.value = divrgba.style.backgroundColor.split(/[()]/)[1]

    rgb = Color(...rgb_bg.value.split(","));
    rgba = Color(...rgb_rgba.value.split(","));

    divresult.style.backgroundColor = hex_result.value = "#"+rgba2rgb(rgb, rgba).map(x => Math.round(x).toString(16).padStart(2,0)).join('')
    rgb_result.value = divresult.style.backgroundColor.split(/[()]/)[1]
}

recalculate();
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Convert RGBA to RGB</title>
	<style>
	#divrgba, #divresult {
	width: 120%;
	padding: 8px;
	}
	keyword {
	color: rgb(255, 0, 200);
	}
	literal {
	color: rgb(42, 42, 200);
	}
	</style>
	</head>

	<body>
	<div id="divbg" style="padding: 10px; width: 80%">
	RGB_background
	<input id='hex_bg' value="#af9" oninput="recalculate()"/>
	<input id='rgb_bg' oninput="hex_bg.value = '#' + this.value.split(',').map(x => (+x).toString(16).padStart(2,0)).join(''); recalculate()"/>
	<div id="divrgba">
	RGBA_color
	<input id='hex_rgba' oninput="recalculate()" value="#4446"/>
	<input id='rgb_rgba' onchange="[r, g, b, a] = rgb_rgba.value.split(','); hex_rgba.value = '#' + [r, g, b, Math.round(a*255)].map(x => (+x).toString(16).padStart(2,0)).join(''); recalculate()"/>
	</div>
	<div id="divresult">
	RGB_result
	<input id="hex_result" readonly="">
	<input id="rgb_result" readonly="">
	</div>
	</div>

	<h3>Source code</h3>
	<pre><keyword>function</keyword> rgba2rgb(RGB_background, RGBA_color) {
	<keyword>var</keyword> alpha = RGBA_color.a;

	<keyword>return new</keyword> Color(
	(<literal>1</literal> - alpha) * RGB_background.r + alpha * RGBA_color.r,
	(<literal>1</literal> - alpha) * RGB_background.g + alpha * RGBA_color.g,
	(<literal>1</literal> - alpha) * RGB_background.b + alpha * RGBA_color.b
	);
	}</pre>

	</body>

	<script>
	function Color(r, g, b, a) {
	col = {}
	col.r = r;
	col.g = g;
	col.b = b;
	col.a = typeof +a == "number" ? a : 1;
	return col;
	}

	rgba2rgb = function (background, rgba) {
	var alpha = rgba.a;

	return [(1-alpha) * background.r + alpha * rgba.r,
	(1-alpha) * background.g + alpha * rgba.g,
	(1-alpha) * background.b + alpha * rgba.b]
	};

	function recalculate() {
	divbg.style.backgroundColor = hex_bg.value;
	rgb_bg.value = divbg.style.backgroundColor.split(/[()]/)[1]
	divrgba.style.backgroundColor = hex_rgba.value;
	rgb_rgba.value = divrgba.style.backgroundColor.split(/[()]/)[1]

	rgb = Color(...rgb_bg.value.split(","));
	rgba = Color(...rgb_rgba.value.split(","));

	divresult.style.backgroundColor = hex_result.value = "#"+rgba2rgb(rgb, rgba).map(x => Math.round(x).toString(16).padStart(2,0)).join('')
	rgb_result.value = divresult.style.backgroundColor.split(/[()]/)[1]
	}

	recalculate();
	</script>
	</html>