上一篇文章实现了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(', ')})`;
};
完整示例
网友评论