Wie konvertiert man rgba zu einem Transparenz-Adjusted-Hex?

Ich frage mich, ob es ein Werkzeug gibt, rgba in hex zu konvertieren, die die sichtbare rgba-Farbe einschließlich Transparenz in einen Hex-Wert übersetzen kann.Wie konvertiert man rgba zu einem Transparenz-Adjusted-Hex?

Sagen, ich habe dies:

rgba(0,129,255,.4)

Welche Art von „hellblau“ ist ...

Ich mag würde wissen, ob es einen Weg gibt, das gleiche hellblau „sichtbar zu bekommen "Farbe in hex, also ich will nicht die konvertierte #0081ff aber etwas in der Nähe der Farbe auf dem Bildschirm sichtbar.

Frage:
Wie rgba auf eine Transparenz-adjusted-hex-Format konvertieren?

Quelle

2013-04-09 frequent

Haben Sie versucht, diesen Alpha-Prozentsatz zu verwenden, um den Rest der Werte zu ändern? Ich gehe davon aus, dass Sie dies mit dem rgba-Wert vor einem weißen Hintergrund wünschen, also verwenden Sie den Prozentsatz, um einen "weißeren" Wert auszugleichen. Beispiel: 0,129,255, .4 == 102, 231, 255 ??? Nur eine Schätzung – jakobhans

Es hängt vom Hintergrund ab, auf den Ihre transparente Farbe angewendet wird. Wenn Sie jedoch die Farbe des Hintergrunds kennen (z. B. Weiß), können Sie die RGB-Farbe berechnen, die sich aus der RGBA-Farbe ergibt, die auf den spezifischen Hintergrund angewendet wurde.

Es ist nur der gewichtete Mittelwert zwischen der Farbe und dem Hintergrund, das Gewicht des Alphakanals (von 0 bis 1) ist:

Color = Color * alpha + Bkg * (1 - alpha);

Für Ihre transparent hellblau rgba(0,129,255,.4) gegen Weiß rgb(255,255,255):

Red = 0 * 0.4 + 255 * 0.6 = 153 
Green = 129 * 0.4 + 255 * 0.6 = 204.6 
Blue = 255 * 0.4 + 255 * 0.6 = 255

Welche rgb(153,205,255) oder #99CDFF

Quelle

2013-04-09 09:57:53 zakinster

Ja, es ist weiß. Also mal sehen, wie das funktioniert :-) – frequent

perfekt! Danke vielmals! – frequent

Danke dafür - Wirklich hilft eine Tonne! –

function hexify(color) { 
 
    var values = color 
 
    .replace(/rgba?\(/, '') 
 
    .replace(/\)/, '') 
 
    .replace(/[\s+]/g, '') 
 
    .split(','); 
 
    var a = parseFloat(values[3] || 1), 
 
     r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255), 
 
     g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255), 
 
     b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255); 
 
    return "#" + 
 
    ("0" + r.toString(16)).slice(-2) + 
 
    ("0" + g.toString(16)).slice(-2) + 
 
    ("0" + b.toString(16)).slice(-2); 
 
} 
 

 
var myHex = hexify('rgba(57,156,29,0.05)'); // "#f5faf3" 
 

 
console.log(myHex);

gibt

Quelle

2016-02-26 23:35:53

Wie konvertiert man rgba zu einem Transparenz-Adjusted-Hex?

Antwort

Verwandte Themen