Konvertieren von RGB + Opazität in RGB/HSL-Farbe

Question

Der folgende Link enthält Farbdaten wie "rgb #FFFFFF + Opazität 70%".

Für react-native ich brauche die Farbe in einem der folgenden Formate:

• HSL (x, y%, z%)
• RGB (x, y, z)

Wie konvertiere ich die obige Farbe in diese Formate? (Ich denke hsl -> rgb und zurück sollte dann einfach sein)

Die Lösung sollte nicht nur für #FFFFFF funktionieren.

Answer 1

Sie können Transparenz nicht als RGB oder HSL codieren. Was Sie brauchen, ist die Alpha-Komponente. In diesem Fall muss es RGBA oder HSLA sein.

RGBA:

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

HSLA:

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

Sie können versuchen, die Opazität zu reduzieren, aber es wird die Transparenz des gesamten Elements zu reduzieren.

background: #fff; 
opacity: 0.7 

Answer 2

Verwenden Sie einfach inspect Element. und die Farbe wechseln Format

Blick auf das Bild unten:.

Answer 3

zu konvertieren RGBA in RGB Sie die Hintergrundfarbe zur Verfügung stellen müssen, die gemischt werden, wird jemand ein Code-Snippet für das schrieb, ich bin Einfach hier reinstecken. Ich habe es nicht selbst programmiert.

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