Couleur de fond hexadécimale à la variable JavaScript

Question

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

Je dois publier des données sur PHP et un bit de ces 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 semblable à celle-ci rgb (0, 70, 255).

Je n'ai trouvé 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).

Il semble donc 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é d'analyser Google les chaînes de caractères avec JavaScript, mais je ne comprenais pas vraiment les expressions régulières.

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

Answer 1

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 l'expression rationnelle 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 (car vous ne pouvez pas représenter une couleur rgba au format hexadécimal), mais je suppose qu'il pourrait y avoir d'autres utilisations. Quoi qu’il en soit, vous pouvez changer l’expression rationnelle de la manière suivante:

/^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"]

Answer 2

Si jQuery est disponible, voici la version super compacte que je viens de créer.

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

Answer 3

Vous pouvez également définir une couleur CSS à l'aide de rgb, par exemple:

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

Il s’agit du CSS valide , ne vous inquiétez pas.

Modifier: Voir nickf répondez pour un bon moyen de le convertir si vous en avez absolument besoin.

Answer 4

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 que cela fonctionne 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. Ce script renvoie également la valeur hexadécimale avec un # (il était nécessaire pour le plug-in Farbtastic que j'utilisais à l'heure)

//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 pas 0070ff, mais pas grave: P

Mise à jour, une autre meilleure 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]);
}

Answer 5

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

Answer 6

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 par rgb au lieu de rgba.

Answer 7

Que diriez-vous de cette solution, la fonction stringRGB2HEX renvoie une copie de la chaîne d'entrée dans laquelle toutes les occurrences de couleurs au format "rgb (r, g, b)" ont été remplacés 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 en styles complexes tels que arrière-plan .

Une valeur style.background telle que: "Aucun défilement sans répétition rgb (0, 0, 0)" est facilement convertie en " aucun no-repeat scroll # 000000 " en faisant simplement stringRGB2HEX (style.background)

Answer 8

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

Answer 9

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

Answer 10

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