RGB zu Hex und Hex zu RGB

555

Wie konvertiere ich Farben im RGB-Format in das Hex-Format und umgekehrt?

Zum Beispiel konvertieren '#0080C0'in (0, 128, 192).

Sindar
quelle

Antworten:

1235

Hinweis : Beide Versionen rgbToHexerwarten Ganzzahlwerte für r, gund b, daher müssen Sie Ihre eigene Rundung durchführen, wenn Sie nicht ganzzahlige Werte haben.

Im Folgenden wird die Konvertierung von RGB in Hex ausgeführt und die erforderliche Null-Auffüllung hinzugefügt:

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

Umkehren in die andere Richtung:

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";

Schließlich eine alternative Version von rgbToHex(), wie in der Antwort von @ casablanca besprochen und in den Kommentaren von @cwolves vorgeschlagen:

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

Update 3. Dezember 2012

Hier ist eine Version davon hexToRgb(), die auch ein Hex-Triplett wie "# 03F" analysiert:

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";
alert(hexToRgb("#03f").g); // "51";

Tim Down
quelle
10
@ Vitim.us: <<ist der bitweise Linksverschiebungsoperator. Angenommen, es ghandelt sich um eine Ganzzahl ungleich Null, die g << 8daher effektiv mit g256 multipliziert wird und am Ende ihrer hexadezimalen Darstellung zu Nullen addiert wird. Ebenso r << 16fügt 4 Nullen. Durch Hinzufügen 1 << 24(1000000 in hex) wird sichergestellt, dass die hexadezimale Darstellung mit allen erforderlichen Nullen links aufgefüllt wird, sobald die führende 1mit entfernt wird slice(). Zum Beispiel, wenn rund gwaren beide Nullen und bwar 51, ((r << 16) + (g << 8) + b).toString(16)zurückkehren würde die Zeichenfolge „33“; hinzufügen 1 << 24und Sie erhalten "1000033". Dann zieh das aus 1und du bist da.
Tim Down
Würde die Bitverschiebung (z. B. (r << 16)) sowohl auf großen als auch auf kleinen Endian-Computern das gleiche Ergebnis liefern? Edit: Das tut es nicht. Hier ist der Grund: stackoverflow.com/questions/1041554/…
WoodenKitty
@ Gothdo: Es tut uns leid, Ihre Bearbeitung zurückzusetzen, aber es ist oft nicht möglich oder praktisch, ES6 zu verwenden. Die vorherige Version funktioniert überall.
Tim Down
3
Ihr rgbToHex funktioniert nicht. Holen
Sie
1
In Bezug auf die neueste rgbToHexFunktion. Sie möchten entweder Ihre übergebenen RGB-Werte als Ganzzahlen typisieren oder die Funktion rgbToHex geringfügig ändern. Beispiel: jsfiddle.net/cydqo6wj Aktuell: return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); Geändert: return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1); In der geänderten Version erzwinge ich einfach, dass die RGB-Werte vor der Umstellung auf 16 / hex bei ganzen Zahlen ausgewertet werden.
user2977468
148

Eine alternative Version von hexToRgb:

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

Edit: 28.03.2017 Hier ist ein anderer Ansatz das scheint noch schneller zu sein

function hexToRgbNew(hex) {
  var arrBuff = new ArrayBuffer(4);
  var vw = new DataView(arrBuff);
  vw.setUint32(0,parseInt(hex, 16),false);
  var arrByte = new Uint8Array(arrBuff);

  return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}

