RGB a hexadecimal y hexadecimal a RGB

Resuelto Sindar asked hace 13 años • 60 respuestas

¿Cómo convertir colores en formato RGB a formato hexadecimal y viceversa?

Por ejemplo, convierta '#0080C0'a (0, 128, 192).

Sindar avatar Apr 11 '11 22:04 Sindar
Aceptado

Nota : ambas versiones rgbToHexesperan valores enteros para y r, por lo que deberá realizar su propio redondeo si tiene valores que no sean enteros.gb

Lo siguiente servirá para la conversión de RGB a hexadecimal y agregará el relleno de ceros necesario:

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
Expandir fragmento

Convirtiendo al revés:

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

Finalmente, una versión alternativa de rgbToHex(), como se analiza en la respuesta de @casablanca y se sugiere en los comentarios de @cwolves:

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

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

Actualización 3 de diciembre de 2012

Aquí hay una versión de hexToRgb()eso que también analiza un triplete hexadecimal abreviado como "#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";
Expandir fragmento

Tim Down avatar Apr 11 '2011 16:04 Tim Down

Una versión alternativa 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;
}

Editar: 28/03/2017 Aquí hay otro enfoqueeso parece ser incluso más rápido

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

Editar: 11/08/2017 El nuevo enfoque anterior después de más pruebas no es más rápido :(. Aunque es una forma alternativa divertida.

David avatar Jul 16 '2012 16:07 David