Aquí podría ser tu PUBLICIDAD


Color de fondo hex a variable de JavaScript

votos
35

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?

Publicado el 12/03/2009 a las 15:44
fuente por usuario Removed_account
En otros idiomas...        العربية       

10 respuestas

votos
62

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"]
Respondida el 12/03/2009 a las 03:58
fuente por usuario nickf


Aquí podría ser tu PUBLICIDAD


votos
10

Si tiene jQuery disponible, esta es la versión súper compacto que simplemente ocurrió.

var RGBtoHEX = función (color) {
  devolver "#" + $. mapa (color.match (/ \ b (\ d +) \ b / g), función (dígitos) {
    retorno ( '0' + parseInt (dígitos) .toString (16)). rebanada (-2)
  }).unirse('');
};
Respondida el 22/04/2011 a las 08:49
fuente por usuario Fotios

votos
8

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.

Respondida el 12/03/2009 a las 03:53
fuente por usuario lpfavreau

votos
5

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]);
}
Respondida el 29/07/2009 a las 03:32
fuente por usuario Mottie

votos
3

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;
};
Respondida el 16/11/2010 a las 03:25
fuente por usuario Mark Rhodes

votos
1

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

Una clase de JavaScript que acepta una cadena y trata de averiguar un color válido fuera de él. Algunas entradas aceptadas son, por ejemplo:

* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue
Respondida el 20/04/2011 a las 08:54
fuente por usuario user558987

votos
1

¿Qué hay de esta solución, la función stringRGB2HEX devuelve una copia de la cadena de entrada en todas las ocurrencias de los colores en el formato "RGB (r, g, b)" han sido sustituidos 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;
   }

Éste también convierte los colores RGB en los estilos complejos como background.

Un style.backgroundvalor igual: "none no-repeat scroll rgb(0, 0, 0)"se convierte fácilmente en "none no-repeat scroll #000000"simplemente haciendostringRGB2HEX(style.background)

Respondida el 19/08/2010 a las 04:06
fuente por usuario Marco Demaio

votos
1

Estas soluciones se producirá un error en Chrome, ya que devuelve un RGBA (x, x, x, x) para el fondo de tono.

EDIT: Esto no es necesariamente cierto. Chrome sigue fijará fondos utilizando rgb (), dependiendo de lo que está haciendo. Lo más probable, siempre y cuando no hay un canal alfa aplicado, Chrome responderá con RGB en lugar de RGBA.

Respondida el 22/05/2010 a las 07:35
fuente por usuario Kevin.Riggen

votos
0

Aquí tienes, esto permitirá que usted utilice $ (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]);
}
Respondida el 09/08/2011 a las 05:23
fuente por usuario The Virtual Machinist

votos
0

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

Respondida el 11/01/2010 a las 03:38
fuente por usuario Amr Elgarhy


Aquí podría ser tu PUBLICIDAD