Edit: 8/11/2017 Der neue Ansatz oben nach mehr Tests ist nicht schneller :(. Obwohl es eine unterhaltsame Alternative ist.

David
quelle
57
Eine Linie der Perfektion : return [r, g, b].join();.
Pavlo
5
Oder für die alles einkapselnde Einzeilerlösung:return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
Pluto
12
Ich benutze dies mit einem Tweak - entferne nicht-hexadezimale Zeichen (wie ein führendes #) vor parseInt:hex = hex.replace(/[^0-9A-F]/gi, '');
Joews
5
Verwenden Sie die Kurzversion nicht so schnell. JSPerf zeigt, dass die in dieser Antwort am schnellsten ist: jsperf.com/2014-09-16-hex-to-rgb
Olav Kokovkin
1
Seien Sie vorsichtig damit, die Ausgabe ist nicht zuverlässig. Es ließ eine Farbe nahe Schwarz dunkelrosa erscheinen. Verwenden Sie besser die Funktion von oben Antwort.
Maciej Krawczyk
64

ECMAScript 6-Version von Tim Downs Antwort

Konvertieren von RGB in Hex

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

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

Hex in RGB konvertieren

Gibt ein Array zurück [r, g, b]. Funktioniert auch mit Hex-Kurztriolen wie "#03F".

const hexToRgb = hex =>
  hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
    .substring(1).match(/.{2}/g)
    .map(x => parseInt(x, 16))

console.log(hexToRgb("#0033ff")) // [0, 51, 255]
console.log(hexToRgb("#03f")) // [0, 51, 255]

Bonus: RGB mit padStart()Methode zu verhexen

const rgbToHex = (r, g, b) => '#' + [r, g, b]
  .map(x => x.toString(16).padStart(2, '0')).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

Beachten Sie, dass diese Antwort die neuesten ECMAScript-Funktionen verwendet, die in älteren Browsern nicht unterstützt werden. Wenn Sie möchten, dass dieser Code in allen Umgebungen funktioniert, sollten Sie Babel zum Kompilieren Ihres Codes verwenden.

Michał Perłakowski
quelle
hexToRgb () kann leicht an die 4- und 8-stellige hexadezimale RGBA-Notation angepasst werden: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)wird: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b, a) => '#' + r + r + g + g + b + b + a + a)Gibt es eine Möglichkeit, den regulären Ausdruck mit A von RGBA als optionalem 4. hexadezimalen Wert zu arbeiten? Das würde die Funktionalität absolut vervollständigen und einen regulären Ausdruck mit Hex-RGB und RGBA funktionieren lassen. Ansonsten sind es zwei reguläre Ausdrücke, einer mit 3 Werten, der andere mit 4. Sie müssen den 4. Wert durch 255 teilen, um das 4. Argument für rgba () zu erhalten.
Jamess
44

Hier ist meine Version:

  function rgb2hex(red, green, blue) {
        var rgb = blue | (green << 8) | (red << 16);
        return '#' + (0x1000000 + rgb).toString(16).slice(1)
  }

  function hex2rgb(hex) {
        // long version
        r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return parseInt(x, 16); });
        }
        // short version
        r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16); });
        }
        return null;
  }
FelipeC
quelle
cool, aber die Frage war hex2rgb. Kannst du es so kurz machen, das wäre schön :)
K. Kilian Lindberg
4
Obwohl es nicht in beide Richtungen geht, muss ich dies positiv bewerten, da aus irgendeinem Grund die anderen RGB-Hex-Lösungen in dieser Frage für mich nicht funktionierten.
Gans
Die Frage war zuerst von rgb2hex. Jedenfalls habe ich mein eigenes hex2rgb hinzugefügt.
FelipeC
Ein bisschen verwirrt über die rgb2hexMethode. Warum fügen wir 0x1000000zu rgb, und warum müssen wir nennen .slice(1)endlich?
Hackjutsu
Da Blau #FF wäre, fügen wir 0x1000000 hinzu, also # 10000FF, und entfernen dann die erste "1".
FelipeC
26

Ich gehe davon aus, dass Sie eine hexadezimale HTML-Notation meinen, d #rrggbb. H. Ihr Code ist fast korrekt, außer Sie haben die Reihenfolge umgekehrt. Es sollte sein:

var decColor = red * 65536 + green * 256 + blue;

Die Verwendung von Bitverschiebungen kann auch das Lesen erleichtern:

