javascript - hexadecimal - background rgb

Color de fondo hex a variable de JavaScript

Question

Soy un poco nuevo en JavaScript y jQuery y ahora estoy enfrentando un problema:

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

jQuery tiene la función css ("color de fondo") 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 forma de obtener un hexágono del color de fondo (aunque esté configurado como hexadecimal en CSS).

Entonces parece que necesito convertirlo. Encontré una función para convertir RGB a hexadecimal, pero necesita ser llamada con tres variables diferentes, r, g y 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 hex, o se puede convertir la cadena en 3 variables diferentes?

Answer 1

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 2

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

Answer 3

Encontré otra función un tiempo atrás ( por R0bb13 ). No tiene la expresión regular, así que tuve que pedir prestada de nickf para que funcione correctamente. Solo lo publico porque es un método interesante que no usa una instrucción if o un ciclo para darle un resultado. Además, este script devuelve el valor hexadecimal con un # (lo necesitaba el complemento Farbtastic que estaba usando en ese momento)

//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 mejor método alternativo:

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 4

Estas soluciones fallarán en Chrome, ya que devuelve un rgba (x, x, x, x) para 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 se aplique un canal alfa, Chrome responda con rgb en lugar de rgba.

Answer 5

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 reemplazadas 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 convierte también colores rgb en estilos complejos como background .

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

Answer 6

Si tienes jQuery disponible, esta es la versión súper compacta que acabo de encontrar.

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

Answer 7

También puede establecer un color CSS usando rgb, como este:

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

Es un CSS válido , no te preocupes.

Editar: ver la respuesta de nickf para una buena forma de convertirlo si es absolutamente necesario.

Answer 8

probar 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 obtenga. ¿Algún consejo? Gracias.

No estoy exactamente seguro si tiene sentido en el contexto de esta pregunta (ya que no se puede representar un color rgba en hexadecimal), pero creo que podría haber otros usos. De todos modos, podrías 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 9

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