Konvertieren von 8-stellige hex-Farben, rgba-Farben?

Ich machte ein kurzes JSfiddle form, die es Ihnen ermöglicht zu konvertieren von 8-stellige hex-code in CSS rgba-Werte 😉

https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/

Die Grundlage ist relativ einfach — split die Zeichenfolge, die Sie zur Verfügung gestellt haben, in teilen 2-stellig, und eine Umwandlung in prozentuale Verhältnisse bei der alpha-Kanal, und an Dezimalstellen für die RGB-Kanäle. Das markup ist wie folgt:

<form action="">
    <select id="format">
        <option value="rgba">RGBa: RRGGBBAA</option>
        <option value="argb">aRGB: AARRGGBB</option>
    </select>
    <input type="text" id="hex" value="#949494E8" />
    <button>Convert</button>
</form>
<p id="rgba"></p>

Die Logik:

//Remove hash
var hex = $('#hex').val().slice(1);

//Split to four channels
var c = hex.match(/.{1,2}/g);

//Function: to decimals (for RGB)
var d = function(v) {
    return parseInt(v, 16);
};
//Function: to percentage (for alpha), to 3 decimals
var p = function(v) {
    return parseFloat(parseInt((parseInt(v, 16)/255)*1000)/1000);
};

//Check format: if it's argb, pop the alpha value from the end and move it to front
var a, rgb=[];
if($('#format').val() === 'argb') {
    c.push(c.shift());
}

//Convert array into rgba values
a = p(c[3]);
$.each(c.slice(0,3), function(i,v) {
    rgb.push(d(v));
});

Den Kern der Konvertierung ist wie folgt:

• Die Umwandlung der RGB-Kanäle in hex in dezimal-Werte. Dies wird durch die Verwendung parseInt(hexValue, 16).
• Die Umwandlung der alpha-Kanal in hex, in Prozentsatz-Verhältnis. Dies geschieht einfach durch konvertieren in decimal-Werte (siehe oben Punkt), und die Berechnung der relativen Wert 255.

InformationsquelleAutor Terry