var decColor = (red << 16) + (green << 8) + blue;
casablanca
quelle
Großartig, außer dass Sie das Null-Pad auf 6 Zeichen belassen müssen, wenn rot <16:var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
Mark Kahn
Scheint bis auf dieses zu funktionieren: (0,128,192) wahrscheinlich wegen der 0?
Sindar
@cwolves: Du hast recht, das habe ich verpasst. Es sollte jedoch an die letzte Zeichenfolge angehängt werden, nicht an die Ganzzahl.
Casablanca
@Sindar: Siehe @cwolves 'Kommentar, wenn red < 16Sie 0dem Endergebnis ein Präfix voranstellen müssen .
Casablanca
20
Okay, HIER:var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
Mark Kahn
22
function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
Rezoner
quelle
2
Ich liebe einfache Antworten
Björn Behrendt
Hexerei! Sie sollten diesem sehr coolen Einzeiler eine Erklärung hinzufügen.
James Harrington
Nett! Hier ist die gleiche Sache, mit der Ausnahme minimierte und ein Objekt mit Eigenschaften zurückkehren r, g, b:function hex2rgb(hex){return{r:'0x'+hex[1]+hex[2]|0,g:'0x'+hex[3]+hex[4]|0,b:'0x'+hex[5]+hex[6]|0}}
ashleedawg
21

Dieser Code akzeptiert # fff- und #ffffff-Varianten und Deckkraft.

function hex2rgb(hex, opacity) {
        var h=hex.replace('#', '');
        h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));

        for(var i=0; i<h.length; i++)
            h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);

        if (typeof opacity != 'undefined')  h.push(opacity);

        return 'rgba('+h.join(',')+')';
}
falko
quelle
11

Einzeiliges funktionelles HEX zu RGBA

Unterstützt sowohl kurze #fffals auch lange #ffffffFormen.
Unterstützt Alpha-Kanal (Deckkraft).
Es ist egal, ob Hash angegeben ist oder nicht, funktioniert in beiden Fällen.

function hexToRGBA(hex, opacity) {
    return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')';
}

Beispiele:

hexToRGBA('#fff')        ->  rgba(255,255,255,1)  
hexToRGBA('#ffffff')     ->  rgba(255,255,255,1)  
hexToRGBA('#fff', .2)    ->  rgba(255,255,255,0.2)  
hexToRGBA('#ffffff', .2) ->  rgba(255,255,255,0.2)  
hexToRGBA('fff', .2)     ->  rgba(255,255,255,0.2)  
hexToRGBA('ffffff', .2)  ->  rgba(255,255,255,0.2)  
Denis
quelle
8
Versuchen Sie, für Menschen lesbaren Code zu schreiben, nicht für Einzeiler. Es gibt keinen Gewinn, wenn Sie Ihren Code sowieso vor der Produktion minimieren.
Roko C. Buljan
11

Dies könnte verwendet werden, um Farben aus berechneten Stil-Eigenschaften zu erhalten:

function rgbToHex(color) {
    color = ""+ color;
    if (!color || color.indexOf("rgb") < 0) {
        return;
    }

    if (color.charAt(0) == "#") {
        return color;
    }

    var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
        r = parseInt(nums[2], 10).toString(16),
        g = parseInt(nums[3], 10).toString(16),
        b = parseInt(nums[4], 10).toString(16);

    return "#"+ (
        (r.length == 1 ? "0"+ r : r) +
        (g.length == 1 ? "0"+ g : g) +
        (b.length == 1 ? "0"+ b : b)
    );
}

// not computed 
<div style="color: #4d93bc; border: 1px solid red;">...</div> 
// computed 
<div style="color: rgb(77, 147, 188); border: 1px solid rgb(255, 0, 0);">...</div>

console.log( rgbToHex(color) ) // #4d93bc
console.log( rgbToHex(borderTopColor) ) // #ff0000

Ref: https://github.com/k-gun/so/blob/master/so_util.js

K-Gun
quelle
Danke dafür. Aber es gibt einen kleinen Fehler: sollte zurückkehren (r.length == 1 ? "0" + r : r)und ähnlich für Grün und Blau.
typhon
7

Bitweise Lösung ist normalerweise seltsam. Aber in diesem Fall denke ich, dass das eleganter ist 😄

function hexToRGB(hexColor){
  return {
    red: (hexColor >> 16) & 0xFF,
    green: (hexColor >> 8) & 0xFF,  
    blue: hexColor & 0xFF,
  }
}

Verwendungszweck:

