Neste artigo você vai aprender a gerar cor aleatória com JavaScript, com uma simples função e recursos nativos da linguagem

Gerar cor aleatória com JavaScript capa

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!
Subscribe
Notify of
guest

2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Augusto

muito bom! Me ajudou no meu projeto

0
Responder
Wilson

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);">)
}

1
Responder