Dado el valor del color RGB, la tarea es obtener el código hexadecimal de ese color usando JavaScript.
Enfoque 1:
- Llame a la función definida por el usuario convert() y use el valor RGB como parámetro.
- Utilice el método match() para seleccionar el valor de rojo, verde y azul. El valor de RGB se almacena en forma de array.
- La llamada a la función hexCode() para convertir el valor de RGB a hexCode.
- El método slice() obtiene la parte de una string y devuelve las partes extraídas en una nueva string. El método toString() convierte el número en string.
Ejemplo 1: este ejemplo obtiene el valor RGB de blanco, que es rgb (255,255,255) y lo convierte en HexCode mediante JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
How to get hex color value
of RGB color value
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style=
"font-size: 19px; font-weight: bold;">
</p>
<button onClick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN" style=
"color: green; font-size: 24px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = 'Click on button to hex code of the color';
function convert(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hexCode(i) {
return ("0" + parseInt(i).toString(16)).slice(-2);
}
return "#" + hexCode(rgb[1]) + hexCode(rgb[2])
+ hexCode(rgb[3]);
}
function GFG_Fun() {
down.innerHTML = "Hex Code of 'white' = "
+ convert('rgb(255,255,255)');
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este método primero verifica si se proporciona el valor hexadecimal en lugar del valor RGB. Porque algunos navegadores devuelven el valor hexadecimal en lugar del valor RGB. Este ejemplo obtiene el valor RGB de verde, que es RGB(0,128,0) y lo convierte en HexCode mediante la creación de una función.
<!DOCTYPE Html>
<html>
<head>
<title>
How to get hex color value
of RGB color value
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style=
"font-size: 19px; font-weight: bold;">
</p>
<button onClick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN" style=
"color: green; font-size: 24px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = 'Click on button to hex code of the color';
function convert(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hexCode(i) {
return ("0" + parseInt(i).toString(16)).slice(-2);
}
return "#" + hexCode(rgb[1]) + hexCode(rgb[2])
+ hexCode(rgb[3]);
}
function GFG_Fun() {
down.innerHTML = "Hex Code of 'Green' = "
+ convert('rgb(0,128,0)');
}
</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