Background-color Hex to JavaScript variable

Jeśli masz jQuery dostępny, jest to super-kompaktowa wersja, którą właśnie wymyśliłem.

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

Możesz również ustawić kolor CSS używając rgb, na przykład:

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

Jest to poprawny CSS , nie martw się.

Edit: Zobacz nickf answer dla miłego sposobu, aby przekonwertować go, jeśli absolutnie trzeba.

Znalazłem inną funkcję jakiś czas temu (przez R0bb13 ). Nie ma regex, więc musiałem pożyczyć go od nickf, aby działał poprawnie. Zamieszczam go tylko dlatego, że jest to ciekawa metoda, która nie używa instrukcji if ani pętli, aby dać ci wynik. Również ten skrypt zwraca wartość szesnastkową za pomocą # (była potrzebna przez Farbtastic plugin, którego używałem w tym czasie)

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

Uwaga: wynik hex ze skryptu nickf powinien wynosić 0046ff, a nie 0070ff, ale nie jest duży umowa: p

Update, another better alternatywna metoda:

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

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

Te rozwiązania zawiodą w Chrome, ponieważ zwraca rgba (x, x,X,x) dla koloru tła.

EDIT: to niekoniecznie prawda. Chrome nadal będzie ustawiać tła za pomocą RGB (), w zależności od tego, co robisz. Najprawdopodobniej tak długo, jak nie ma zastosowanego kanału alfa, Chrome odpowie rgb zamiast rgba.

Co powiesz na to rozwiązanie, funkcja stringRGB2HEX zwraca kopię ciągu wejściowego,w którym wszystkie występujące kolory w formacie "rgb(R,g, b)" zostały zastąpione przez format hex "#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;
   }

Ten konwertuje również kolory rgb w złożonych stylach, takich jak background.

A style.background wartość taka jak: "none no-repeat scroll rgb(0, 0, 0)" jest łatwo przekonwertowana na "none no-repeat scroll #000000" po prostu wykonując stringRGB2HEX(style.background)

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

Klasa JavaScript, która akceptuje ciąg znaków i próbuje dowiedzieć się poprawnego koloru z niego. Niektóre akceptowane wejścia to na przykład:

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

Znalazłem to rozwiązanie http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx i używam go w moim projekcie

Proszę bardzo, pozwoli to na użycie $(selektor).getHexBackgroundColor (), aby łatwo zwrócić wartość szesnastkową :

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