web-dev-qa-db-fra.com

Couleur de fond hexadécimale à la variable JavaScript

Je suis un peu nouveau sur JavaScript et jQuery et maintenant je suis confronté à un problème:

J'ai besoin de poster des données sur PHP et un bit de données doit être l'hexagone de la couleur d'arrière-plan de div X.

jQuery a la fonction css ("background-color") et avec elle, je peux obtenir la valeur RVB de l'arrière-plan dans une variable JavaScript.

La fonction CSS semble renvoyer une chaîne comme ceci rgb (0, 70, 255). 

Je ne trouvais aucun moyen d'obtenir la couleur de fond de la couleur d'arrière-plan (même si elle est définie comme hex dans CSS).

Donc, il me semble que j'ai besoin de le convertir. J'ai trouvé une fonction permettant de convertir RVB en hexadécimal, mais il faut l'appeler avec trois variables différentes, r, g et b. Il me faudrait donc analyser la chaîne rgb (x, xx, xxx) dans var r = x; var g = xx; var b = xxx; en quelque sorte. 

J'ai essayé de google analyser des chaînes avec JavaScript, mais je ne comprenais pas vraiment le problème des expressions régulières. 

Existe-t-il un moyen d’obtenir la couleur d’arrière-plan de div en hexa, ou la chaîne peut-elle être convertie en 3 variables différentes?

javascriptjqueryhexrgbbackground-color
36
Removed_account

essayez ceci:

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

delete (parts[0]);
for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
} 
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF"

En réponse à la question dans les commentaires ci-dessous:

J'essaie de modifier la regex pour gérer à la fois rgb et rgba en fonction de celui que je reçois. Des allusions? Merci. 

Je ne suis pas tout à fait sûr que cela ait un sens dans le contexte de cette question (étant donné que vous ne pouvez pas représenter une couleur rgba en hex), mais je suppose qu'il pourrait y avoir d'autres utilisations. Quoi qu'il en soit, vous pourriez changer la regex pour être comme ceci:

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/

Exemple de sortie:

var d = document.createElement('div');
d.style.backgroundColor = 'rgba( 255,  60, 50, 0)';

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor);

// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"]
62
nickf

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

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

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

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

C'est valide CSS , ne vous inquiétez pas.

Edit: Voir nickf answer pour un moyen pratique de le convertir si vous en avez absolument besoin.

8
lpfavreau

J'ai trouvé une autre fonction quelque temps en arrière ( par R0bb13 ). Il n’a pas de regex, alors j’ai dû l’emprunter à nickf pour le faire fonctionner correctement. Je ne la poste que parce que c'est une méthode intéressante qui n'utilise ni instruction if ni 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

Remarque: le résultat hexadécimal du script de nickf doit être 0046ff et non 0070ff, mais pas grave: P

Update, une autre méthode alternative better:

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

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;
};
3
Mark Rhodes

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

EDIT: Ce n'est pas nécessairement vrai. Chrome continuera à définir les arrière-plans à l'aide de rgb (), en fonction de vos tâches. Très probablement, tant qu'aucun canal alpha n'est appliqué, Chrome répondra avec rgb au lieu de rgba.

1
Kevin.Riggen

Que diriez-vous de cette solution, la fonction stringRGB2HEX renvoie une copie de la chaîne d’entrée où toutes les occurrences 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.

Une valeur style.background telle que: "none no-repeat scroll rgb(0, 0, 0)" est facilement convertie en "none no-repeat scroll #000000" en faisant simplement stringRGB2HEX(style.background)

1
Marco Demaio

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

Une classe JavaScript qui accepte une chaîne et tente de déterminer une couleur valide. Certaines entrées acceptées sont par exemple:

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

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

0
Amr Elgarhy

Voilà, 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]);
}
0
The Virtual Machinist