Hexadecimal de cor de fundo para variável JavaScript

Question

Sou meio novo em JavaScript e jQuery e agora estou enfrentando um problema:

Preciso postar alguns dados no PHP e um bit dos dados precisa ser a cor de fundo hexadecimal da div X.

jQuery tem a função css("background-color") e com ela posso obter o valor RGB do fundo em uma variável JavaScript.

A função CSS parece retornar uma string como esta rgb(0, 70, 255).

Não consegui encontrar nenhuma maneira de obter o hexadecimal da cor de fundo (mesmo que esteja definido como hexadecimal em CSS).

Parece que preciso convertê-lo.Encontrei uma função para converter RGB em hexadecimal, mas ela precisa ser chamada com três variáveis ​​diferentes, r, g e b.Então, eu precisaria analisar a string rgb(x,xx,xxx) em var r=x;varg=xx;var b=xxx;de alguma forma.

Tentei analisar strings no Google com JavaScript, mas não entendi muito bem o negócio das expressões regulares.

Existe uma maneira de obter a cor de fundo do div como hexadecimal ou a string pode ser convertida em 3 variáveis ​​diferentes?

Answer 1

experimente isso:

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"

Respondendo à pergunta nos comentários abaixo:

Estou tentando modificar o regex para lidar com RGB e RGB, dependendo de qual eu obtiver.Alguma dica?Obrigado.

Não tenho certeza se isso faz sentido no contexto desta questão (já que você não pode representar uma cor rgba em hexadecimal), mas acho que pode haver outros usos.De qualquer forma, você poderia alterar o regex para ficar assim:

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

Exemplo de saída:

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

Se você tiver o jQuery disponível, esta é a versão supercompacta que acabei de criar.

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

Você também pode definir uma cor CSS usando rgb, como esta:

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

Isso é CSS válido, não se preocupe.

---

Editar: Ver resposta do Nickf para uma ótima maneira de convertê-lo se for absolutamente necessário.

Answer 4

Encontrei outra função há algum tempo (por R0bb13).Ele não tem regex, então tive que pegá-lo emprestado do nickf para fazê-lo funcionar corretamente.Só estou postando porque é um método interessante que não usa uma instrução if ou um loop para fornecer um resultado.Além disso, este script retorna o valor hexadecimal com um # (era necessário para o Farbtástico plugin que eu estava usando na época)

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

Observação:O resultado hexadecimal do script do nickf deve ser 0046ff e não 0070ff, mas não é grande coisa: P

Atualização, outra melhorar 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 5

Com 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

Essas soluções falharão no Chrome, pois retorna um rgba(x,x,x,x) para a cor de fundo.

EDITAR:Isto não é necessariamente verdade.O Chrome ainda definirá planos de fundo usando rgb(), dependendo do que você estiver fazendo.Provavelmente, enquanto não houver nenhum canal alfa aplicado, o Chrome responderá com rgb em vez de rgba.

Answer 7

Que tal esta solução, função stringRGB2HEX retorna uma cópia da string de entrada onde todas as ocorrências de cores no formato "rgb(r,g,b)" foram substituídas pelo 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 também converte cores RGB em estilos complexos como background.

A style.background valor como: "none no-repeat scroll rgb(0, 0, 0)" é facilmente convertido em "none no-repeat scroll #000000" simplesmente fazendo stringRGB2HEX(style.background)

Answer 8

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

Uma classe JavaScript que aceita uma string e tenta descobrir uma cor válida a partir dela.Algumas entradas aceitas são, por exemplo:

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

Answer 9

Eu encontrei esta solução http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx e estou usando no meu projeto

Answer 10

Aqui está, isso permitirá que você use $(selector).getHexBackgroundColor() para retornar o valor hexadecimal facilmente:

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