web-dev-qa-db-fra.com

Convertir des couleurs hexadécimales à 8 chiffres en couleurs rgba?

Tout ce que j'ai trouvé à ce sujet convertit simplement l'hex en RVB, puis ajoute un alpha de 1. Je veux également obtenir l'alpha prévu à partir des chiffres hexadécimaux.

Une couleur telle que #949494E8 ou #DCDCDC8F a clairement une valeur alpha différente de 0 ou 1.

csscolorshexrgba
19
Steve

J'ai créé un formulaire JSfiddle rapide qui vous permet de convertir du code hexadécimal à 8 chiffres en valeurs CSS rgba;)

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

La base est assez simple - pour diviser la chaîne que vous avez fournie en parties de 2 chiffres et effectuer la conversion en pourcentages pour le canal alpha et en décimales pour les canaux RVB. Le balisage est le suivant:

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

La logique:

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

L'essentiel de la conversion est le suivant:

  • Conversion des canaux RVB en hexadécimal, en valeurs décimales. Cela se fait en utilisant parseInt(hexValue, 16).
  • Conversion du canal alpha en hexadécimal, en pourcentage. Pour ce faire, il suffit de le convertir en valeurs décimales (voir point ci-dessus) et de calculer sa valeur relative à 255.
41
Terry

Voici une petite info-bulle pour vous:

Dans ce cas #DCDCDC8F le DC est alpha = 220,

Hex en décimal [DC]:

  1. première place D = 13 * 16 ^ 1 = 208
  2. deuxième place C = 12 * 16 ^ 0 = 12
  3. somme = 12 + 208 = 220

puis 220/255 = 0,86 opacité.

enter image description here

Les octets sont stockés en mémoire sur une petite machine endian dans l'ordre AABBGGRR

Vérifiez ceci: http://www.statman.info/conversions/hexadecimal.html

5
Piotr Dajlido