美文网首页
hex转rgb颜色

hex转rgb颜色

作者: eks | 来源:发表于2022-02-11 11:02 被阅读0次
hex2Rgb

上一篇文章实现了rgb转hex,今天再把hex转rgb写一写。

分析:

hex色值是#+数字或者字母(A-F);

rgb的色值是rgb+三个数字+两个括号;

所以我们需要把hex中#号后的字符取出来,再把取出来的字符分成三个变量,把每个变量转换成rgb所需的10进制数字。

步骤

1.截取hex #号后的字符;
2.判断字符长度,如果length是3则表示hex值为简写形式,需补充当前字符,如果length不为3,直接截取字符;
3.把得到的数组使用parseInt转成10进制的数字;
4.最后拼接字符。

parseInt语法

parseInt parseInt例子

radix介于 2 ~ 36 之间,正是我们想要的转换结果

现在有个变量 hexStr = '#FFFFFF';

1.获取#号后的字符


str

2.判断str长度

  • 如果为3则需补充每一项
arr = str.split('').map(d => parseInt(d.repeat(2), 16))
arr
  • 如果不为3,直接截取字符
arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
arr

3.将arr拼接成rgb颜色

`rgb(${arr.join(', ')})`
result

4.完整示例

const hex2Rgb = (hex) => {
    const str = hex.substring(1);
    let arr;
    if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
    else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
    return `rgb(${arr.join(', ')})`;
};
完整示例

这里主要考察parseInt相关知识

相关文章

网友评论

      本文标题:hex转rgb颜色

      本文链接:https://www.haomeiwen.com/subject/czsakrtx.html