Skip to content

Instantly share code, notes, and snippets.

@dirkgroenen
Created October 22, 2014 09:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dirkgroenen/997c49df95e62de478d1 to your computer and use it in GitHub Desktop.
Save dirkgroenen/997c49df95e62de478d1 to your computer and use it in GitHub Desktop.
Awesome little script that converts RGBa and HSLa to IE <9 supported CSS
/*
Namespace: IETranslucencyCalc
Converts modern CSS color values to IE filter versions.
File: ietranslucencycalc.js
About: Version
2.0.1
Description:
Converts RGBa and HSLa CSS values to IE-specific filters which allow for translucent colors
Last Modified:
- $Date: 2010-06-16 22:00:38 -0400 (Wed, 16 Jun 2010) $
- $Revision: 49 $
- $LastChangedBy: mbester $
Copyright:
http://kimili.com
Source:
http://web.archive.org/web/20140326182518/http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer
I've saved this awesome script because at time of writing kimili's site was down
*/
var IETranslucencyCalc = (function() {
var form,
inpRGBa,
inpFilter,
hexvals = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"],
mscss = "<span>{</span>" +
"<span class=\"tab\">background: transparent;</span>" +
"<span class=\"tab\">-ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FILTERED,endColorstr=#FILTERED)\";&nbsp;/* IE8 */</span>" +
"<span class=\"tab\">&nbsp;&nbsp;&nbsp;&nbsp;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FILTERED,endColorstr=#FILTERED);&nbsp;&nbsp;&nbsp;/* IE6 & 7 */</span>" +
"<span class=\"tab\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zoom: 1;</span>" +
"<span>}</span>",
error = "That doesn't look like a valid RGBa or HSLa value to me.",
setup = function() {
form.onsubmit = function(){
return false;
};
inpRGBa.onkeyup = convert;
},
convert = function() {
/*
parse out rgba value
*/
var filtered,
val = inpRGBa.value,
colorType = val.substring(0,3),
colorDefinition = val.match(/^(rgb|hsl)a\(((([0-9]{1,3})\s*,\s*)(([0-9]{1,3})\%?\s*,\s*)(([0-9]{1,3})\%?\s*)(,\s*((0?(\.[0-9]+)?)|(1(\.0)?))))\)/);
if (val === "") {
inpFilter.innerHTML = "";
} else if (colorType === "rgb" && colorDefinition !== null && typeof colorDefinition[0] === 'string') {
filtered = parseRGBa(colorDefinition[2]);
inpFilter.innerHTML = mscss.replace(/FILTERED/g, filtered);
} else if (colorType === "hsl" && colorDefinition !== null && typeof colorDefinition[0] === 'string') {
filtered = parseHSLa(colorDefinition[2]);
inpFilter.innerHTML = mscss.replace(/FILTERED/g, filtered);
} else {
inpFilter.innerHTML = error;
}
},
parseRGBa = function(rgba) {
rgba = rgba.split(',');
var a = rgba[3] || 1,
c, current, filterValue = "";
for (c = 0; c < 3; c++) {
// RGB
current = parseInt(rgba[c], 10);
if (current < 0) {
current = 0;
} else if (current > 255) {
current = 255;
}
// division gives us the first hex component and the modulo gives us the second
filterValue += (hexvals[parseInt((current / 16), 10)] + hexvals[parseInt((current % 16), 10)]);
}
// the alpha
filterValue = getAlpha(a) + filterValue;
return filterValue;
},
/**
Props to Michael Jackson for the HSL conversion algorithm
/web/20140710151719/http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
*/
parseHSLa = function(hsla) {
hsla = hsla.split(',');
var h = parseInt(hsla[0], 10),
s = parseInt(hsla[1], 10),
l = parseInt(hsla[2], 10),
a = hsla[3] || 1,
current, temp1, temp2, r, g, b, filterValue = "";
// Make sure our values are in proper ranges and convert to a 0-1 scale
h = (h < 0) ? 0 : ((h > 360) ? 360 : h) / 360;
s = (s < 0) ? 0 : ((s > 100) ? 100 : s) / 100;
l = (l < 0) ? 0 : ((l > 100) ? 100 : l) / 100;
if (s === 0) {
for (var x = 0; x < 3; x++) {
// Since there's no saturation, RGB are all based on the L value.
current = l * 255;
// division gives us the first hex component and the modulo gives us the second
filterValue += (hexvals[parseInt((current / 16), 10)] + hexvals[parseInt((current % 16), 10)]);
}
} else {
temp2 = (l < 0.5) ? (l * (1 + s)) : (l + s - l * s);
temp1 = 2 * l - temp2;
r = hueToRGB(temp1, temp2, h + 1/3) * 255;
g = hueToRGB(temp1, temp2, h) * 255;
b = hueToRGB(temp1, temp2, h - 1/3) * 255;
filterValue += (hexvals[parseInt((r / 16), 10)] + hexvals[parseInt((r % 16), 10)]);
filterValue += (hexvals[parseInt((g / 16), 10)] + hexvals[parseInt((g % 16), 10)]);
filterValue += (hexvals[parseInt((b / 16), 10)] + hexvals[parseInt((b % 16), 10)]);
}
// Now let's tack the alpha on the front.
filterValue = getAlpha(a) + filterValue;
return filterValue;
},
hueToRGB = function(p, q, t) {
if (t < 0) { t += 1; }
if (t > 1) { t -= 1; }
if (t < 1/6) { return p + (q - p) * 6 * t; }
if (t < 1/2) { return q; }
if (t < 2/3) { return p + (q - p) * (2/3 - t) * 6; }
return p;
},
getAlpha = function(alpha) {
alpha = parseFloat(alpha, 10);
if (alpha < 0) {
alpha = 0;
} else if (alpha > 1) {
alpha = 1;
}
alpha = alpha * 255;
// Get the first hex component
return (hexvals[parseInt((alpha / 16), 10)] + hexvals[parseInt((alpha % 16), 10)]);
};
return {
initialize : function() {
/*
Get Elements
*/
form = document.getElementById('rgbacalc');
inpRGBa = document.getElementById('rgba');
inpFilter = document.getElementById('iefilter');
if (typeof form === 'undefined' || typeof inpRGBa === 'undefined' || typeof inpFilter === 'undefined') {
return;
}
setup();
}
};
})();
IETranslucencyCalc.initialize();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment