Dado un código hexadecimal de color, la tarea es convertir el valor hexadecimal en valor RGBA. Estas son algunas de las técnicas en su mayoría discutidas con la ayuda de JavaScript.
Enfoque 1:
- Primero verifique que el valor hexadecimal pasado sea válido o no a través de una expresión regular.
- Luego obtenga el contenido del valor hexadecimal después de ‘#’ usando el método .slice() y use el método .split() para obtener todos los caracteres del valor hexadecimal en la array.
- Si la longitud de la array es 3 (por ejemplo, #fff, #aaa), guárdelos como (por ejemplo, #ffffff, #aaaaaa respectivamente) para hacer que la longitud sea 6.
- Transforme el código a hexadecimal ya que los 2 primeros caracteres pertenecen al valor rojo, los 2 caracteres intermedios pertenecen al valor verde y así sucesivamente.
Ejemplo: Este ejemplo utiliza el enfoque discutido anteriormente.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert Hex value to RGBA
value using JavaScript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color: green">
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 20px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click Here
</button>
<p id = "GFG_DOWN" style = "color:green;
font-size: 26px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var hexValue = '#fbafff';
el_up.innerHTML = "Click on the button to"
+ " get the RGBA value of Hex "
+ "Value.<br>HexValue = '" +
hexValue + "'";
function convertHexToRgbA(hexVal) {
var ret;
// If the hex value is valid.
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hexVal)) {
// Getting the content after '#',
// eg. 'ffffff' in case of '#ffffff'
ret = hexVal.slice(1);
// Splitting each character
ret = ret.split('');
// Checking if the length is 3
// then make that 6
if(ret.length == 3) {
var ar = [];
ar.push(ret[0]);
ar.push(ret[0]);
ar.push(ret[1]);
ar.push(ret[1]);
ar.push(ret[2]);
ar.push(ret[2]);
ret = ar;
}
// Starts with '0x'(in hexadecimal)
ret = '0x'+ ret.join('');
// Converting the first 2 characters
// from hexadecimal to r value
var r = (ret>>16)&255;
// Converting the second 2 characters
// to hexadecimal to g value
var g = (ret>>8)&255;
// Converting the last 2 characters
// to hexadecimal to b value
var b = ret&255;
// Appending all of them to make
// the RGBA value
return 'rgba('+[r, g, b].join(',')+',1)';
}
}
function gfg_Run() {
el_down.innerHTML = "The RGBA value of '"
+ hexValue + "' is '" +
convertHexToRgbA(hexValue) + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Use el método .slice() para obtener los primeros 2 caracteres y convertirlos a hexadecimal.
- Repita el paso 1 por cada 2 caracteres para el resto del código.
- Agréguelos y devuelva el valor final.
Ejemplo: Este ejemplo utiliza el enfoque discutido anteriormente.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert Hex value to RGBA
value using JavaScript ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color: green">
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 20px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click Here
</button>
<p id = "GFG_DOWN" style = "color:green;
font-size: 26px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var hexValue = '#fbafff';
el_up.innerHTML = "Click on the button to get"
+ " the RGBA value of Hex Value."
+ "<br>HexValue = '" + hexValue + "'";
function convertHexToRgbA(hex, a) {
// Convert the first 2 characters to hexadecimal
var r = parseInt(hex.substring(1, 3), 16),
// Convert the middle 2 characters to hexadecimal
g = parseInt(hex.substring(3, 5), 16),
// Convert the last 2 characters to hexadecimal
b = parseInt(hex.substring(5, 7), 16);
// append them all
return "rgba(" + r + ", " + g + ", "
+ b + ", " + a + ")";
}
function gfg_Run() {
el_down.innerHTML = "The RGBA value of '"
+ hexValue + "' is '" +
convertHexToRgbA(hexValue, 1) + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA