Hex转RGB或者RGBA hexToRGB – JavaScript 实用代码片段

将颜色代码转换为 rgb() 字符串。或者,如果提供了 alpha 值,则将颜色代码转换为 rgba() 字符串。

使用 &(和)运算符,按位右移运算符和掩码位将十六进制颜色代码(带或不带前缀 #)转换为 RGB值字符串。如果是3位数的颜色代码,首先将其转换为6位数的颜色代码。如果一个 alpha 值和 6 位十六进制颜色代码一起提供,则返回 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)'

更多代码 JavaScript 实用代码片段 请查看 https://www.html.cn/30-seconds-of-code/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » Hex转RGB或者RGBA hexToRGB – JavaScript 实用代码片段

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