Color de fondo hexadecimal a variable de JavaScript

Question

Soy un poco nuevo en JavaScript y jQuery y ahora tengo un problema:

Necesito publicar algunos datos en PHP y una parte de los datos debe ser el color de fondo hexadecimal de div X.

jQuery tiene la función css (" background-color ") y con ella puedo obtener el valor RGB del fondo en una variable de JavaScript.

La función CSS parece devolver una cadena como esta rgb (0, 70, 255).

No pude encontrar ninguna manera de obtener el hexadecimal del color de fondo (a pesar de que está configurado como hexadecimal en CSS).

Entonces parece que necesito convertirlo. Encontré una función para convertir RGB a hexadecimal, pero debe llamarse con tres variables diferentes, r, gy b. Entonces, necesitaría analizar la cadena rgb (x, xx, xxx) en var r = x; var g = xx; var b = xxx; de algun modo.

Intenté googlear cadenas de análisis con JavaScript, pero realmente no entendí lo de las expresiones regulares.

¿Hay alguna manera de obtener el color de fondo de div como hexadecimal, o se puede convertir la cadena en 3 variables diferentes?

Answer 1

prueba esto:

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 respuesta a la pregunta en los comentarios a continuación:

  

Estoy tratando de modificar la expresión regular para manejar tanto rgb como rgba dependiendo de cuál obtengo. ¿Alguna pista? Gracias.

No estoy exactamente seguro de si tiene sentido en el contexto de esta pregunta (ya que no puede representar un color rgba en hexadecimal), pero supongo que podría haber otros usos. De todos modos, puede cambiar la expresión regular para que sea así:

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

Ejemplo de salida:

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 tiene jQuery disponible, esta es la versión súper compacta que se me ocurrió.

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

Puede establecer un color CSS usando rgb también, como este:

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

Es CSS válido , no se preocupe.

---

Editar: Consulte nickf responda para obtener una buena manera de convertirlo si es absolutamente necesario.

Answer 4

Encontré otra función hace un tiempo ( by R0bb13 ). No tiene la expresión regular, así que tuve que pedirla prestada a nickf para que funcione correctamente. Solo lo estoy publicando porque es un método interesante que no usa una declaración if o un bucle para darle un resultado. Además, este script devuelve el valor hexadecimal con un # (era necesario para el complemento Farbtastic que estaba usando en el tiempo)

//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

Nota: El resultado hexadecimal del script de nickf debe ser 0046ff y no 0070ff, pero no es gran cosa: P

Actualización, otro método alternativo mejor :

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

Con 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

Estas soluciones fallarán en Chrome, ya que devuelve un rgba (x, x, x, x) para el color de fondo.

EDITAR: Esto no es necesariamente cierto. Chrome seguirá configurando fondos usando rgb (), dependiendo de lo que esté haciendo. Lo más probable es que mientras no haya un canal alfa aplicado, Chrome responderá con rgb en lugar de rgba.

Answer 7

¿Qué tal esta solución? La función stringRGB2HEX devuelve una copia de la cadena de entrada donde todas las ocurrencias de colores en el formato "rgb (r, g, b)" han sido reemplazados por el formato hexadecimal " # 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;
   }

Este también convierte colores rgb en estilos complejos como background .

Un valor de style.background como: " none no-repeat scroll rgb (0, 0, 0) " se convierte fácilmente en " ninguno desplazamiento sin repetición # 000000 " simplemente haciendo stringRGB2HEX(style.background)

Answer 8

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

Una clase de JavaScript que acepta una cadena e intenta descubrir un color válido. Algunas entradas aceptadas son, por ejemplo:

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

Answer 9

Encontré esta solución http: // haacked .com / archive / 2009/12/29 / convert-rgb-to-hex.aspx y lo estoy usando en mi proyecto

Answer 10

Aquí tienes, esto te permitirá usar $ (selector) .getHexBackgroundColor () para devolver el valor hexadecimal fácilmente:

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