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

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

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

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.

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.

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

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;

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

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(',')+')';
}

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)  

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

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

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

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

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

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``

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

// TEST
console.log('#0080C0          -->', hex2rgb('#0080C0'));
console.log('rgb(0, 128, 192) -->', rgb2hex('rgb(0, 128, 192)'));

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

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

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

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

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

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. :) :)

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

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

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

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

3. 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

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()+')';
    }
}

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
}

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/

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

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;

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

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.

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(",")+")";
}