Hinweis : Beide Versionen rgbToHex
erwarten Ganzzahlwerte für r
, g
und 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";
<<
ist der bitweise Linksverschiebungsoperator. Angenommen, esg
handelt sich um eine Ganzzahl ungleich Null, dieg << 8
daher effektiv mitg
256 multipliziert wird und am Ende ihrer hexadezimalen Darstellung zu Nullen addiert wird. Ebensor << 16
fügt 4 Nullen. Durch Hinzufügen1 << 24
(1000000 in hex) wird sichergestellt, dass die hexadezimale Darstellung mit allen erforderlichen Nullen links aufgefüllt wird, sobald die führende1
mit entfernt wirdslice()
. Zum Beispiel, wennr
undg
waren beide Nullen undb
war 51,((r << 16) + (g << 8) + b).toString(16)
zurückkehren würde die Zeichenfolge „33“; hinzufügen1 << 24
und Sie erhalten "1000033". Dann zieh das aus1
und du bist da.(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/…rgbToHex
Funktion. 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.Eine alternative Version von hexToRgb:
Edit: 28.03.2017 Hier ist ein anderer Ansatz
das scheint noch schneller zu seinEdit: 8/11/2017 Der neue Ansatz oben nach mehr Tests ist nicht schneller :(. Obwohl es eine unterhaltsame Alternative ist.
quelle
return [r, g, b].join();
.return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
#
) vorparseInt
:hex = hex.replace(/[^0-9A-F]/gi, '');
ECMAScript 6-Version von Tim Downs Antwort
Konvertieren von RGB in Hex
Hex in RGB konvertieren
Gibt ein Array zurück
[r, g, b]
. Funktioniert auch mit Hex-Kurztriolen wie"#03F"
.Bonus: RGB mit
padStart()
Methode zu verhexenBeachten 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.
quelle
.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.Hier ist meine Version:
quelle
rgb2hex
Methode. Warum fügen wir0x1000000
zurgb
, und warum müssen wir nennen.slice(1)
endlich?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:Die Verwendung von Bitverschiebungen kann auch das Lesen erleichtern:
quelle
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16
Sie0
dem Endergebnis ein Präfix voranstellen müssen .var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
quelle
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}}
Dieser Code akzeptiert # fff- und #ffffff-Varianten und Deckkraft.
quelle
Einzeiliges funktionelles HEX zu RGBA
Unterstützt sowohl kurze
#fff
als auch lange#ffffff
Formen.Unterstützt Alpha-Kanal (Deckkraft).
Es ist egal, ob Hash angegeben ist oder nicht, funktioniert in beiden Fällen.
Beispiele:
quelle
Dies könnte verwendet werden, um Farben aus berechneten Stil-Eigenschaften zu erhalten:
Ref: https://github.com/k-gun/so/blob/master/so_util.js
quelle
(r.length == 1 ? "0" + r : r)
und ähnlich für Grün und Blau.Bitweise Lösung ist normalerweise seltsam. Aber in diesem Fall denke ich, dass das eleganter ist 😄
Verwendungszweck:
quelle
// 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.
quelle
@ 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.
quelle
(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.
quelle
Versuchen
Code-Snippet anzeigen
quelle
Wenn Sie zwei Farbwerte (angegeben als RGB, Namensfarbe oder Hex-Wert) vergleichen oder in HEX konvertieren müssen, verwenden Sie das HTML5-Canvas-Objekt.
quelle
Könnten Sie nach so etwas sein?
zeigt # 9687c8 an
quelle
Für 3 Stellen kann die hexToRgb-Funktion von Tim Down wie folgt verbessert werden:
quelle
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.
quelle
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
quelle
Verwenden Sie diese Funktion, um das Ergebnis ohne Probleme zu erzielen. :) :)
quelle
Kurzversion, die eine Zeichenfolge akzeptiert:
Um zu überprüfen, ob es nicht bereits hexadezimal ist
quelle
Obwohl diese Antwort wahrscheinlich nicht perfekt zur Frage passt, kann sie dennoch sehr nützlich sein.
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> toRgb.style.color;
< "rgb(133, 225, 133)"
Ihre Farbe wurde in RGB konvertiertFunktioniert für: Hsl, Hex
Funktioniert nicht für: Benannte Farben
quelle
Meine Version von hex2rbg:
String.replace, String.split, String.match
etc ..Möglicherweise müssen Sie hex.trim () entfernen, wenn Sie IE8 verwenden.
z.B
Code:
quelle
h.join(',')
dasselbe ist wieh.join()
.Dieses Snippet konvertiert hex in rgb und rgb in hex.
Demo anzeigen
quelle
Ich arbeite mit XAML-Daten im Hex-Format #AARRGGBB (Alpha, Rot, Grün, Blau). Mit den obigen Antworten ist hier meine Lösung:
http://jsfiddle.net/kvLyscs3/
quelle
Für die Konvertierung direkt aus jQuery können Sie Folgendes versuchen:
quelle
quelle
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.
Beachten Sie, dass standardmäßig Alpha-Komponenten enthalten sind. Wenn der Eingabewert einen Alpha-Wert enthält, erfolgt die Ausgabe im RGBa-Format.
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.
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.
Schließlich ist es auch möglich, die RGB (a) -Farbe als Objekt auszugeben. Es besteht aus r, g, b und optional a.
quelle
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.
Die Verwendung der Linksverschiebung '<<' und oder '|' Betreiber machen dies auch zu einer unterhaltsamen Lösung.
quelle
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.
quelle