it-swarm.com.de

RGB zu Hex und Hex zu RGB

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

Konvertieren Sie beispielsweise '#0080C0' in (0, 128, 192).

465
Sindar

Die folgenden Schritte werden für die Konvertierung von RGB in Hex ausgeführt und fügen alle erforderlichen Auffüllungen hinzu:

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

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

Zum Schluss eine alternative Version von rgbToHex(), wie in @ casablancas Antwort beschrieben 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 von hexToRgb(), die auch ein Hex-Triplet mit Kurzschrift 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";
1091
Tim Down

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.

133
David

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

ECMAScript 6-Version von Antwort von Tim Down

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

Umwandlung von Hex zu RGB

Gibt ein Array [r, g, b] zurück. Funktioniert auch mit kurzen Hex-Triplets 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 zu hex mit padStart() Methode

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 verwenden, um Ihren Code zu kompilieren.

40

Ich nehme an, Sie meinen die hexadezimale Notation im HTML-Stil, d. H. #rrggbb. Ihr Code ist fast korrekt, außer Sie haben die Reihenfolge umgekehrt. Es sollte sein:

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

Durch die Verwendung von Bitverschiebungen wird das Lesen möglicherweise vereinfacht:

var decColor = (red << 16) + (green << 8) + blue;
24
casablanca

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

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(',')+')';
}
21
falko
function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
17
rezoner

Dies kann verwendet werden, um Farben aus berechneten Stileigenschaften 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

11
K-Gun

Einzeiliges HEX zu RGBA

Unterstützt sowohl kurze #fff als auch lange #ffffff Formulare.
Unterstützt Alphakanal (Deckkraft).
Ist es 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)  
9
Denis

// Ohne die Schreibweise von hsl werden Farbwerte üblicherweise als Namen, rgb, rgba oder hex ausgedrückt.

// Hex kann 3 Werte oder 6 sein.

// Rgb können sowohl Prozent- als auch Ganzzahlwerte sein.

// Mindestens all diese Formate sollten berücksichtigt werden.

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

@ Tim, um deine Antwort zu ergänzen (es ist ein wenig umständlich, dies in einen Kommentar einzufügen).

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

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

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);
}
6
Matt Stevens

(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 glatte Einzeiler, die ich in einem Farbmodul verwende, das die Farbinterpolation für die Datenvisualisierung durchführt.

Beachten Sie, dass dies den Alpha-Kanal ü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));
4
Ron Gilchrist

Wenn Sie zwei Farbwerte vergleichen (als RGB, Namensfarbe oder Hex-Wert angegeben) oder in HEX konvertieren möchten, verwenden Sie ein HTML5-Zeichenbereichsobjekt.

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);
4
Anton Putov

Bitweise Lösung ist normalerweise seltsam. Aber in diesem Fall ist das wohl eleganter ????

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
4
Aral Roca

Möchtest du so etwas haben?

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

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

zeigt # 9687c8 an

3
Miquel

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

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

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

dies ist ein Spin-off von @Cwolves Antwort

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

Ich bin auf dieses Problem gestoßen, weil 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 ich es zu einem richtigen jQuery-Plugin machen kann. Deshalb werde ich es nur 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;
};
2
Patrick Roberts

Kurzfassung, 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"));
2
Aart den Braber

Meine Version von hex2rbg:

  1. Akzeptiere kurzes Hex wie #fff
  2. Die Algorithmuskompatibilität ist o (n) und sollte schneller als die Verwendung von Regex sein. z.B. String.replace, String.split, String.match etc ..
  3. Verwenden Sie konstanten Raum.
  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()+')';
    }
}
2
Eric Chen

Dieses Snippet konvertiert hex zu rgb und rgb zu 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
}
2
user2240578

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

  1. Erstellen Sie ein beliebiges Element

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

  1. Legen Sie einen gültigen Stil für die zu konvertierende Farbe fest

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

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

2

Mein Beispiel =)

color: {
            toHex: function(num){
                var str = num.toString(16);
                return (str.length<6?'#00'+str:'#'+str);
            },
            toNum: function(hex){
                return parseInt(hex.replace('#',''), 16);
            },
            rgbToHex: function(color)
            {
                color = color.replace(/\s/g,"");
                var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);
                if(aRGB)
                {
                    color = '';
                    for (var i=1;  i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
                }
                else color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
                return '#'+color;
            }
1
m0sk1t

Ich arbeite mit XAML-Daten im Hex-Format #AARRGGBB (Alpha, Rot, Grün, Blau). Unter Verwendung der 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/

1
Benson

Ein völlig anderer Ansatz, um hexadezimalen Farbcode ohne Regex in RGB umzuwandeln

Es verarbeitet sowohl das #FFF - als auch das #FFFFFF -Format basierend auf der Länge der Zeichenfolge. Es entfernt # vom Anfang der Zeichenfolge und unterteilt jedes Zeichen der Zeichenfolge und konvertiert es in base10 und fügt es dem entsprechenden Index an der Basis seiner Position hinzu.

//Algorithm of hex to rgb conversion in ES5
function hex2rgbSimple(str){
  str = str.replace('#', '');
  return str.split('').reduce(function(result, char, index, array){
    var j = parseInt(index * 3/array.length);
    var number = parseInt(char, 16);
    result[j] = (array.length == 3? number :  result[j]) * 16 + number;
    return result;
  },[0,0,0]);
}

//Same code in ES6
hex2rgb = str => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]);

