JavaScript: 如何在RGB和16进制颜色之间转换?
最编程
2024-01-12 22:38:06
...
16进制转rgb
transRgb(color) {
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var sColor = color.toLowerCase();
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 <= 6; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return "rgba(" + sColorChange.join(",") + ")";
} else {
return sColor;
}
},
rbg带透明度转16进制
rgbToHex(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',');
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
return "#" +
("0" + r.toString(16)).slice(-2) +
("0" + g.toString(16)).slice(-2) +
("0" + b.toString(16)).slice(-2);
},
16进制转换rgb,并设置透明度
getColor(thisColor, thisOpacity) {
var theColor = thisColor.toLowerCase();
//十六进制颜色值的正则表达式
var r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (theColor && r.test(theColor)) {
if (theColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1));
}
theColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + theColor.slice(i, i + 2)));
}
return "rgba(" + sColorChange.join(",") + "," + thisOpacity + ")";
}
return theColor;
},
推荐阅读
-
Python技巧:轻松将HEX16和RGB10进制颜色互相转换
-
如何用 JavaScript 把 RGB 颜色转换为 16 进制颜色?
-
如何使用JavaScript将16进制颜色转换为RGB格式?
-
JavaScript颜色值转换:轻松将RGB和16进制互相转换
-
用JavaScript将RGB和16进制颜色相互转换的技巧
-
CSS技巧:将16进制颜色转换为RGB和RGBA,并将RGB转换为16进制
-
玩转RGB和ARGB颜色代码:16进制表示与转换技巧
-
在JavaScript中转换RGB和16进制颜色值
-
在JavaScript中转换RGB和16进制颜色值
-
转换颜色格式:从16进制到RGB和从RGB到16进制的JavaScript教程