将 RGB + 不透明度转换为 RGB/HSL 颜色

Question

以下链接提供了颜色数据，如"rgb #FFFFFF + 不透明度 70%"。

对于react-native，我需要以下格式之一的颜色：

• HSL（x， y%， z%）
• RGB（x， y， z）

如何将上面的颜色转换为这种格式？（我认为 hsl -> rgb 和返回应该很容易）

该解决方案不仅应该适用于 #FFFFFF。

Answer 1

要将 RGBA 转换为 RGB，您需要提供背景颜色，该颜色将被混合。有人为此编写了一个代码片段，我只是将其粘贴在这里。我没有自己编程。

https://gist.github.com/tqc/2564280

function RGBAtoRGB(r, g, b, a, r2,g2,b2){
    var r3 = Math.round(((1 - a) * r2) + (a * r))
    var g3 = Math.round(((1 - a) * g2) + (a * g))
    var b3 = Math.round(((1 - a) * b2) + (a * b))
    return "rgb("+r3+","+g3+","+b3+")";
    } 
let result = RGBAtoRGB(225,110,0,0.5,255,255,255);

Answer 2

不能将透明度编码为 RGB 或 HSL。你需要的是阿尔法组件。在这种情况下，它必须是RGBA或HSLA。

RGBA：

color: rgba(255,255,255, 0.7);

高铁：

color: hsla(0, 0%, 100%, 0.7);

您可以尝试降低不透明度

，但它会降低整个元素的不透明度。

background: #fff;
opacity: 0.7