const {red, green, blue } = hexToRGB(0xFF00FF)

console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255
Aral Roca
quelle
6

// Ohne Berücksichtigung der hsl-Notation werden Farbwerte üblicherweise als Namen, rgb, rgba oder hex- ausgedrückt.

// Hex kann 3 oder 6 Werte sein.

// Rgb kann sowohl Prozentsätze als auch ganzzahlige Werte sein.

// Am besten zumindest alle diese Formate berücksichtigen.

String.prototype.padZero= function(len, c){
    var s= this, c= c || "0", len= len || 2;
    while(s.length < len) s= c + s;
    return s;
}
var colors={
    colornames:{
        aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
        gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
        navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
        silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
    },
    toRgb: function(c){
        c= '0x'+colors.toHex(c).substring(1);
        c= [(c>> 16)&255, (c>> 8)&255, c&255];
        return 'rgb('+c.join(',')+')';
    },
    toHex: function(c){
        var tem, i= 0, c= c? c.toString().toLowerCase(): '';
        if(/^#[a-f0-9]{3,6}$/.test(c)){
            if(c.length< 7){
                var A= c.split('');
                c= A[0]+A[1]+A[1]+A[2]+A[2]+A[3]+A[3];
            }
            return c;
        }
        if(/^[a-z]+$/.test(c)){
            return colors.colornames[c] || '';
        }
        c= c.match(/\d+(\.\d+)?%?/g) || [];
        if(c.length<3) return '';
        c= c.slice(0, 3);
        while(i< 3){
            tem= c[i];
            if(tem.indexOf('%')!= -1){
                tem= Math.round(parseFloat(tem)*2.55);
            }
            else tem= parseInt(tem);
            if(tem< 0 || tem> 255) c.length= 0;
            else c[i++]= tem.toString(16).padZero(2);
        }
        if(c.length== 3) return '#'+c.join('').toLowerCase();
        return '';
    }
}
//var c='#dc149c';
//var c='rgb(100%,25%,0)';
//
var c= 'red';
alert(colors.toRgb(c)+'\n'+colors.toHex(c));
kennebec
quelle
Dies ist die umfassendste Version, die ich mir angesehen habe. Es wäre großartig, wenn es auch die Farben von rgba extrahieren könnte.
Michael Scheper
6

@ Tim, um deine Antwort zu ergänzen (es ist etwas umständlich, dies in einen Kommentar einzubauen).

Wie geschrieben, habe ich festgestellt, dass die Funktion rgbToHex einen String mit Elementen nach dem Punkt zurückgibt und dass die Werte für r, g, b in den Bereich von 0 bis 255 fallen müssen.

Ich bin mir sicher, dass dies für die meisten offensichtlich erscheint, aber es dauerte zwei Stunden, bis ich es herausgefunden hatte, und bis dahin war die ursprüngliche Methode auf 7 Zeilen angewachsen, bevor mir klar wurde, dass mein Problem anderswo lag. Um anderen Zeit und Ärger zu sparen, ist hier mein leicht geänderter Code, der die Voraussetzungen überprüft und die überflüssigen Teile der Zeichenfolge abschneidet.

function rgbToHex(r, g, b) {
    if(r < 0 || r > 255) alert("r is out of bounds; "+r);
    if(g < 0 || g > 255) alert("g is out of bounds; "+g);
    if(b < 0 || b > 255) alert("b is out of bounds; "+b);
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}
Matt Stevens
quelle
5

(2017) SIMPLE ES6 zusammensetzbare Pfeilfunktionen

Ich kann nicht widerstehen, dies für diejenigen zu teilen, die einige moderne funktionale / kompositorische js mit ES6 schreiben. Hier sind einige raffinierte Einzeiler, die ich in einem Farbmodul verwende, das Farbinterpolation für die Datenvisualisierung durchführt.

Beachten Sie, dass dies den Alphakanal überhaupt nicht behandelt.

const arrayToRGBString = rgb => `rgb(${rgb.join(',')})`;
const hexToRGBArray = hex => hex.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
const rgbArrayToHex = rgb => `#${rgb.map(v => v.toString(16).padStart(2, '0')).join('')}`;
const rgbStringToArray = rgb => rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).splice(1, 3)
  .map(v => Number(v));
