Esadecimale da colore di sfondo a variabile JavaScript

Question

Sono un po 'nuovo di JavaScript e jQuery e ora sto affrontando un problema:

Devo pubblicare alcuni dati su PHP e un bit di questi deve essere l'esagono di colore di sfondo di div X.

jQuery ha la funzione css (" background-color ") e con essa posso ottenere il valore RGB dello sfondo in una variabile JavaScript.

La funzione CSS sembra restituire una stringa come questa rgb (0, 70, 255).

Non sono riuscito a trovare alcun modo per ottenere esadecimale del colore di sfondo (anche se è impostato come esadecimale nel CSS).

Quindi sembra che debba convertirlo. Ho trovato una funzione per convertire RGB in esadecimale, ma deve essere chiamata con tre diverse variabili, r, geb. Quindi avrei bisogno di analizzare la stringa rgb (x, xx, xxx) in var r = x; var g = xx; var b = xxx; in qualche modo.

Ho provato a google analizzare le stringhe con JavaScript, ma non capivo davvero la cosa delle espressioni regolari.

Esiste un modo per ottenere il colore di sfondo di div come esadecimale o la stringa può essere convertita in 3 variabili diverse?

Answer 1

prova questo:

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"

In risposta alla domanda nei commenti qui sotto:

  

Sto cercando di modificare il regex per gestire sia rgb che rgba a seconda di quello che ottengo. Qualche suggerimento? Grazie.

Non sono esattamente sicuro che abbia senso nel contesto di questa domanda (dal momento che non puoi rappresentare un colore rgba in esadecimale), ma immagino che potrebbero esserci altri usi. Ad ogni modo, potresti cambiare la regex in questo modo:

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

Esempio di output:

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 hai jQuery disponibile, questa è la versione super-compatta che ho appena inventato.

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

Puoi anche impostare un colore CSS usando rgb, come questo:

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

È CSS valido , non ti preoccupare.

---

Modifica: vedi nickf rispondi per un buon modo per convertirlo se assolutamente necessario.

Answer 4

Ho trovato un'altra funzione poco tempo fa ( di R0bb13 ). Non ha la regex, quindi ho dovuto prenderlo in prestito da Nickf per farlo funzionare correttamente. Lo sto solo postando perché è un metodo interessante che non usa un'istruzione if o un ciclo per darti un risultato. Anche questo script restituisce il valore esadecimale con un # (era necessario per il plug-in Farbtastic che stavo usando su il tempo)

//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: il risultato esadecimale dello script di nickf dovrebbe essere 0046ff e non 0070ff, ma non è un grosso problema: P

Aggiorna, un altro migliore metodo 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

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 6

Queste soluzioni non funzioneranno in Chrome, poiché restituisce un rgba (x, x, x, x) per il colore di sfondo.

EDIT: questo non è necessariamente vero. Chrome imposterà comunque gli sfondi usando rgb (), a seconda di ciò che stai facendo. Molto probabilmente finché non viene applicato alcun canale alfa, Chrome risponderà con rgb anziché rgba.

Answer 7

Come su questa soluzione, la funzione stringRGB2HEX restituisce una copia della stringa di input in cui tutte le occorrenze di colori nel formato "rgb (r, g, b) " sono stati sostituiti dal formato esadecimale " # 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;
   }

Questo converte anche i colori rgb in stili complessi come background .

Un valore style.background come: " none nessuna ripetizione scroll rgb (0, 0, 0) " viene facilmente convertito in " nessuno scorrere ripetutamente # 000000 " semplicemente facendo stringRGB2HEX(style.background)

Answer 8

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

Una classe JavaScript che accetta una stringa e cerca di capirne un colore valido. Alcuni input accettati sono ad esempio:

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

Answer 9

Ho trovato questa soluzione http: // haacked .com / archive / 2009/12/29 / convert-rgb-to-hex.aspx e lo sto usando nel mio progetto

Answer 10

Ecco fatto, questo ti permetterà di usare $ (selettore) .getHexBackgroundColor () per restituire facilmente il valore esadecimale:

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