//hex to RGBA conversion
hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0,a||1]);

//hex to standard RGB conversion
hex2rgbStandard = str => `RGB(${str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]).join(',')})`;


console.log(hex2rgb('#aebece'));
console.log(hex2rgbSimple('#aebece'));

console.log(hex2rgb('#aabbcc'));

console.log(hex2rgb('#abc'));

console.log(hex2rgba('#abc', 0.7));

console.log(hex2rgbStandard('#abc'));
1
Rehan Haider

Basierend auf @ MichałPerłakowski-Antwort (EcmaScipt 6) und seiner Antwort basierend auf Tim Downs Antwort

Ich habe eine modifizierte Version der Funktion zur Konvertierung von hexToRGB geschrieben, mit der zusätzlichen sicheren Überprüfung, ob die r/g/b-Farbkomponenten zwischen 0 und 255 liegen und ob die Funktionen Number r/g/b-Parameter oder String r/g/b Parameter und hier ist es:

 function rgbToHex(r, g, b) {
     r = Math.abs(r);
     g = Math.abs(g);
     b = Math.abs(b);

     if ( r < 0 ) r = 0;
     if ( g < 0 ) g = 0;
     if ( b < 0 ) b = 0;

     if ( r > 255 ) r = 255;
     if ( g > 255 ) g = 255;
     if ( b > 255 ) b = 255;

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

Um die Funktion sicher zu verwenden, sollten Sie überprüfen, ob der übergebene String eine echte RGB-String-Farbe hat. Eine sehr einfache Überprüfung könnte beispielsweise sein:

if( rgbStr.substring(0,3) === 'rgb' ) {

  let rgbColors = JSON.parse(rgbStr.replace('rgb(', '[').replace(')', ']'))
  rgbStr = this.rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);

  .....
}
1
Combine

Ich fand dies und da ich denke, dass es ziemlich einfach ist und Validierungstests und Alpha-Werte unterstützt (optional), wird dies in den 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(",")+")";
}
1
redestructa
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. :)

1
user3767878
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;
1
user3237573

Anstatt hier und da gefundene Snippets zu kopieren und zu kopieren, würde ich empfehlen, eine gut getestete und gewartete Bibliothek zu verwenden: Colors.js (verfügbar für node.js und Browser). Es sind nur 7 KB (verkleinert, noch weniger komprimiert).

1
nachtigall

Die bestbewertete Antwort von Tim Down bietet die beste Lösung, die ich für die Konvertierung in RGB sehen kann. Mir gefällt diese Lösung für die Hex-Konvertierung jedoch besser, da sie die prägnanteste Überprüfung der Grenzen und Null-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 eine unterhaltsame Lösung.

1
srolfe26

Zum direkten Konvertieren von 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'))
1
Luis Amor

Wenn man bedenkt, dass viele Antworten die Frage nur teilweise beantworten (entweder von RGB zu HEX oder umgekehrt), dachte ich, ich würde meine teilweise Antwort als posten Gut.

Ich hatte ein ähnliches Problem und wollte folgendes tun: Eine gültige CSS-Farbe (HSL (a), RGB (a), HEX oder Farbname) eingeben und 1. einen Alpha-Wert hinzufügen oder entfernen können, 2. gib ein rgb (a) Objekt zurück. Ich habe genau zu diesem Zweck ein Plugin geschrieben. Es kann gefunden werden auf GitHub (es erfordert jQuery, aber wenn Sie wollen, können Sie es gabeln und eine Vanilla-Version machen). Hier ist eine Demo-Seite . Sie können versuchen Sie es selbst und sehen, wie die Ausgabe im laufenden Betrieb generiert wird.

Ich kopiere und füge die Optionen hier ein:

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 dagegen einen Alpha-Kanal hinzufügen möchten, können Sie addAlpha auf einen Wert zwischen 0 und 1 setzen. Wenn die Eingabe eine nicht transparente Farbe ist, wird der Alpha-Wert hinzugefügt. Wenn es sich um einen transparenten Wert handelt, ü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 wird aus r, g, b und gegebenenfalls a bestehen.

$.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
1
Bram Vanroy

Randnotiz zu CSS Level 4: Im Allgemeinen ist der Grund, warum Sie Hex in RGB konvertieren möchten, für den Alphakanal, in diesem Fall für Sie kann das bald mit CSS4 tun, indem ein nachfolgendes Hex hinzugefügt wird. Beispiel: #FF8800FF oder #f80f für vollständig transparentes Orange.

