使用JavaScript进行HEX等效颜色转换

Question

我有一个十六进制颜色，我为其添加0D以获得不透明度。渲染后变为RGBA(x，y，z，0.05(。
不透明度的添加导致了我想要避免的问题
等效颜色：

#ff55970D => rgba(255, 85, 151, 0.05) is #fff6fa

有没有一种方法可以直接使用JavaScript将#ff55970D转换为#fff6fa，而不添加不透明度"0D"或将其转换为RGBA？

Answer 1

背景决定了不透明度对正面颜色的影响。在您的示例中，您似乎使用了白色背景色(0xffffff(。

这里有一个可以用来进行转换的函数。您必须提供背景色。我假设有8个数字的十六进制字符串，背景颜色为6。

const colorComponents = hex => hex.match(/../g).map(s => parseInt(s, 16));
function convertToRGB(frontHex, backHex) {
let front = colorComponents(frontHex);
let back = colorComponents(backHex);
let alpha = front.pop() / 255;
return front.map((hue, i) => Math.round(hue*alpha + back[i]*(1-alpha)))
.map(hue => hue.toString(16).padStart(2, "0")).join("");
}
let res = convertToRGB("ff55970D", "FFFFFF");
console.log(res);