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

Ich nehme an, Sie meinen die hexadezimale Notation im HTML-Stil, d. h. #rrggbb . Ihr Code ist fast korrekt, außer dass Sie die Reihenfolge umgedreht haben. Sie sollte lauten:

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

Außerdem könnte die Verwendung von Bitverschiebungen die Lesbarkeit etwas verbessern:

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

Answer 2

Versuchen Sie ( Bonus )

let hex2rgb= c=> `rgb(${c.match(/\w\w/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.match(/\w\w/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)'));

Answer 3

Einzeilig funktional HEX zu RGBA

Unterstützt sowohl kurze #fff und lange #ffffff Formen.
Unterstützt Alphakanal (Deckkraft).
Es spielt keine Rolle, ob eine Hash angegeben ist oder nicht, es 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(isFinite(opacity) ? 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)

hexToRGBA('#ffffff', 0)  ->  rgba(255,255,255,0)
hexToRGBA('#ffffff', .5) ->  rgba(255,255,255,0.5)
hexToRGBA('#ffffff', 1)  ->  rgba(255,255,255,1)

Answer 4

Dieser Code akzeptiert die Varianten #fff und #ffffff und die 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(',')+')';
}

Answer 5

Die 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,
  }
}

Verwendung:

const {red, green, blue } = hexToRGB(0xFF00FF)

console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255