Abgesehen davon beantwortet der folgende Code beide Fragen in einer einzelnen Funktion von und zu einer anderen. Dies akzeptiert einen optionalen Alpha-Kanal, unterstützt sowohl String- und Array-Formate als auch das Parsen von 3, 4, 6, 7-Zeichen-Hex-Zeichen und RGB/A-Komplett- oder Teil-Strings (mit Ausnahme von prozentual definierten RGB/A-Werten) ohne Flag.

(Ersetzen Sie die wenigen ES6-Syntaxen, wenn Sie IE unterstützen)

In einer Zeile:

function rgbaHex(c,a,i){return(Array.isArray(c)||(typeof c==='string'&&/,/.test(c)))?((c=(Array.isArray(c)?c:c.replace(/[\sa-z\(\);]+/gi,'').split(',')).map(s=>parseInt(s).toString(16).replace(/^([a-z\d])$/i,'0$1'))),'#'+c[0]+c[1]+c[2]):(c=c.replace(/#/,''),c=c.length%6?c.replace(/(.)(.)(.)/,'$1$1$2$2$3$3'):c,a=parseFloat(a)||null,`rgb${a?'a':''}(${[(i=parseInt(c,16))>>16&255,i>>8&255,i&255,a].join().replace(/,$/,'')})`);}

Lesbare Version:

function rgbaHex(c, a) {
    // RGBA to Hex
    if (Array.isArray(c) || (typeof c === 'string' && /,/.test(c))) {
        c = Array.isArray(c) ? c : c.replace(/[\sa-z\(\);]+/gi, '').split(',');
        c = c.map(s => window.parseInt(s).toString(16).replace(/^([a-z\d])$/i, '0$1'));

        return '#' + c[0] + c[1] + c[2];
    }
    // Hex to RGBA
    else {
        c = c.replace(/#/, '');
        c = c.length % 6 ? c.replace(/(.)(.)(.)/, '$1$1$2$2$3$3') : c;
        c = window.parseInt(c, 16);

        a = window.parseFloat(a) || null;

        const r = (c >> 16) & 255;
        const g = (c >> 08) & 255;
        const b = (c >> 00) & 255;

        return `rgb${a ? 'a' : ''}(${[r, g, b, a].join().replace(/,$/,'')})`;
    }
}

Verwendungen:

rgbaHex('#a8f')

rgbaHex('#aa88ff')

rgbaHex('#A8F')

rgbaHex('#AA88FF')

rgbaHex('#AA88FF', 0.5)

rgbaHex('#a8f', '0.85')

// etc.

rgbaHex('rgba(170,136,255,0.8);')

rgbaHex('rgba(170,136,255,0.8)')

rgbaHex('rgb(170,136,255)')

rgbaHex('rg170,136,255')

rgbaHex(' 170, 136, 255 ')

rgbaHex([170,136,255,0.8])

rgbaHex([170,136,255])

// etc.

0
bit-less

Hier ist der Javascript Code zum Ändern von HEX Farbwert in R ed, G reen, B lue individuell.

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}
0
Rahul Raina

Ich habe das gefunden...
http://jsfiddle.net/Mottie/xcqpF/1/light/

function rgb2hex(rgb){
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
        ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}
0
Ryano

HTML verwendet das Hexadezimalsystem und das RGB das Dezimalsystem. Sie müssen also die Zahl von hexadezimal in dezimal und umgekehrt konvertieren.

0
reporter

Verwenden der Kombination anonymer Funktionen und Array.map für eine Bereinigung; schlanker aussehen.

var write=function(str){document.body.innerHTML=JSON.stringify(str,null,'    ');};

function hexToRgb(hex, asObj) {
  return (function(res) {
    return res == null ? null : (function(parts) {
      return !asObj ? parts : { r : parts[0], g : parts[1], b : parts[2] }
    }(res.slice(1,4).map(function(val) { return parseInt(val, 16); })));
  }(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)));
}

function rgbToHex(r, g, b) {
  return (function(values) {
    return '#' + values.map(function(intVal) {
      return (function(hexVal) {
        return hexVal.length == 1 ? "0" + hexVal : hexVal;
      }(intVal.toString(16)));
    }).join('');
  }(arguments.length === 1 ? Array.isArray(r) ? r : [r.r, r.g, r.b] : [r, g, b]))
}

// Prints: { r: 255, g: 127, b: 92 }
write(hexToRgb(rgbToHex(hexToRgb(rgbToHex(255, 127, 92), true)), true));
body{font-family:monospace;white-space:pre}
0
Mr. Polywhirl

Eine saubere coffeescript-Version des oben genannten (danke @TimDown):

rgbToHex = (rgb) ->
    a = rgb.match /\d+/g
    rgb  unless a.length is 3
    "##{ ((1 << 24) + (parseInt(a[0]) << 16) + (parseInt(a[1]) << 8) + parseInt(a[2])).toString(16).slice(1) }"
0
mreq

Sieht so aus, als suchst du nach etwas:

function hexstr(number) {
    var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
    var low = number & 0xf;
    var high = (number >> 4) & 0xf;
    return "" + chars[high] + chars[low];
}

function rgb2hex(r, g, b) {
    return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}
0
onitake