Converter RGB em HEX em JavaScript

Este tutorial irá discutir como converter RGB em HEX usando a função toString() em JavaScript.

Converter RGB em HEX usando a função toString() em JavaScript

A conversão entre diferentes espaços de cores é difícil em JavaScript porque não existe uma função predefinida presente no JavaScript, que pode converter entre diferentes espaços de cores.

Portanto, temos que fazer nossa própria função de conversão para converter um espaço de cores em outro. Para fazer uma função de conversão, precisamos saber a diferença entre os dois espaços de cores.

Por exemplo, a diferença entre o espaço de cores RGB e HEX é que o RGB está no formato decimal e o HEX está no formato hexadecimal. Para converter RGB em HEX, precisamos apenas converter o número decimal de cada cor de RGB em hexadecimal e, em seguida, concatená-los para criar o espaço de cores hexadecimal equivalente.

Para alterar um valor de decimal para hexadecimal, podemos usar a função toString(16). Se o comprimento do número convertido for 1, temos que adicionar um 0 antes dele. Veja o código abaixo.

function ColorToHex(color) {
  var hexadecimal = color.toString(16);
  return hexadecimal.length == 1 ? '0' + hexadecimal : hexadecimal;
}

function ConvertRGBtoHex(red, green, blue) {
  return '#' + ColorToHex(red) + ColorToHex(green) + ColorToHex(blue);
}
console.log(ConvertRGBtoHex(255, 100, 200));

Produção:

#ff64c8

Também podemos converter de HEX para RGB usando a função parseInt(). Um espaço de cor HEX contém 6 dígitos, excluindo o primeiro dígito. Precisamos pegar os 2 primeiros dígitos e convertê-los no formato decimal usando a função parseInt(), que será nossa cor vermelha. Da mesma forma, os próximos dois dígitos nos darão a cor verde e os restantes nos darão a cor azul.

Por exemplo, vamos converter a cor HEX em RGB usando a função parseInt(). Veja o código abaixo.

var hex = '#ff64c8';
var red = parseInt(hex[1] + hex[2], 16);
var green = parseInt(hex[3] + hex[4], 16);
var blue = parseInt(hex[5] + hex[6], 16);
console.log(red, green, blue);

Produção:

255 100 200

Você também pode fazer uma função usando o código acima para não ter que escrever o código novamente. Da mesma forma, você pode converter qualquer espaço de cores em outro; você só precisa entender a diferença entre os diferentes espaços de cores.