Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vladimir Bergier Convert RGBA to RGB // source http://jsbin.com/qocixeh
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Convert RGBA to RGB">
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Vladimir Bergier</title>
<style>
div {
width: 100%;
display: flex;
justify-content: center;
margin: 10px
}
p {
padding: 0 10px;
}
p:nth-child(even) {
color: white;
}
</style>
</head>
<body>
<div>
<p>desiredRGBColorString = convertRGBAtoRGBIfNeeded(anyCssColorString)</p>
</div>
<div id="rgba">
<p>source (usually rgba) color</p>
<p>source (usually rgba) color</p>
</div>
<div id="rgb">
<p>result rgb color</p>
<p>result rgb color</p>
</div>
<script id="jsbin-javascript">
const debug = false;
var rgbaColor = 'rgba(1,12,123,0.33)';
// var rgbaColor = '#999';
// var rgbaColor = 'rgb(30, 20, 200)';
if (debug) console.log(`rgbaColor: ${rgbaColor}`);
var rgbColor = convertRGBAtoRGBIfNeeded(rgbaColor)
if (debug) console.log(`rgbColor: ${rgbColor}`);
var rgbaElement = document.getElementById("rgba");
var rgbElement = document.getElementById("rgb");
setColor(rgbaElement, rgbaColor)
setColor(rgbElement, rgbColor)
function setColor(element, color) {
if (!element) return;
element.style.backgroundColor = color;
}
function convertRGBAtoRGBIfNeeded(colorCssString) {
if (debug) console.log(`colorCssString: ${colorCssString}`)
const isRGBA = function(colorCssString) {
return colorCssString.match(/rgba/gi);
}
if (!isRGBA(colorCssString)) return colorCssString;
var colorArray = colorCssString.match(/\d+\.*\d*/g);
if (debug) console.log(colorArray);
if (debug) console.log(`colorArray: ${colorArray}`);
var rgb = colorCssString.match(/\d+\.*\d+/g);
if (debug) console.log(`rgb: ${rgb}`);
let Source = {};
Source.R = colorArray.shift()/255;
Source.G = colorArray.shift()/255;
Source.B = colorArray.shift()/255;
Source.A = colorArray.shift()/1;
if (debug) console.log(colorArray);
if (debug) console.log(Source);
let BGColor = {
R: 1,
G: 1,
B: 1
};
// Credits to:
// https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb
let Target = {};
Target.R = parseInt(255 * (((1 - Source.A) * BGColor.R) + (Source.A * Source.R)));
Target.G = parseInt(255 * (((1 - Source.A) * BGColor.G) + (Source.A * Source.G)));
Target.B = parseInt(255 * (((1 - Source.A) * BGColor.B) + (Source.A * Source.B)));
if (debug) console.log(Target);
const rgbColor = `rgb(${Target.R}, ${Target.G}, ${Target.B})`
return rgbColor;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">const debug = false;
var rgbaColor = 'rgba(1,12,123,0.33)';
// var rgbaColor = '#999';
// var rgbaColor = 'rgb(30, 20, 200)';
if (debug) console.log(`rgbaColor: ${rgbaColor}`);
var rgbColor = convertRGBAtoRGBIfNeeded(rgbaColor)
if (debug) console.log(`rgbColor: ${rgbColor}`);
var rgbaElement = document.getElementById("rgba");
var rgbElement = document.getElementById("rgb");
setColor(rgbaElement, rgbaColor)
setColor(rgbElement, rgbColor)
function setColor(element, color) {
if (!element) return;
element.style.backgroundColor = color;
}
function convertRGBAtoRGBIfNeeded(colorCssString) {
if (debug) console.log(`colorCssString: ${colorCssString}`)
const isRGBA = function(colorCssString) {
return colorCssString.match(/rgba/gi);
}
if (!isRGBA(colorCssString)) return colorCssString;
var colorArray = colorCssString.match(/\d+\.*\d*/g);
if (debug) console.log(colorArray);
if (debug) console.log(`colorArray: ${colorArray}`);
var rgb = colorCssString.match(/\d+\.*\d+/g);
if (debug) console.log(`rgb: ${rgb}`);
let Source = {};
Source.R = colorArray.shift()/255;
Source.G = colorArray.shift()/255;
Source.B = colorArray.shift()/255;
Source.A = colorArray.shift()/1;
if (debug) console.log(colorArray);
if (debug) console.log(Source);
let BGColor = {
R: 1,
G: 1,
B: 1
};
// Credits to:
// https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb
let Target = {};
Target.R = parseInt(255 * (((1 - Source.A) * BGColor.R) + (Source.A * Source.R)));
Target.G = parseInt(255 * (((1 - Source.A) * BGColor.G) + (Source.A * Source.G)));
Target.B = parseInt(255 * (((1 - Source.A) * BGColor.B) + (Source.A * Source.B)));
if (debug) console.log(Target);
const rgbColor = `rgb(${Target.R}, ${Target.G}, ${Target.B})`
return rgbColor;
}
</script></body>
</html>
const debug = false;
var rgbaColor = 'rgba(1,12,123,0.33)';
// var rgbaColor = '#999';
// var rgbaColor = 'rgb(30, 20, 200)';
if (debug) console.log(`rgbaColor: ${rgbaColor}`);
var rgbColor = convertRGBAtoRGBIfNeeded(rgbaColor)
if (debug) console.log(`rgbColor: ${rgbColor}`);
var rgbaElement = document.getElementById("rgba");
var rgbElement = document.getElementById("rgb");
setColor(rgbaElement, rgbaColor)
setColor(rgbElement, rgbColor)
function setColor(element, color) {
if (!element) return;
element.style.backgroundColor = color;
}
function convertRGBAtoRGBIfNeeded(colorCssString) {
if (debug) console.log(`colorCssString: ${colorCssString}`)
const isRGBA = function(colorCssString) {
return colorCssString.match(/rgba/gi);
}
if (!isRGBA(colorCssString)) return colorCssString;
var colorArray = colorCssString.match(/\d+\.*\d*/g);
if (debug) console.log(colorArray);
if (debug) console.log(`colorArray: ${colorArray}`);
var rgb = colorCssString.match(/\d+\.*\d+/g);
if (debug) console.log(`rgb: ${rgb}`);
let Source = {};
Source.R = colorArray.shift()/255;
Source.G = colorArray.shift()/255;
Source.B = colorArray.shift()/255;
Source.A = colorArray.shift()/1;
if (debug) console.log(colorArray);
if (debug) console.log(Source);
let BGColor = {
R: 1,
G: 1,
B: 1
};
// Credits to:
// https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb
let Target = {};
Target.R = parseInt(255 * (((1 - Source.A) * BGColor.R) + (Source.A * Source.R)));
Target.G = parseInt(255 * (((1 - Source.A) * BGColor.G) + (Source.A * Source.G)));
Target.B = parseInt(255 * (((1 - Source.A) * BGColor.B) + (Source.A * Source.B)));
if (debug) console.log(Target);
const rgbColor = `rgb(${Target.R}, ${Target.G}, ${Target.B})`
return rgbColor;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.