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

@ Tim, um Ihre Antwort zu ergänzen (es ist ein wenig schwierig, dies in einen Kommentar einzubauen).

Wie geschrieben, fand ich die rgbToHex-Funktion gibt eine Zeichenfolge mit Elementen nach dem Punkt und es erfordert, dass die r, g, b-Werte innerhalb des Bereichs 0-255 fallen.

Ich bin sicher, dass dies für die meisten offensichtlich erscheint, aber ich habe zwei Stunden gebraucht, um es herauszufinden, und bis dahin hatte sich die ursprüngliche Methode auf 7 Zeilen aufgebläht, bevor ich erkannte, dass mein Problem woanders lag. Um also anderen Zeit und Ärger zu ersparen, hier mein leicht geänderter Code, der die Voraussetzungen überprüft und die überflüssigen Teile des Strings 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);
}

Answer 2

Fassung 2021

Sie können einfach Folgendes verwenden rgb-hex & hex-rgb da es kampferprobt ist und zahlreiche Optionen bietet, die in anderen Lösungen nicht verfügbar sind.

Ich habe kürzlich einen Color Picker gebaut und diese 2 Pakete waren sehr nützlich.

Verwendung

rgb-hex

import rgbHex from 'rgb-hex';

rgbHex(65, 131, 196);
//=> '4183c4'

rgbHex('rgb(40, 42, 54)');
//=> '282a36'

rgbHex(65, 131, 196, 0.2);
//=> '4183c433'

rgbHex(40, 42, 54, '75%');
//=> '282a36bf'

rgbHex('rgba(40, 42, 54, 75%)');
//=> '282a36bf'

hex-rgb

import hexRgb from 'hex-rgb';

hexRgb('4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}

hexRgb('#4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}

hexRgb('#fff');
//=> {red: 255, green: 255, blue: 255, alpha: 1}

hexRgb('#22222299');
//=> {red: 34, green: 34, blue: 34, alpha: 0.6}

hexRgb('#0006');
//=> {red: 0, green: 0, blue: 0, alpha: 0.4}

hexRgb('#cd2222cc');
//=> {red: 205, green: 34, blue: 34, alpha: 0.8}

hexRgb('#cd2222cc', {format: 'array'});
//=> [205, 34, 34, 0.8]

hexRgb('#cd2222cc', {format: 'css'});
//=> 'rgb(205 34 34 / 80%)'

hexRgb('#000', {format: 'css'});
//=> 'rgb(0 0 0)'

hexRgb('#22222299', {alpha: 1});
//=> {red: 34, green: 34, blue: 34, alpha: 1}

hexRgb('#fff', {alpha: 0.5});
//=> {red: 255, green: 255, blue: 255, alpha: 0.5}

Answer 3

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

Answer 4

Shorthand-Version, die eine Zeichenkette 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)"));

So prüfen Sie, 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"));

Answer 5

2022: Wenn Sie häufig mit Farben arbeiten und es Ihnen nichts ausmacht, ein Paket zu verwenden,

Utilice tinycolor2 . Es ist eine schnelle Bibliothek ( Rund 400kb ) für die Farbmanipulation und -konvertierung in JavaScript.

Es akzeptiert verschiedene Farbstringformate. Zum Beispiel:

tinycolor("#000"); // Hex3
tinycolor("#f0f0f6"); // Hex6
tinycolor("#f0f0f688"); // Hex8
tinycolor("f0f0f6"); // Hex withouth the number sign '#'
tinycolor("rgb (255, 0, 0)"); // RGB
tinycolor("rgba (255, 0, 0, .5)"); // RGBA
tinycolor({ r: 255, g: 0, b: 0 }); // RGB object
tinycolor("hsl(0, 100%, 50%)"); // HSL
tinycolor("hsla(0, 100%, 50%, .5)"); // HSLA
tinycolor("red"); // Named

RGB nach HEX

var color = tinycolor('rgb(0, 128, 192)');
color.toHexString(); //#0080C0

HEX zu RGB

var color = tinycolor('#0080C0');
color.toRgbString(); // rgb(0, 128, 192)

Besuchen Sie Dokumentation für mehr Demo.