"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo generar colores HEX aleatorios en JavaScript? [Guía fácil]

¿Cómo generar colores HEX aleatorios en JavaScript? [Guía fácil]

Publicado el 2024-08-22
Navegar:173

How to Generate Random HEX Color in JavaScript? [Easy Guide]

En este artículo, lo guiaré en la creación de una función de JavaScript que genera un código de color hexadecimal aleatorio compuesto de una combinación de números y alfabetos.

Esta función genera un color hexadecimal aleatorio cada vez que se ejecuta:

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

1. Generando números aleatorios

En el primer paso necesitamos generar números aleatorios y podemos hacerlo fácilmente usando el objeto matemático JavaScript y el método Math random().

Si crea un método aleatorio normal, obtendrá números decimales aleatorios; consulte el ejemplo siguiente:

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

Pero necesitamos generar un número aleatorio entre 0 y 16777215, podrías estar pensando por qué necesito 16777215 en lugar de "999999" o cualquier número de seis dígitos. Bueno, necesitamos usar este número de ocho dígitos porque el número 16,777,215 es el valor más alto que puede tener con un código de color hexadecimal de seis dígitos.

Los códigos de colores hexadecimales utilizan seis dígitos, donde cada dígito puede ser del 0 al 9 o de la A a la F, lo que brinda 16 opciones posibles para cada dígito.

Esto significa que puedes crear un total de 16,777,216 colores diferentes con seis dígitos. El código de color hexadecimal más grande es #FFFFFF, que corresponde a 16,777,215 en decimal.

Entonces, al usar un número hasta 16,777,215, puedes cubrir todos los colores posibles representados por un código hexadecimal de seis dígitos, incluidos aquellos que contienen caracteres alfabéticos. Esto garantiza que se incluyan todos los colores posibles, ya sea que utilicen dígitos o letras.

No olvides incluir el método Math.random() dentro de Math.floor() para asegurarte de obtener números enteros y evitar valores decimales.

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

2. Conversión de número a cadena hexadecimal

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

Ahora necesitamos convertir el número en una cadena hexadecimal, lo que se puede hacer fácilmente usando el método toString(16).

Simplemente use el método toString(16) en el número aleatorio y páselo 16 como argumento para convertirlo en una cadena hexadecimal.

Este método garantiza que el código resultante incluya solo dígitos y letras del 0 al F, sin caracteres más allá de F.

Lea también: Código de seguimiento de Google Analytics en Next.js [Guía de configuración]

3. Agregar el método padStart

Nuestra función está casi lista. Sin embargo, existe un problema potencial: a veces el código de color hexadecimal generado puede tener solo 5 caracteres en lugar de 6.

Si la función devuelve un código de color hexadecimal de 5 caracteres, no será válido. Para solucionar este problema y garantizar que siempre obtengamos un código de color hexadecimal de 6 caracteres, debemos agregar el método padStart al código.

El método padStart(6, '0') garantizará que el código de color sea siempre un código de 6 dígitos agregando ceros a la izquierda si es necesario.

Por ejemplo, si el código hexadecimal es A9A9A y contiene solo cinco caracteres, el método padStart(6, '0') agregará un 0 inicial para convertirlo en un código de color de seis dígitos, lo que dará como resultado 0A9A9A. Esto garantiza que la función siempre devuelva un código de color hexadecimal con el formato adecuado y exactamente seis caracteres.

4. Devolver el código hexadecimal generado

El paso final es devolver el código de color hexadecimal aleatorio generado para que pueda usarse fácilmente donde sea necesario.

Quiero usar una cadena de plantilla para ajustar el código de color y agregar # al principio, para no tener que agregar # manualmente cada vez que uso esta función.

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

Conclusión

Cuando creé por primera vez un generador de colores hexadecimales aleatorios en JavaScript, solo producía colores oscuros o apagados porque no incluía ningún carácter alfabético.

Después de realizar algunos cambios en el código, finalmente logré el resultado deseado. También espero que esta publicación te haya ahorrado tiempo al crear una función similar.

Comparte esta publicación con tus amigos que estén buscando un nuevo proyecto o quieran crear algo usando JavaScript.

Lea también: Cómo deshabilitar el código HTML sin eliminarlo [3 métodos]

Declaración de liberación Este artículo se reproduce en: https://dev.to/thefaruksardar/how-to-generate-random-hex-color-in-javascript-easy-guide-8pi?1 Si hay alguna infracción, comuníquese con Study_golang@163 .com para eliminarlo
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3