de fondo de color hexadecimal a la variable de JavaScript

Question

Soy una especie de nuevo en JavaScript y jQuery y ahora estoy frente a un problema:

necesito para publicar algunos datos para PHP y un bit de los datos tienen que ser el hexágono color de fondo del div X.

jQuery tiene la función de CSS ("background-color") y con ella se puede 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 alguna manera de obtener hexadecimal del color de fondo (a pesar de que está establecido como hexagonal en CSS).

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.

Traté de google analizar cadenas con JavaScript, pero no entendía realmente lo expresiones regulares.

¿Hay una manera de conseguir el color de fondo del div como hexagonal, o la cadena puede ser convertida en 3 variables diferentes?

Answer 1

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:

que estoy tratando de modificar la expresión regular para manejar RGB y RGBA dependiendo cuál consigo . ¿Algún consejo? Gracias.

no estoy muy 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 que ser 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

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

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

Es valid CSS, no se preocupe.

---

Editar: Ver nickf answer para una buena manera de convertirlo si es absolutamente necesario.

Answer 3

me encontré con otra función de un tiempo atrás (by 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.También este script devuelve el valor hexadecimal con un # (Se necesita el Farbtastic plugin 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 hexagonal del guión de nickf debería ser 0046ff y no 0070ff, pero no grande trato: 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

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

Answer 5

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 se aplique un canal alfa, Chrome responda con rgb en lugar de rgba.

Answer 6

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

Ésta convierte también los colores RGB en los 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 7

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 8

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

clase

Una JavaScript que acepta una cadena y trata de la figura sacar un color válido de eso. Algunas entradas aceptadas son por ejemplo:

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

Answer 9

Si tiene jQuery disponible, esta es la versión súper compacto que simplemente 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 10

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