Convierta RGB a HEX en JavaScript
Este tutorial discutirá cómo convertir RGB a HEX usando la función toString() en JavaScript.
Convierta RGB a HEX usando la función toString() en JavaScript
La conversión entre diferentes espacios de color es difícil en JavaScript porque no hay una función predefinida presente en JavaScript, que pueda convertir entre diferentes espacios de color.
Entonces, tenemos que hacer nuestra propia función de conversión para convertir un espacio de color en otro. Para realizar una función de conversión, necesitamos conocer la diferencia entre los dos espacios de color.
Por ejemplo, la diferencia entre el espacio de color RGB y HEX es que el RGB está en formato decimal y el HEX está en formato hexadecimal. Para convertir de RGB a HEX, solo necesitamos convertir el número decimal de cada color de RGB a hexadecimal y luego concatenarlos para crear el espacio de color hexadecimal equivalente.
Para cambiar un valor de decimal a hexadecimal, podemos usar la función toString(16). Si la longitud del número convertido es 1, tenemos que añadir un 0 antes. Vea el código a continuación.
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));
Producción :
#ff64c8
También podemos convertir de HEX a RGB usando la función parseInt(). Un espacio de color HEX contiene 6 dígitos, excluyendo el primer dígito. Necesitamos obtener los primeros 2 dígitos y convertirlos al formato decimal usando la función parseInt(), que será nuestro color rojo. Del mismo modo, los dos dígitos siguientes nos darán el color verde y los restantes nos darán el color azul.
Por ejemplo, convierta el color HEX a RGB usando la función parseInt(). Vea el código a continuación.
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);
Producción :
255 100 200
También puede crear una función usando el código anterior para que no tenga que volver a escribir el código. Del mismo modo, puede convertir cualquier espacio de color en otro; solo necesita comprender la diferencia entre diferentes espacios de color.
