Neste artigo, orientarei você na criação de uma função JavaScript que gera um código de cores hexadecimal aleatório composto por uma mistura de números e alfabetos.

Esta função gera uma cor hexadecimal aleatória cada vez que é executada:

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. Gerando Números Aleatórios

Na primeira etapa, precisamos gerar números aleatórios e podemos fazer isso facilmente usando o objeto JavaScript Math e o método Math random().

Se você criar um método aleatório normal, ele fornecerá números decimais aleatórios, veja o exemplo abaixo:

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

Mas precisamos gerar um número aleatório entre 0 e 16777215, você pode estar pensando por que preciso de 16777215 em vez de "999999" ou qualquer número de seis dígitos, bem, precisamos usar esse número de oito dígitos porque o número 16.777.215 é o valor mais alto que você pode ter com um código de cor hexadecimal de seis dígitos.

Os códigos de cores hexadecimais usam seis dígitos, onde cada dígito pode ser de 0 a 9 ou de A a F, oferecendo 16 opções possíveis para cada dígito.

Isso significa que você pode criar um total de 16.777.216 cores diferentes com seis dígitos. O maior código de cor hexadecimal é #FFFFFF, que corresponde a 16.777.215 em decimal.

Portanto, usando um número até 16.777.215, você pode cobrir todas as cores possíveis representadas por um código hexadecimal de seis dígitos, incluindo aquelas que contêm caracteres alfabéticos. Isso garante que todas as cores possíveis, sejam elas dígitos ou letras, sejam incluídas.

Não se esqueça de agrupar o método Math.random() dentro de Math.floor() para garantir que você obtenha números inteiros e evite valores decimais.

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

2. Convertendo número em string hexadecimal

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

}

Agora precisamos converter o número em uma string hexadecimal, o que pode ser feito facilmente usando o método toString(16).

Basta usar o método toString(16) no número aleatório e passar 16 como argumento para convertê-lo em uma string hexadecimal.

Este método garante que o código resultante inclua apenas dígitos e letras de 0 a F, sem quaisquer caracteres além de F.

Leia também: Código de rastreamento do Google Analytics em Next.js [Guia de configuração]

3. Adicionar método padStart

Nossa função está quase pronta. No entanto, há um problema potencial: às vezes, o código de cor hexadecimal gerado pode ter apenas 5 caracteres em vez de 6.

Se a função retornar um código de cor hexadecimal de 5 caracteres, ela não será válida. Para corrigir isso e garantir que sempre obtenhamos um código de cor hexadecimal de 6 caracteres, precisamos adicionar o método padStart ao código.

O método padStart(6, '0') garantirá que o código de cores seja sempre um código de 6 dígitos adicionando zeros à esquerda, se necessário.

Por exemplo, se o código hexadecimal for A9A9A e contiver apenas cinco caracteres, o método padStart(6, '0') adicionará um 0 à esquerda para torná-lo um código de cores de seis dígitos, resultando em 0A9A9A. Isso garante que a função sempre retorne um código de cores hexadecimal formatado corretamente com exatamente seis caracteres.

4. Retorne o código hexadecimal gerado

A etapa final é retornar o código de cor hexadecimal aleatório gerado para que possa ser facilmente usado sempre que necessário.

Quero usar uma string de modelo para agrupar o código de cores e adicionar # no início, para não precisar adicionar # manualmente sempre que usar esta função.

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

Conclusão

Quando criei pela primeira vez um gerador de cores hexadecimais aleatórios em JavaScript, ele produzia apenas cores escuras ou opacas porque não incluía nenhum caractere alfabético.

Depois de fazer algumas alterações no código, finalmente consegui o resultado desejado. Também espero que esta postagem tenha economizado seu tempo na criação de uma função semelhante.

Compartilhe este post com seus amigos que estão procurando um novo projeto ou querem construir algo usando JavaScript!

Leia também: Como desativar o código HTML sem excluir [3 métodos]