JavaScript实现RGB颜色值翻转算法
作者：代码拾荒时间：2026-10-24 17:15:18浏览：646
本文提供一段JavaScript函数代码，用于实现RGB颜色值的翻转。该函数支持解析格式为rgb(r,g,b)的字符串以及十六进制颜色代码（如#fff或#ffffff）。通过正则表达式提取颜色分量，计算255减去原值的差值，最终返回翻转后的RGB字符串格式。
JavaScript实现RGB颜色值翻转算法
具体实现代码如下所示：
function reverseColor(rgbColor) { //205,15,20
// console.log(rgbColor);
rgbColor = rgbColor.replace(/\s/g, "");
var arrRGB = new Array(3);
if (rgbColor.indexOf("rgb") > -1) {
var colorReg = /\s*\d+,\s*\d+,\s*\d+/i;
var t = colorReg.exec(rgbColor)[0].split(",");
console.log(t);
for (var i = 0; i < arrRGB.length; i++) {
arrRGB[i] = 255 - t[i];
}
}
else if (rgbColor.indexOf("#") > -1) {
if (rgbColor.length > 4)//"#fc0,#ffcc00"
{
var j = 1;
for (var i = 0; i < arrRGB.length; i++) {
arrRGB[i] = 255 - parseInt(rgbColor.substr((i + j), 2), 16);
j += 1;
}
} else {
for (var i = 0; i < arrRGB.length; i++) {
var t = rgbColor.substr((i + 1), 1);
t = t + t;
arrRGB[i] = 255 - parseInt(t, 16);
}
}
}
return "rgb(" + arrRGB.join(",") + ")";
}演示代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>将#ffffff转换成rgb(0,0,0)格式的颜色代码</title> </head> <body> </body> <html>作者最新文章
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式：声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23