如何在Emotion中将十六进制颜色转换为RGBA

Question

我正在将我的应用程序从Less转换为Emotion。

在Less中，我的样式如下：

@blue: #476882;
background: rgba(red(@blue), green(@blue), blue(@blue), 0.5);

在转换为情感时，我正在进行以下操作：

export const BLUE = '#476882'
background: rgba(red(${BLUE}), green(${BLUE}), blue(${BLUE}), 0.5);

然而它并没有起作用。

有什么建议可以让它工作起来吗？

- Rahul Yadav

---

所有的集成开发环境都默认支持或者可以通过插件实现。试试看吧，祝你好运（颜色选择器）。 - Modig

不要这样写： background: rgba(red(${BLUE}), green(${BLUE}), blue(${BLUE}), 0.5); 尝试这样写： background: rgba(${RED},${GREEN},${BLUE}, 0.5); - RacoonOnMoon

我有十六进制颜色代码“BLUE”，但我不想创建三个变量“RED，GREEN和BLUE”。 - Rahul Yadav

background-color:${BLUE}; opacity:0.5 对你来说可行吗？ - Mr Lister

可能是如何使用Less编译器将HEX颜色转换为rgba？的重复问题。 - user4994625

Answer 1

我在情感分析中找不到任何方法，但我个人使用了一个实用函数来解决它，该函数使用hex-rgb包：

import hexRgb from 'hex-rgb';

export const rgba = (hex, alpha) => {
  const rgb = hexRgb(hex, { format: 'array' })
    .slice(0, -1)
    .join(',');
  return `${rgb},${alpha}`;
};

然后就可以像这样使用它：rgba(${rgba('#000', 0.15)})

- alliuca

Answer 2

简单的转换器，没有任何依赖关系。

export const hexToRgba = (hex: string, alpha: string | number): string => {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  return result
    ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
        result[3],
        16,
      )}, ${alpha})`
    : hex;
};

- Ofigelov