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

Für die Konvertierung direkt aus jQuery können Sie versuchen:

  function rgbToHex(color) {
    var bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
      return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return     "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
  }

  rgbToHex($('.col-tab-bar .col-tab span').css('color'))

Answer 2

Auch wenn diese Antwort wahrscheinlich nicht perfekt auf die Frage passt, so kann sie doch sehr nützlich sein.

1. Beliebiges Element erstellen

var toRgb = document.createElement('div');

2. Setzen Sie einen beliebigen gültigen Stil auf die Farbe, die Sie umwandeln möchten

toRg.style.color = "hsl(120, 60%, 70%)";

3. Rufen Sie die Stileigenschaft erneut auf

> toRgb.style.color;

< "rgb(133, 225, 133)" Ihre Farbe wurde in Rgb konvertiert

Funktioniert für: Hsl, Hex

Funktioniert nicht für: Benannte Farben

Answer 3

Meine Version von hex2rbg:

1. Akzeptieren Sie kurze Hexadezimalzahlen wie #fff
2. Der Algorithmus ist o(n) und sollte schneller sein als ein Regex. z.B. String.replace, String.split, String.match usw..
3. Verwenden Sie einen konstanten Abstand.
4. Unterstützung von rgb und rgba.

Sie müssen hex.trim() entfernen, wenn Sie den IE8 verwenden.

z.B..

hex2rgb('#fff') //rgb(255,255,255) 
hex2rgb('#fff', 1) //rgba(255,255,255,1) 
hex2rgb('#ffffff') //rgb(255,255,255)  
hex2rgb('#ffffff', 1) //rgba(255,255,255,1)

Code:

function hex2rgb (hex, opacity) {
    hex = hex.trim();
    hex = hex[0] === '#' ? hex.substr(1) : hex;
    var bigint = parseInt(hex, 16), h = [];
    if (hex.length === 3) {
        h.push((bigint >> 4) & 255);
        h.push((bigint >> 2) & 255);
    } else {
        h.push((bigint >> 16) & 255);
        h.push((bigint >> 8) & 255);
    }
    h.push(bigint & 255);
    if (arguments.length === 2) {
        h.push(opacity);
        return 'rgba('+h.join()+')';
    } else {
        return 'rgb('+h.join()+')';
    }
}

Answer 4

Dieses Snippet wandelt hex in rgb und rgb in hex um.

Demo ansehen

function hexToRgb(str) { 
    if ( /^#([0-9a-f]{3}|[0-9a-f]{6})$/ig.test(str) ) { 
        var hex = str.substr(1);
        hex = hex.length == 3 ? hex.replace(/(.)/g, '$1$1') : hex;
        var rgb = parseInt(hex, 16);               
        return 'rgb(' + [(rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255].join(',') + ')';
    } 

    return false; 
}

function rgbToHex(red, green, blue) {
    var out = '#';

    for (var i = 0; i < 3; ++i) {
        var n = typeof arguments[i] == 'number' ? arguments[i] : parseInt(arguments[i]);

        if (isNaN(n) || n < 0 || n > 255) {
            return false;
        }

        out += (n < 16 ? '0' : '') + n.toString(16);
    }
    return out
}

Answer 5

Ich weiß, dass es viele Antworten auf diese Frage gibt, aber wenn Sie wie ich sind und wissen, dass Ihr HEX immer 6 Zeichen mit oder ohne #-Präfix sein wird, dann ist dies wahrscheinlich die einfachste Methode, wenn Sie etwas schnelles Inline-Zeug machen wollen. Es ist egal, ob es mit oder ohne eine Raute beginnt.

var hex = "#ffffff";
var rgb = [
    parseInt(hex.substr(-6,2),16),
    parseInt(hex.substr(-4,2),16),
    parseInt(hex.substr(-2),16)
];