1、rgb转换为16进制
const colorRgbToHex = (rgbStr) => {
//十六进制颜色值的正则表达式
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8}|[0-9a-fA-f]{6}[0-9]{2})$/;
if (reg.test(rgbStr)) {
return rgbStr;
} else {
const rgbArray = rgbStr.replace(/(?:\(|\)|rgba|rgb|RGBA|RGB)*/g,"").split(",");
let strHex = "#";
for (let i = 0;i < rgbArray.length; i++) {
if (i !== 3){
if (rgbArray[i] == "0") {
strHex += "00"
} else {
let newItem =Number(rgbArray[i]).toString(16)
if (newItem.length < 2){
newItem = "0" + newItem
}
strHex += newItem
}
} else {
strHex += rgbArray[i] == "0" ? "" : Number(rgbArray[i]) * 100
}
}
return strHex;
}
}
let res1 = colorRgbToHex('rgb(255,0,0)');
console.log(res1) //#ff0000
2、16进制转换为rgb
const colorHexToRgb = (hexStr, opacity) => {
//rgb颜色值的正则表达式
const reg = /^(rgba|rgb|RGBA|RGB)\([\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*(,[\s]*[0-9.]+[\s]*)*\)$/;
if (reg.test(hexStr)) {
return hexStr;
} else {
hexStr = hexStr.toLowerCase()
if (hexStr.length === 4) {
letcolorNew = "#";
for (let i = 1; i < 4; i += 1) {
conststr = hexStr.slice(i, i + 1);
colorNew += str + str;
}
hexStr = colorNew;
}
const rgbArray = [];
for (let i = 1;i < hexStr.length; i += 2) {
if (i < 7) {
rgbArray.push(parseInt("0x" + hexStr.slice(i, i + 2)));
}
if (i >= 7 && opacity) {
conststr = hexStr.slice(i, i + 2);
rgbArray.push(/^[a-f0-9]{2}$/.test(str) ? parseInt(`0x${str}`) / 255 : (Number(str) / 100).toString())
}
}
return (opacity ? "rgba(" : "rgb(") + rgbArray.join(",") + ")";
}
}
let res2 = colorHexToRgb('#ff0000');
console.log(res2) //rgb(255,0,0)
另外还可以使用prototype原型的方式,给string字符串类型添加方法,用于实现颜色值格式的转换
1、rgb转换为16进制
String.prototype.colorHex = function () {
// RGB颜色值的正则
var reg = /^(rgb|RGB)/;
var color = this;
if (reg.test(color)) {
var strHex = "#";
// 把RGB的3个数值变成数组
var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
// 转成16进制
for (var i = 0; i < colorArr.length; i++) {
var hex = Number(colorArr[i]).toString(16);
if (hex === "0") {
hex += hex;
}
strHex += hex;
}
return strHex;
} else {
return String(color);
}
};
let res3 = "rgb(0,0,255)".colorHex();
console.log(res3) //#0000ff
2、16进制转换为rgb
String.prototype.colorRgb = function () {
// 16进制颜色值的正则
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
var color = this.toLowerCase();
if (reg.test(color)) {
// 如果只有三位的值,需变成六位,如:#fff => #ffffff
if (color.length === 4) {
var colorNew = "#";
for (var i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值,转为RGB
var colorChange = [];
for (var i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
}
return "RGB(" + colorChange.join(",") + ")";
} else {
return color;
}
};
let res4 = "#00ff00".colorRgb()
console.log(res4) //RGB(0,255,0)