Background - couleur hex à JavaScript variable

Si vous avez jQuery disponible, c'est la version super-compacte que je viens de proposer.

var RGBtoHEX = function(color) {
  return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){
    return ('0' + parseInt(digit).toString(16)).slice(-2)
  }).join('');
};

Vous pouvez également définir une couleur CSS en utilisant RVB, comme ceci:

background-color: rgb(0, 70, 255);

Est CSS valide, ne vous inquiétez pas.

Edit: Voir réponse nickf pour une bonne façon de le convertir Si vous en avez absolument besoin.

J'ai trouvé une autre fonction il y a quelque temps ( par R0bb13 ). Il n'a pas la regex, donc j'ai dû l'emprunter à nickf pour le faire fonctionner correctement. Je le poste seulement parce que c'est une méthode intéressante qui n'utilise pas une instruction if ou une boucle pour vous donner un résultat. De plus, ce script renvoie la valeur hexadécimale avec un # (il était nécessaire pour le plugin Farbtastic que j'utilisais à l'époque)

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

// call the function: rgb( "rgb(0, 70, 255)" );
// returns: #0046ff

Note: le résultat hexadécimal du script de nickf devrait être 0046ff et non 0070ff, mais pas grand traiter: P

Mise à jour, une autremeilleure méthode alternative:

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

Avec JQuery..

var cssColorToHex = function(colorStr){
    var hex = '#';
    $.each(colorStr.substring(4).split(','), function(i, str){
        var h = ($.trim(str.replace(')',''))*1).toString(16);
        hex += (h.length == 1) ? "0" + h : h;
    });
    return hex;
};

Ces solutions échoueront dans Chrome, car elles renvoient un rgba (x,x,x,x) pour la couleur d'arrière-plan.

EDIT: ce n'est pas nécessairement vrai. Chrome définira toujours les arrière-plans en utilisant rgb (), en fonction de ce que vous faites. Très probablement tant qu'il n'y a pas de canal alpha appliqué, Chrome répondra avec rgb au lieu de rgba.

Que diriez-vous de cette solution, la fonction stringRGB2HEX renvoie une copie de la chaîne d'entrée où toutes les occurences de couleurs au format "rgb(r,g,b)" ont été remplacées par le format hexadécimal "#rrggbb".

   //function for private usage of the function below
   //(declaring this one in global scope should make it faster rather than 
   //declaraing it as temporary function inside stringRGB2HEX that need to be
   //instantieted at every call of stringRGB2HEX
   function _rgb2hex(rgb_string, r, g, b) 
   {
      //VERY IMPORTANT: by adding (1 << 24) we avoid 'rgb(0, 0, 0)' to be mistakenly converted into '#0'
      var rgb = (1 << 24) | (parseInt(r) << 16) | (parseInt(g) << 8) | parseInt(b); //same thing of: ( r + (256 * g) + (65536 * b) + 16777216)
      //toString(16) specify hex 16 radix, works only for numbers [source: http://msdn.microsoft.com/en-us/library/dwab3ed2(v=VS.85).aspx]   
      return '#' + rgb.toString(16).substr(1); //substr(1) because we have to remove the (1 << 24) added above
   }

   function stringRGB2HEX(string)
   {
      if(typeof string === 'string')
         string = string.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, _rgb2hex);
      return string;
   }

Celui-ci convertit également les couleurs RVB dans des styles complexes comme background.

Un style.background valeur comme: "none no-repeat scroll rgb(0, 0, 0)" est facilement converti en "none no-repeat scroll #000000" simplement en faisant stringRGB2HEX(style.background)

Http://www.phpied.com/rgb-color-parser-in-javascript/

Une classe JavaScript qui accepte une chaîne et essaie d'en trouver une couleur valide. Certaines entrées acceptées sont par exemple:

* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue

J'ai trouvé cette solution http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx et je l'utilise dans mon projet

Ici vous allez, cela vous permettra d'utiliser $(sélecteur).getHexBackgroundColor() pour renvoyer facilement la valeur hexadécimale:

$.fn.getHexBackgroundColor = function() {
    var rgb = $(this).css('background-color');
    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]);
}