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

Kurze Pfeilfunktionen

Für alle, die eine kurze Pfeilfunktion schätzen.

Hex2rgb

Eine Pfeilfunktionsversion von Davids Antwort

const hex2rgb = h => [(x=parseInt(h,16)) >> 16 & 255,x >> 8 & 255, x & 255];

Eine flexiblere Lösung, die Short und Hex oder die Raute unterstützt #

const hex2rgb = h => {
    if(h[0] == '#') {h = h.slice(1)};
    if(h.length <= 3) {h = h[0]+h[0]+h[1]+h[1]+h[2]+h[2]};
    h = parseInt(h,16);
    return [h >> 16 & 255,h >> 8 & 255, h & 255];
};

Rgb2hex

const rgb2hex = (r,g,b) => ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);

Answer 2

Ziemlich direkter Einzeiler. Teilt die rgb durch Kommas, ignoriert nicht numerische Zeichen, konvertiert in Hex, füllt eine 0 auf und schließt mit einem Hashbang ab.

var yellow = 'rgb(255, 255, 0)';
var rgb2hex = str => "#"+str.split(',').map(s => (s.replace(/\D/g,'')|0).toString(16)).map(s => s.length < 2 ? "0"+s : s).join('');

console.log(rgb2hex(yellow));

Answer 3

Ich habe eine kleine Javascript-Farbklasse für RGB- und Hex-Farben erstellt, diese Klasse enthält auch RGB- und Hex-Validierungsfunktionen. Ich habe den Code als Snippet zu dieser Antwort hinzugefügt.

var colorClass = function() {
   this.validateRgb = function(color) {
      return typeof color === 'object' &&
      color.length === 3               &&
      Math.min.apply(null, color) >= 0 &&
      Math.max.apply(null, color) <= 255;
   };
   this.validateHex = function(color) {
      return color.match(/^\#?(([0-9a-f]{3}){1,2})$/i);
   };
   this.hexToRgb = function(color) {
      var hex    = color.replace(/^\#/, '');
      var length = hex.length;
      return     [
         parseInt(length === 6 ? hex['0'] + hex['1'] : hex['0'] + hex['0'], 16),
         parseInt(length === 6 ? hex['2'] + hex['3'] : hex['1'] + hex['1'], 16),
         parseInt(length === 6 ? hex['4'] + hex['5'] : hex['2'] + hex['2'], 16)
      ];
   };
   this.rgbToHex = function(color) {
      return '#' +
      ('0' + parseInt(color['0'], 10).toString(16)).slice(-2) +
      ('0' + parseInt(color['1'], 10).toString(16)).slice(-2) +
      ('0' + parseInt(color['2'], 10).toString(16)).slice(-2);
   };
};

var colors = new colorClass();
console.log(colors.hexToRgb('#FFFFFF'));//       [255, 255, 255]
console.log(colors.rgbToHex([255, 255, 255]));// #FFFFFF

Answer 4

Eine saubere Coffeescript-Version des obigen Beispiels (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) }"

Answer 5

Nebenbemerkung zu CSS Level 4: Der Grund, warum man Hex in RGB konvertieren möchte, ist in der Regel der Alphakanal, den man in diesem Fall mit CSS4 durch Hinzufügen eines nachgestellten Hex. Beispiel: #FF8800FF o #f80f für vollständig transparentes Orange.

Davon abgesehen, beantwortet der folgende Code beide Fragen in einer einzigen Funktion, die von und zu einer anderen . Sie akzeptiert einen optionalen Alphakanal, unterstützt sowohl String- als auch Array-Formate, analysiert 3,4,6,7-Zeichen-Hex-Werte und vollständige oder teilweise Strings (mit Ausnahme von prozentual definierten rgb/a-Werten) ohne Flag.

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

In einer Reihe:

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.