RGB vers hex et hex vers RGB

Question

Comment convertir les couleurs au format RVB en format hexadécimal et vice versa ?

Par exemple, convertir '#0080C0' a (0, 128, 192) .

Answer 1

Nota : les deux versions de rgbToHex s'attendent à des valeurs entières pour r , g y b Vous devrez donc effectuer vos propres arrondis si vous avez des valeurs non entières.

La procédure suivante permet de convertir les données RVB en données hexadécimales et d'ajouter les zéros de remplissage nécessaires :

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

Convertir dans l'autre sens :

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

Enfin, une version alternative de rgbToHex() comme indiqué dans La réponse de @casablanca et suggéré dans les commentaires par @cwolves :

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

Mise à jour du 3 décembre 2012

Voici une version de hexToRgb() qui analyse également un triplet hexagonal abrégé tel que "#03F" :

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

Answer 2

Une version alternative de 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;
}

Edition : 28/03/2017 Voici une autre approche qui semble être encore plus rapide

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

Modifié : 8/11/2017 La nouvelle approche ci-dessus après plus de tests n'est pas plus rapide :(. Bien que ce soit un moyen alternatif amusant.

Answer 3

Voici ma version :

function rgbToHex(red, green, blue) {
  const rgb = (red << 16) | (green << 8) | (blue << 0);
  return '#' + (0x1000000 + rgb).toString(16).slice(1);
}

function hexToRgb(hex) {
  const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
  if (normal) return normal.slice(1).map(e => parseInt(e, 16));

  const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
  if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));

  return null;
}

Answer 4

Je suppose que vous voulez dire la notation hexadécimale de style HTML, c'est-à-dire #rrggbb . Votre code est presque correct, sauf que vous avez inversé l'ordre. Il devrait l'être :

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

De plus, l'utilisation de décalages de bits pourrait rendre la lecture un peu plus facile :

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

Answer 5

Ce code accepte les variantes et l'opacité #fff et #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(',')+')';
}