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

Question

以下链接提供了颜色数据，例如“rgb #FFFFFF +不透明度70％”。

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

• hsl（x，y％，z％）
• rgb（x，y，z）

如何将上面的颜色转换为此格式？ （我认为hsl - ＆gt; rgb和后面应该很容易）

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

Answer 1

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

RGBA：

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

HSLA：

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

您可以尝试降低不透明度，但会降低整个元素的不透明度。

background: #fff;
opacity: 0.7

Answer 2

只需使用inspect元素。并更改颜色格式

看下图：

Answer 3

要将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);