Comment obtenir la valeur hexadécimale d'une couleur plutôt que sa valeur RVB ?

Question

En utilisant le jQuery suivant, vous obtiendrez la valeur RVB de la couleur d'arrière-plan d'un élément :

$('#selector').css('backgroundColor');

Existe-t-il un moyen d'obtenir la valeur hexagonale plutôt que la valeur RVB ?

Answer 1

Voici la solution plus propre que j'ai écrite sur la base de la suggestion de @Matt :

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Certains navigateurs renvoient déjà les couleurs en hexadécimal (à partir d'Internet Explorer 8 et inférieur). Si vous devez traiter ces cas, ajoutez simplement une condition à l'intérieur de la fonction, comme @gfrobenius l'a suggéré :

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Si vous utilisez jQuery et souhaitez une approche plus complète, vous pouvez utiliser Crochets CSS disponible depuis jQuery 1.4.3, comme je l'ai montré en répondant à cette question : Puis-je forcer le retour de jQuery.css("backgroundColor") au format hexadécimal ?

Answer 2

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

( Source : )

Answer 3

La plupart des navigateurs semblent renvoyer la valeur RVB lors de l'utilisation :

$('#selector').css('backgroundColor') ;

Seul I.E (seulement 6 testés jusqu'à présent) renvoie la valeur hexagonale.

Pour éviter les messages d'erreur en I.E., vous pouvez envelopper la fonction dans une instruction if :

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     } else {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
     }
}

Answer 4

Mis à jour @ErickPetru pour la compatibilité rgba :

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

J'ai mis à jour la regex pour qu'elle corresponde à la valeur alpha si elle est définie, mais ne l'utilise pas.

Answer 5

Voici une version qui vérifie également la transparence, j'en avais besoin puisque mon objet était d'insérer le résultat dans un attribut de style, où la version transparente d'une couleur hexagonale est en fait le mot "transparent" .

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     }
     else if ( rgb == 'rgba(0, 0, 0, 0)' ) {
         return 'transparent';
     }
     else {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
     }
}