const rgbStringToHex = rgb => rgbArrayToHex(rgbStringToArray(rgb));
Ron Gilchrist
quelle
5

Versuchen

let hex2rgb= c=> `rgb(${c.substr(1).match(/../g).map(x=>+`0x${x}`)})`;
let rgb2hex= c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``

Kamil Kiełczewski
quelle
4

Wenn Sie zwei Farbwerte (angegeben als RGB, Namensfarbe oder Hex-Wert) vergleichen oder in HEX konvertieren müssen, verwenden Sie das HTML5-Canvas-Objekt.

var canvas = document.createElement("canvas");
var ctx = this.canvas.getContext('2d');

ctx.fillStyle = "rgb(pass,some,value)";
var temp =  ctx.fillStyle;
ctx.fillStyle = "someColor";

alert(ctx.fillStyle == temp);
Anton Putov
quelle
3

Könnten Sie nach so etwas sein?

function RGB2HTML(red, green, blue)
{
    return '#' + red.toString(16) +
           green.toString(16) +
           blue.toString(16);
}

alert(RGB2HTML(150, 135, 200));

zeigt # 9687c8 an

Miquel
quelle
1
> RGB2HTML> 2HTML> TO HTML (ಠ ʖ̯ ಠ) HEX ist nicht mit HTML verwandt
Даниил Пронин
3

Für 3 Stellen kann die hexToRgb-Funktion von Tim Down wie folgt verbessert werden:

var hex2Rgb = function(hex){
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})|([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex);
  return result ? {        
    r: parseInt(hex.length <= 4 ? result[4]+result[4] : result[1], 16),
    g: parseInt(hex.length <= 4 ? result[5]+result[5] : result[2], 16),
    b: parseInt(hex.length <= 4 ? result[6]+result[6] : result[3], 16),
    toString: function() {
      var arr = [];
      arr.push(this.r);
      arr.push(this.g);
      arr.push(this.b);
      return "rgb(" + arr.join(",") + ")";
    }
  } : null;
};
Erhan
quelle
2

Ich bin auf dieses Problem gestoßen, da ich jeden Farbwert akzeptieren und eine Deckkraft hinzufügen wollte. Deshalb habe ich dieses schnelle jQuery-Plugin erstellt, das die native Zeichenfläche in modernen Browsern verwendet. Scheint einfach toll zu funktionieren.

Bearbeiten

Es stellt sich heraus, dass ich nicht herausfinden kann, wie man es zu einem richtigen jQuery-Plugin macht, also werde ich es einfach als reguläre Funktion präsentieren.

//accepts any value like '#ffffff', 'rgba(255,255,255,1)', 'hsl(0,100%,100%)', or 'white'
function toRGBA( c ) {
    var
        can  = document.createElement( 'canvas' ),
        ctx  = can.getContext( '2d' );
    can.width = can.height = 1;
    ctx.fillStyle = c;
    console.log( ctx.fillStyle ); //always css 6 digit hex color string, e.g. '#ffffff'
    ctx.fillRect( 0, 0, 1, 1 ); //paint the canvas
    var
        img  = ctx.getImageData( 0, 0, 1, 1 ),
        data = img.data,
        rgba = {
            r: data[ 0 ], //0-255 red
            g: data[ 1 ], //0-255 green
            b: data[ 2 ], //0-255 blue
            a: data[ 3 ]  //0-255 opacity (0 being transparent, 255 being opaque)
        };
    return rgba;
};
Patrick Roberts
quelle
2

Ich brauchte eine Funktion, die auch ungültige Werte akzeptiert

RGB (-255, 255, 255) RGB (510, 255, 255)

Dies ist ein Spin-off der Antwort von @cwolves

function rgb(r, g, b) {
  this.c = this.c || function (n) {
    return Math.max(Math.min(n, 255), 0)
  };

  return ((1 << 24) + (this.c(r) << 16) + (this.c(g) << 8) + this.c(b)).toString(16).slice(1).toUpperCase();
}
Chad Scira
quelle
2
R = HexToR("#FFFFFF");
G = HexToG("#FFFFFF");
B = HexToB("#FFFFFF");

