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(); // #e190ecExplicando 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