十六进制转RGB
将颜色代码转换为带有rgb()
或rgba()
字符串的形式,如果提供了alpha值。
- 使用位右移运算符和位掩码运算符
&
,将十六进制颜色代码(带有或不带有#
前缀)转换为带有RGB值的字符串。 - 如果是3位数的颜色代码,则先转换为6位数的版本。
- 如果6位数的十六进制颜色代码旁边提供了alpha值,则返回
rgba()
字符串。
const hexToRGB = hex => {
let alpha = false,
h = hex.slice(hex.startsWith('#') ? 1 : 0);
if (h.length === 3) h = [...h].map(x => x + x).join('');
else if (h.length === 8) alpha = true;
h = parseInt(h, 16);
return (
'rgb' +
(alpha ? 'a' : '') +
'(' +
(h >>> (alpha ? 24 : 16)) +
', ' +
((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
', ' +
((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
(alpha ? `, ${h & 0x000000ff}` : '') +
')'
);
};
hexToRGB('#27ae60ff'); // 'rgba(39, 174, 96, 255)'
hexToRGB('27ae60'); // 'rgb(39, 174, 96)'
hexToRGB('#fff'); // 'rgb(255, 255, 255)'