function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

Verwenden Sie diese Funktion, um das Ergebnis ohne Probleme zu erzielen. :) :)

user3767878
quelle
2

Kurzversion, die eine Zeichenfolge akzeptiert:

function rgbToHex(a){
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write(rgbToHex("rgb(255,255,255)"));

Um zu überprüfen, ob es nicht bereits hexadezimal ist

function rgbToHex(a){
  if(~a.indexOf("#"))return a;
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write("rgb: "+rgbToHex("rgb(255,255,255)")+ " -- hex: "+rgbToHex("#e2e2e2"));

Aart den Braber
quelle
2

Obwohl diese Antwort wahrscheinlich nicht perfekt zur Frage passt, kann sie dennoch sehr nützlich sein.

  1. Erstellen Sie ein beliebiges zufälliges Element

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

  1. Stellen Sie einen gültigen Stil auf die Farbe ein, die Sie konvertieren möchten

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

  1. Rufen Sie die style-Eigenschaft 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

Entarra De'Lacord
quelle
Dies ist möglicherweise die praktischste Antwort bei der Arbeit mit dem Browser. Oft möchten Sie einfach die Farbe eines vorhandenen Elements mit einer bekannten Farbe vergleichen, die in # -Notation ausgedrückt wird.
Panu Logic
2

Meine Version von hex2rbg:

  1. Akzeptiere kurzes Hex wie #fff
  2. Die Algorithmuskompetenz ist o (n) und sollte schneller sein als die Verwendung von Regex. zB String.replace, String.split, String.matchetc ..
  3. Verwenden Sie konstanten Platz.
  4. Unterstütze rgb und rgba.

Möglicherweise müssen Sie hex.trim () entfernen, wenn Sie 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()+')';
    }
}
Eric Chen
quelle
Beachten Sie, dass dies h.join(',')dasselbe ist wie h.join().
2

Dieses Snippet konvertiert hex in rgb und rgb in hex.

Demo anzeigen

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
}
user2240578
quelle
Gut, wie es mit Kurzschrift umgeht, aber könnte es eher eine Struktur als eine Zeichenfolge zurückgeben?
Dunc
1

Ich arbeite mit XAML-Daten im Hex-Format #AARRGGBB (Alpha, Rot, Grün, Blau). Mit den obigen Antworten ist hier meine Lösung:

function hexToRgba(hex) {
    var bigint, r, g, b, a;
    //Remove # character
    var re = /^#?/;
    var aRgb = hex.replace(re, '');
    bigint = parseInt(aRgb, 16);

    //If in #FFF format
    if (aRgb.length == 3) {
        r = (bigint >> 4) & 255;
        g = (bigint >> 2) & 255;
        b = bigint & 255;
        return "rgba(" + r + "," + g + "," + b + ",1)";
    }

    //If in #RRGGBB format
    if (aRgb.length >= 6) {
        r = (bigint >> 16) & 255;
        g = (bigint >> 8) & 255;
        b = bigint & 255;
        var rgb = r + "," + g + "," + b;

        //If in #AARRBBGG format
        if (aRgb.length == 8) {
            a = ((bigint >> 24) & 255) / 255;
            return "rgba(" + rgb + "," + a.toFixed(1) + ")";
        }
    }
    return "rgba(" + rgb + ",1)";
}

http://jsfiddle.net/kvLyscs3/

Benson
quelle
1

Für die Konvertierung direkt aus jQuery können Sie Folgendes 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'))
Luis Amor
quelle
1
function getRGB(color){
  if(color.length == 7){
    var r = parseInt(color.substr(1,2),16);
    var g = parseInt(color.substr(3,2),16);
    var b = parseInt(color.substr(5,2),16);    
    return 'rgb('+r+','+g+','+b+')' ;
  }    
  else
    console.log('Enter correct value');
}
var a = getRGB('#f0f0f0');
if(!a){
 a = 'Enter correct value'; 
}

a;
user3237573
quelle
1

