Como gerar cores aleatórias no Javascript?

Gerando cores RGBA

function gerar_cor(opacidade = 1) {
   let r = Math.random() * 255;
   let g = Math.random() * 255;
   let b = Math.random() * 255;

return rgba(${r}, ${g}, ${b}, ${opacidade}); }

Explicação

A função Math.random() retorna um número float aleatório de 0 a 1. Ao multiplicar por 255, estamos dizendo que o valor máximo para o valor de qualquer elemento do rgb seja de 0 a 255.

O parâmetro opacity tem como finalidade definir qual será a opacidade da cor. Por padrão deixamos o valor como 1, para não ter opacidade. No RGBA, a intensidade da opacidade varia de 0 a 1.

Sendo assim, poderíamos fazer:

gerar_cor(1); // rgba(205.2355, 123.0555, 52.116, 1)
gerar_cor(0.5); // rgba(123.456, 51.323, 203.123, 0.5) 

Se quiser não deixar os valores do RGB como float, basta apenas executar um parseInt.

function gerar_cor(opacidade = 1) {

let r = parseInt(Math.random() * 255);

let g = parseInt(Math.random() * 255);

let b = parseInt(Math.random() * 255);

return rgba(${r}, ${g}, ${b}, ${opacidade});

}

O resultado seria parecido com isso:

gerar_cor(); //rgba(176, 81, 178, 1)
gerar_cor(0.3); // rgba(176, 81, 178, 0.3)

Gerando cores hexadecimais com Javascript

function gerar_cor_hexadecimal()
{
return '#' + parseInt((Math.random() * 0xFFFFFF))
.toString(16)
.padStart(6, '0');
}

Resultado:

gerar_cor_hexadecimal(); // #a12def
gerar_cor_hexadecimal(); // #e190ec

Explicando código

O trecho a cor hexadecimal vai de 0 a 0xFFFFFF. Multiplicamos Math.random() (que gera valores float de 0 a 1) para que o limite sempre seja 0xFFFFFF. A função parseInt força o valor sempre ser um inteiro. Em seguida, chamamos toString(16), que convertará o valor númerico para hexadecimal. A função padStart(6, '0') preenche o resultado com zeros a esquerda, já que uma cor hexadecimal válida no CSS sempre contém o tamanhode 3 ou 6. E o '#' + inicia o valor com #, também padrão do CSS.

Caso queira gerar valores com apenas 3 caraceres, poderia ser feito assim:

function gerar_cor_hexadecimal()
{
return '#' + parseInt((Math.random() * 0xFFF))
.toString(16)
.padStart(3, '0');
}

Ou podemos também permitir que seja parametrizado, da seguinte forma:

function gerar_cor_hexadecimal(curto = false)
{
  const max_hex = curto ? 0xFFF : 0xFFFFFF;

return '#' + parseInt((Math.random() * max_hex)) .toString(16) .padStart(curto ? 3 : 6, '0'); }

gerar_cor_hexadecimal(true); // #a13 gerar_cor_hexadecimal(); // #a1b2c3 gerar_cor_hexadecimal(false); // #c3b2a1