javascript编写一个将十六进制值转换为颜色的函数

以蓝色为例,#0000FF 应该表示成“rgb(0,0,255)”的形式。
2025-02-25 12:18:47
推荐回答(3个)
回答1:

function getRGB(hex){
    var rgb=[0,0,0];
    if(/#(..)(..)(..)/g.test(hex)){
        rgb=[parseInt(RegExp.$1,16),parseInt(RegExp.$2,16),parseInt(RegExp.$3,16)];
    };
    return "rgb("+rgb.join(",")+")";
}

回答2:

"如果输入值不完整,对应的颜色值取0"

这点不可能的, 谁知道你是漏了哪个参数! 参数需要严格对应!(请注意rgba和hsla都是有四个参数的)
以下是约定各变量的范围
R [0, 255]
G [0, 255]
B [0, 255]
A [0, 1]
H [0, 360)
S [0, 1]
L [0, 1]
调用方法
ReturnRGB('rgba(2,255,102,0.3)')

ReturnRGB('hsl(200,0.38,0.6)')

ReturnRGB('#F00')

* 使用请注明原作者

/**
* @author ck0123456@gmail.com
*/
function ReturnRGB(color) {
var r = 0,
g = 0,
b = 0,
a = 1,
invalid = '非法参数',
lt = function(s, n) {
if (Number.isNaN(s) || s >= n) {
throw invalid;
}
return s;
},
lte = function(s, n) {
if (Number.isNaN(s) || s > n) {
throw invalid;
}
return s;
},
test = function(p, q, t) {
if (t < 0) {
t += 1;
} else if (t > 1) {
t -= 1;
}
if (t < 1 / 6) {
t = p + (q - p) * 6 * t;
} else if (t < 0.5) {
t = q;
} else if (t < 2 / 3) {
t = p + (q - p) * 6 * (2 / 3 - t);
} else {
t = p;
}
return t * 255;
},
hex = function(s) {
r = parseInt(s.substring(1, 3), 16);
g = parseInt(s.substring(3, 5), 16);
b = parseInt(s.substring(5, 7), 16);
},
rgba = function(part) {
r = lte(parseFloat(part[0]), 255);
g = lte(parseFloat(part[1]), 255);
b = lte(parseFloat(part[2]), 255);
a = lte(parseFloat(part[3]), 1);
},
hsla = function(part) {
var h = lt(parseFloat(part[0]), 360),
s = lte(parseFloat(part[1]), 1),
l = lte(parseFloat(part[2]), 1),
a = lte(parseFloat(part[3]), 1);
if (s == 0) {
r = g = b = l;
} else {
var q = l < 0.5 ? (l + l * s) : (l + s - l * s),
p = 2 * l - q;
k = h / 360;
r = test(p, q, k + 1 / 3);
g = test(p, q, k);
b = test(p, q, k - 1 / 3);
}
};
if (typeof color == 'string' && color.length > 3) {
color = color.replace(/\s+/g, '').toLowerCase();
if (/^#[0-9a-f]{3}$/.test(color)) {
hex(color.replace(/([0-9a-f])/g, '$1$1'));
} else if (/^#[0-9a-f]{6}$/.test(color)) {
hex(color);
} else if (/^rgba\([0-9,\.]+\)$/.test(color)) {
color = color.substring(5, color.length - 1);
color = color.split(',');
if (color.length == 4) {
rgba(color);
} else {
throw invalid;
}
} else if (/^rgb\([0-9,\.]+\)$/.test(color)) {
color = color.substring(4, color.length - 1);
color = color.split(',');
if (color.length == 3) {
color[3] = '1';
rgba(color);
} else {
throw invalid;
}
} else if (/^hsla\([0-9,\.]+\)$/.test(color)) {
color = color.substring(5, color.length - 1);
color = color.split(',');
if (color.length == 4) {
hsla(color);
} else {
throw invalid;
}
} else if (/^hsl\([0-9,\.]+\)$/.test(color)) {
color = color.substring(4, color.length - 1);
color = color.split(',');
if (color.length == 3) {
color[3] = '1';
hsla(color);
} else {
throw invalid;
}
} else {
throw invalid;
}
}
return {
Red: r,
Green: g,
Blue: b,
Alpha: a
}
}

回答3:

function getRGB(hex){ var rgb=[0,0,0]; if(/#(..)(..)(..)/g.test(hex)){ rgb=[parseInt(RegExp.$1,16),parseInt(RegExp.$2,16),parseInt(RegExp.$3,16)]; }; return "rgb("+rgb.join(",")+")";}