将 rgba 颜色转换为十六进制时接收到不正确的 alpha 通道

Question

为了将带有 alpha 通道的 rgba 颜色转换为十六进制，我使用了代码

let rChannel = 255;
let gChannel = 255;
let bChannel = 255;
let aChannel = 0.7;

console.log('#'+(256 + parseFloat(rChannel)).toString(16).substr(1) + ((1 << 24) + (parseFloat(gChannel) << 16) | (parseFloat(bChannel) << 8) | aChannel).toString(16).substr(1));
// #ffffff00, but expect #ffffffb3

根据 link

的回答给出

但它 returns 不正确的十六进制 alpha 通道（00 而不是 b3）。

如何修复？

Answer 1

对浮点值使用按位 |（或）运算符没有意义。您必须使用 ~~(achannel * 255) 来获取整数值。

根据您的 0 ... 1 achannel 值的范围，如果值永远不能为 1，您可能希望使用 256 而不是 255。

edit — 现在我想起来了，您不需要 ~~ 显式整数转换，因为 | 无论如何都会这样做，所以只要分数值始终小于 1，简单的 (achannel * 256) 就可以工作；否则 255.

将 rgba 颜色转换为十六进制时接收到不正确的 alpha 通道

Receive incorrect alpha channel when convert rgba color to hex

javascript

hex

rgb

rgba