Couleur de fond hexadécimal à la variable JavaScript

Question

Je suis un peu nouveau pour JavaScript et jQuery, et maintenant je suis face à un problème:

J'ai besoin de mettre certaines données de PHP et d'un bit de données doit être la couleur d'arrière-plan hex de div X.

jQuery a la css("background-color") de la fonction 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 de caractères comme ceci rgb(0, 70, 255).

Je ne pouvais pas trouver un moyen d'obtenir hexadécimal de la couleur d'arrière-plan (même si il est défini comme hex dans le CSS).

Il semble donc que j'ai besoin de le convertir. J'ai trouvé une fonction pour convertir RVB en hexadécimal, mais elle doit être appelée avec trois variables différentes, r, g et b. Donc j'aurais besoin pour analyser la chaîne rgb(x,xx,xxx) dans le var r=x; var g=xx; var b=xxx; en quelque sorte.

J'ai essayé de google analyse des chaînes avec le JavaScript, mais je n'ai pas vraiment de comprendre les expressions régulières chose.

Est-il un moyen pour obtenir la couleur d'arrière-plan div hexadécimal, ou peut l'être converti en chaîne de 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:

Je suis en train de modifier la regex pour gérer à la fois rvb ou rvba selon celle que je reçois. Tous les conseils? Merci.

Je ne suis pas sûr de savoir exactement si elle fait sens dans le contexte de cette question (puisque vous ne pouvez pas représenter une led de couleur en hexadécimal), mais je suppose qu'il pourrait y avoir d'autres utilisations. De toute façon, vous pouvez modifier 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"]

Answer 2

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

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

Answer 3

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

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

Il est valide CSS , ne vous inquiétez pas.

---

Edit: Voir nickf answer pour une bonne façon de le convertir si vous en avez absolument besoin.

Answer 4

J'ai trouvé une autre fonction du temps de retour (par R0bb13). Il n'a pas la regex, donc j'ai dû l'emprunter à partir de nickf pour le faire fonctionner correctement. Je suis le seul à poster parce que c'est une méthode intéressante qui n'est pas utiliser une instruction if ou à une boucle de vous donner un résultat. Aussi ce script renvoie la valeur hexadécimale avec un # (Il a été nécessaire par le Farbtastic plugin 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: L'hexadécimal le résultat de nickf du script doit être 0046ff et pas 0070ff, mais pas une grosse affaire :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;
};