Neste artigo você vai aprender a gerar cor aleatória com JavaScript, com uma simples função e recursos nativos da linguagem
Fala programador(a), beleza? Bora aprender mais sobre como criar uma cor com JavaScript!
Vamos gerar uma função que nos retorna uma cor hexadecimal
Parar isso vamos listar todas as possibilidades de caracteres que são:
- Letras de A a F;
- Números de 0 a 9;
Depois, de forma aleatória, vamos atribuindo caracteres a uma string que será a nossa cor
Por fim retornamos esta string para o usuário
Veja um exemplo prático do que foi explicado acima:
function generateColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } console.log(generateColor()) // #8432EA
Veja que a função primeiramente lista os caracteres possíveis e depois vai atribuindo caracteres até o limite de 6 para a string
No fim nos é retornado uma cor, que exibimos na última linha deste código
A cada vez que a função for invocada é dada uma nova cor
Conclusão
No artigo de hoje você viu como gerar cor aleatória com JavaScript
Criamos uma função para isso, que monta uma string que representa uma cor em hexadecimal
Toda vez que a função é executada, uma nova cor é gerada
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!
muito bom! Me ajudou no meu projeto
function randomColor(){
let R = Math.floor(Math.random() * 255)
let G = Math.floor(Math.random() * 255)
let B = Math.floor(Math.random() * 255)
return
rgb(</span><span style="color: rgb(86, 156, 214);">${</span><span style="color: rgb(156, 220, 254);">R</span><span style="color: rgb(86, 156, 214);">}</span><span style="color: rgb(206, 145, 120);">, </span><span style="color: rgb(86, 156, 214);">${</span><span style="color: rgb(156, 220, 254);">G</span><span style="color: rgb(86, 156, 214);">}</span><span style="color: rgb(206, 145, 120);">, </span><span style="color: rgb(86, 156, 214);">${</span><span style="color: rgb(156, 220, 254);">B</span><span style="color: rgb(86, 156, 214);">}</span><span style="color: rgb(206, 145, 120);">)
}