5

Nessa pergunta, ensina como gerar cores aleatórias através do PHP.

Como fazer isso em JavaScript?

3 Respostas 3

6

Em uma linha, dá para fazer assim:

'#' + Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, '0');

Breve explicação da expressão acima:

  • A função Math.floor arredonda o número para baixo, de modo a remover a parte decimal do número gerado pela função Math.random.
  • O método Number.prototype.toString(16) converte o número em string em sua representação hexadecimal.
  • O método String.prototype.padStart(6, '0') garante que a string hexadecimal tenha sempre seis dígitos.

E uma adaptação em JavaScript desta outra resposta:

let str = '#';
while (str.length < 7) {
  str += Math.floor(Math.random() * 0x10).toString(16);
}
0
5

A título de curiosidade também é possível utilizar a API de criptografia para gerar números aleatórios.

Diferentemente dos outros métodos da API de criptografia, o método RandomSource.getRandomValues() permite obter valores randômicos independente do contexto de segurança em que o código está sendo executado.

RandomSource.getRandomValues() aceita como parâmetro um objeto typedArray e preenche com números aleatórios e o retorna.

O método TypedArray.prototype.reduce() aplica uma função a um acumulador e cada valor do array para reduzi-los a um único valor.

let rgb = window.crypto.getRandomValues(new Uint8Array(3))
          .reduce((acc, val) => acc + val.toString(16), "#");

console.log(rgb)

Tabela de compatibilidade de RandomSource.getRandomValues()
Math.random vs crypto.getRandom

1
  • 2
    Muito legal, Augusto! +1 :) Mas deixarei o mesmo questionamento que deixei na outra resposta: Tendo em vista que a API crypto foi feita para fins que requerem números criptograficamente seguros, será que é realmente necessário utilizar algo tão poderoso e, portanto, mais computacionalmente exigente para algo tão simplório como gerar uma cor aleatória? Sei que você sabe da resposta para essa pergunta, mas deixo isso para outras pessoas que podem não saber disso. Commented 3/02/2021 às 20:56
-2

    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    function setRandomColor() {
      $("#colorpad").css("background-color", getRandomColor());
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">

</div>
<button onclick="setRandomColor()">Gerar Cor</button>

1
  • 3
    Poderia adicionar uma explicação sobre o que o código faz? Commented 3/02/2021 às 20:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .