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

Posted 2023-04-26

以蓝色为例，#0000FF 应该表示成“rgb（0，0，255）”的形式。

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(",")+")";

参考技术A "如果输入值不完整，对应的颜色值取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 [e-mail]
*/
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

参考技术B 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(",")+")";

javascript十六进制颜色转换为rgb函数[重复]

【中文标题】javascript十六进制颜色转换为rgb函数[重复]

【英文标题】：javascript hexadecimal color convert into rgb function [duplicate]

【发布时间】：2017-04-21 17:16:22

【问题描述】：

我是 Javascript 新手。我想创建一个函数，它将采用十六进制颜色代码并将其转换为 rgb(xx,xx,xx)。 我的代码在下面找到

function my(a)
var first = a[1] + a[2];
var second = a[3] + [4];
var third = a[5] + a[6];
var res = [first,second,third];
for(var i = 0; i <res.length; i++)
res[i] = parseInt(res[i],16);

return res;

除第二个数组元素外，第一个和第三个数组元素正在正确转换。我不知道为什么，谁能告诉我为什么？

【问题讨论】：

javascript 数组中的索引以 0 开头，而不是 1

@manonthemat 但是十六进制不是以# 开头的吗？所以索引 0 处的元素不是数字。

那么a是#ccdd11形式的字符串呢？好吧，那是有道理的。

是的十六进制数以#开头，所以我从 1 开始。是的，我将“a”视为字符串

【参考方案1】：

您在分配 second 时有错字。你有a[3] + [4]，它应该是a[3] + a[4]。

function my(a) 
    var first = a[1] + a[2];
    var second = a[3] + a[4];
    var third = a[5] + a[6];
    var res = [first,second,third];
    for(var i = 0; i < res.length; i++)
        res[i] = parseInt(res[i],16);
    
    return res;

【讨论】：

非常感谢您的宝贵时间