36 votos

Hexagonal de color de fondo a la variable JavaScript

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

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

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

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

No podía encontrar ninguna manera de conseguir hexadecimal del color de fondo (aunque se establece como hex en CSS).

Así que me parece que se necesita para convertir. He encontrado una función para convertir de RGB a hex, pero debe ser llamado con tres diferentes variables, r, g y b. Por lo que tendría que analizar la cadena rgb(x,xx,xxx) en var r=x; var g=xx; var b=xxx; de alguna manera.

Traté de google de análisis de cadenas con JavaScript, pero yo realmente no entiendo las expresiones regulares cosa.

Es allí una manera de conseguir el color de fondo de un div como hex, o la cadena ser convertidos en 3 diferentes variables?

62voto

nickf Puntos 185423

intenta 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 de abajo:

Estoy tratando de modificar el regex para manejar rgb y rgba dependiendo de cuál puedo conseguir. Cualquier sugerencias? Gracias.

No estoy exactamente seguro de si tiene sentido en el contexto de esta pregunta (ya que no se puede representar un color rgba en hexadecimal), pero supongo que podría haber otros usos. De todos modos, podría cambiar el regex a ser como este:

/^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"]

10voto

Fotios Puntos 1300

Si tienes la jQuery disponible, esta es la versión súper compacta que simplemente surgió.

var RGBtoHEX = function(color) {
  retorno "#" +.map(color.match(/\b(\d+)\b/g),function(digit)$ {
    Volver ('0' + parseInt(digit).toString(16)).slice(-2)
  }) bombóm ('');
};

8voto

lpfavreau Puntos 5622

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

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

CSS válido, no te preocupes.


Edición: Ver respuesta nickf de una buena manera de convertir si es absolutamente necesario.

5voto

Mottie Puntos 31167

He encontrado otra función de un tiempo de vuelta (por R0bb13). No tiene el regex, así que tuve que pedir prestado de nickf para que funcione correctamente. Sólo estoy publicando porque es un interesante método que no utiliza una instrucción if o un bucle para dar un resultado. También este script devuelve el valor hexadecimal con un # (era necesario por el Farbtastic plugin que yo estaba usando en el 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 hex resultado de nickf de la secuencia de comandos 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]);
}

3voto

Mark Rhodes Puntos 3114

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X