RGB nach Hex und Hex nach RGB

Question

Wie konvertiert man Farben im RGB-Format in das Hex-Format und umgekehrt?

Konvertieren Sie zum Beispiel '#0080C0' a (0, 128, 192) .

Answer 1

Sieht so aus, als ob Sie nach etwas Ähnlichem suchen:

function hexstr(number) {
    var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
    var low = number & 0xf;
    var high = (number >> 4) & 0xf;
    return "" + chars[high] + chars[low];
}

function rgb2hex(r, g, b) {
    return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}

Answer 2

Ein völlig anderer Ansatz zur Umwandlung von Hex-Farbcode in RGB ohne Regex

Es behandelt sowohl #FFF y #FFFFFF Format auf der Grundlage der Länge der Zeichenkette. Es entfernt # vom Anfang der Zeichenkette und teilt jedes Zeichen der Zeichenkette und konvertiert es zur Basis 10 und fügt es zum jeweiligen Index auf der Basis seiner Position hinzu.

//Algorithm of hex to rgb conversion in ES5
function hex2rgbSimple(str){
  str = str.replace('#', '');
  return str.split('').reduce(function(result, char, index, array){
    var j = parseInt(index * 3/array.length);
    var number = parseInt(char, 16);
    result[j] = (array.length == 3? number :  result[j]) * 16 + number;
    return result;
  },[0,0,0]);
}

//Same code in ES6
hex2rgb = str => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]);

//hex to RGBA conversion
hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0,a||1]);

//hex to standard RGB conversion
hex2rgbStandard = str => `RGB(${str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]).join(',')})`;

console.log(hex2rgb('#aebece'));
console.log(hex2rgbSimple('#aebece'));

console.log(hex2rgb('#aabbcc'));

console.log(hex2rgb('#abc'));

console.log(hex2rgba('#abc', 0.7));

console.log(hex2rgbStandard('#abc'));

Answer 3

Basierend auf @MichaPerakowski Antwort (EcmaScipt 6) und seine Antwort auf der Grundlage Tim Downs Antwort

Ich schrieb eine modifizierte Version der Funktion der Konvertierung hexToRGB mit dem Zusatz der sicheren Überprüfung, wenn die r/g/b Farbkomponenten zwischen 0-255 sind und auch die Funktionen können Zahl r/g/b Parameter oder String r/g/b Parameter und hier ist es nehmen:

 function rgbToHex(r, g, b) {
     r = Math.abs(r);
     g = Math.abs(g);
     b = Math.abs(b);

     if ( r < 0 ) r = 0;
     if ( g < 0 ) g = 0;
     if ( b < 0 ) b = 0;

     if ( r > 255 ) r = 255;
     if ( g > 255 ) g = 255;
     if ( b > 255 ) b = 255;

    return '#' + [r, g, b].map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? '0' + hex : hex
    }).join('');
  }

Um die Funktion sicher zu verwenden, sollte man prüfen, ob die übergebene Zeichenkette eine echte rbg-Zeichenkettenfarbe ist - eine sehr einfache Prüfung könnte zum Beispiel sein:

if( rgbStr.substring(0,3) === 'rgb' ) {

  let rgbColors = JSON.parse(rgbStr.replace('rgb(', '[').replace(')', ']'))
  rgbStr = this.rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);

  .....
}

Answer 4

Die am besten bewertete Antwort von Tim Down bietet die beste Lösung, die ich für die Konvertierung in RGB sehen kann. Ich mag diese Lösung für Hex-Konvertierung aber besser, weil es die prägnantesten Bounds Checking und Null-Padding für die Konvertierung in Hex bietet.

function RGBtoHex (red, green, blue) {
  red = Math.max(0, Math.min(~~red, 255));
  green = Math.max(0, Math.min(~~green, 255));
  blue = Math.max(0, Math.min(~~blue, 255));

  return '#' + ('00000' + (red << 16 | green << 8 | blue).toString(16)).slice(-6);
};

Die Verwendung der Linksverschiebungsoperatoren '<<' und '|' macht diese Lösung ebenfalls zu einem Vergnügen.

Answer 5

Mein Beispiel =)

color: {
            toHex: function(num){
                var str = num.toString(16);
                return (str.length<6?'#00'+str:'#'+str);
            },
            toNum: function(hex){
                return parseInt(hex.replace('#',''), 16);
            },
            rgbToHex: function(color)
            {
                color = color.replace(/\s/g,"");
                var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);
                if(aRGB)
                {
                    color = '';
                    for (var i=1;  i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
                }
                else color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
                return '#'+color;
            }