RGB颜色值与十六进制颜色码在线转换工具。
/*RGB颜色转换为16进制*/
String.prototype.colorHex = function(){
var that = this;
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是rgb颜色表示
if (/^(rgb|RGB)/.test(that)) {
var aColor = that.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
var strHex = "#";
for (var i=0; i<aColor.length; i++) {
var hex = Number(aColor[i]).toString(16);
if (hex === "0") {
hex += hex;
}
strHex += hex;
}
if (strHex.length !== 7) {
strHex = that;
}
return strHex;
} else if (reg.test(that)) {
var aNum = that.replace(/#/,"").split("");
if (aNum.length === 6) {
return that;
} else if(aNum.length === 3) {
var numHex = "#";
for (var i=0; i<aNum.length; i+=1) {
numHex += (aNum[i] + aNum[i]);
}
return numHex;
}
}
return that;
};
/*16进制颜色转为RGB格式*/
String.prototype.colorRgb = function(){
var sColor = this.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i=1; i<4; i+=1) {
sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i=1; i<7; i+=2) {
sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));
}
return "RGB(" + sColorChange.join(",") + ")";
}
return sColor;
};
js函数调用
<script type="text/javascript">
window.onload = function(){
var obj = {
v1: document.getElementById("v1"),
b1: document.getElementById("b1"),
s1: document.getElementById("showRgb"),
v2: document.getElementById("v2"),
b2: document.getElementById("b2"),
s2: document.getElementById("showHex"),
c1: document.getElementById("color"),
c2: document.getElementById("color2")
};
obj.b1.onclick = function(){
var v = obj.v1.value;
obj.s1.innerHTML = v.colorRgb();
obj.c1.style.background = v.colorRgb();
};
obj.b2.onclick = function(){
var v = obj.v2.value;
obj.s2.innerHTML = v.colorHex();
obj.c2.style.background = v.colorHex();
};
};
</script>
十六进制颜色值:<input id="v1" type="text" value="#34538b" /><input id="b1" type="button" value="转为RGB格式" />
<p><span id="showRgb"></span><span id="color" style="display:inline-block;width:100px;height:20px;margin-left:10px;"></span></p>
GRB颜色值:<input id="v2" type="text" value="RGB(23, 245, 56)" /><input id="b2" type="button" value="转为十六进制形式" />
<p><span id="showHex"></span><span id="color2" style="display:inline-block;width:100px;height:20px;margin-left:10px;"></span></p>