Angesichts der Tatsache, dass viele Antworten die Frage nur teilweise beantworten (entweder von RGB zu HEX oder umgekehrt), dachte ich, ich würde auch meine Teilantwort veröffentlichen.

Ich hatte ein ähnliches Problem und wollte Folgendes tun: Geben Sie eine gültige CSS-Farbe (HSL (a), RGB (a), HEX oder Farbname) ein und 1. können Sie einen Alpha-Wert hinzufügen oder entfernen, 2. Geben Sie ein rgb (a) -Objekt zurück. Genau zu diesem Zweck habe ich ein Plugin geschrieben. Es kann auf GitHub gefunden werden (es erfordert jQuery, aber wenn Sie möchten, können Sie es teilen und eine Vanille-Version erstellen ). Hier ist eine Demoseite . Sie können es selbst versuchen und die im laufenden Betrieb generierte Ausgabe sehen.

Ich werde die Optionen hier kopieren und einfügen:

Der RGB-Generator akzeptiert ein Argument, die Farbe, und bietet drei Optionen: asObject, addAlpha und removeAlpha. Wenn die drei Optionen weggelassen werden, wird die RGB-Farbe als Zeichenfolge zurückgegeben.

$.rgbGenerator("white")
// Will return rgb(255,255,255)

Beachten Sie, dass standardmäßig Alpha-Komponenten enthalten sind. Wenn der Eingabewert einen Alpha-Wert enthält, erfolgt die Ausgabe im RGBa-Format.

$.rgbGenerator("hsla(0,100%,50%,0.8)")
// Will return rgba(255,0,0,0.8)

Sie können dieses Verhalten deaktivieren, indem Sie removeAlpha auf true setzen. Dadurch werden alle Alpha-Werte aus einer anfänglichen HSLa- oder RGBa-Farbe entfernt.

$.rgbGenerator("hsla(0,100%,50%,0.8)", {removeAlpha: true})
// Will return rgb(255,0,0)

Wenn Sie andererseits einen Alphakanal hinzufügen möchten, können Sie dazu addAlpha auf einen beliebigen Wert zwischen 0 und 1 setzen. Wenn die Eingabe eine nicht transparente Farbe hat, wird der Alphawert hinzugefügt. Wenn es transparent ist, überschreibt der angegebene Wert die Alpha-Komponente der Eingabe.

$.rgbGenerator("hsl(0,100%,50%)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)
$.rgbGenerator("hsla(0,100%,50%,0.8)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)

Schließlich ist es auch möglich, die RGB (a) -Farbe als Objekt auszugeben. Es besteht aus r, g, b und optional a.

$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true})
/* Will return
{
  "r": 255,
  "g": 0,
  "b": 0,
  "a": 0.8
}
*/
$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true}).r
// Will return 255
Bram Vanroy
quelle
1

Die am besten bewertete Antwort von Tim Down bietet die beste Lösung, die ich für die Konvertierung in RGB sehen kann. Diese Lösung für die Hex-Konvertierung gefällt mir jedoch besser, da sie die prägnanteste Überprüfung der Grenzen und keine Auffüllung für die Konvertierung in Hex bietet.

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

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

Die Verwendung der Linksverschiebung '<<' und oder '|' Betreiber machen dies auch zu einer unterhaltsamen Lösung.

srolfe26
quelle
1

Ich habe dies gefunden und da ich denke, dass es ziemlich einfach ist und Validierungstests hat und Alpha-Werte unterstützt (optional), wird dies zum Fall passen.

Kommentieren Sie einfach die Regex-Zeile aus, wenn Sie wissen, was Sie tun, und es ist ein kleines bisschen schneller.

function hexToRGBA(hex, alpha){
    hex = (""+hex).trim().replace(/#/g,""); //trim and remove any leading # if there (supports number values as well)
    if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) throw ("not a valid hex string"); //Regex Validator
    if (hex.length==3){hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]} //support short form
    var b_int = parseInt(hex, 16);
    return "rgba("+[
        (b_int >> 16) & 255, //R
        (b_int >> 8) & 255, //G
        b_int & 255, //B
        alpha || 1  //add alpha if is set
    ].join(",")+")";
}
Redestructa
quelle