Gerar cor aleatória com JavaScript

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

Pra gerar uma cor aleatória com JavaScript tu monta um código hexadecimal de 6 dígitos (#RRGGBB) e sorteia os caracteres com Math.random(). Dá pra fazer numa função com laço ou numa linha só:

const cor = ‘#’ + Math.floor(Math.random() * 16777215).toString(16).padStart(6, ‘0’)

O 16777215 é o 0xFFFFFF, o maior valor de uma cor hex de 3 bytes, e o padStart(6, ‘0’) garante os 6 dígitos pra cor nunca sair inválida. Cada vez que tu roda, sai uma cor nova

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!

Bloco "Versão mais curta pra gerar cor hexadecimal:" mostrando a abordagem de um número só:

const cor = ‘#’ + Math.floor(Math.random() * 16777215).toString(16).padStart(6, ‘0’)

Explicando o porquê: em vez de sortear caractere por caractere, tu sorteia um único número entre 0 e 16777215 e converte pra hexadecimal com toString(16)

O 16777215 é o 0xFFFFFF, o maior valor de uma cor hex de 3 bytes (branco puro), então esse é o teto do sorteio

O padStart(6, ‘0’) no fim garante os 6 dígitos: o toString(16) omite zeros à esquerda e pode devolver menos de 6 caracteres, o que geraria uma cor inválida

Bloco "O que é uma cor aleatória?" definindo em duas linhas: é uma cor escolhida por sorteio, sem tu apontar qual

Na web ela vira um código de cor hexadecimal: um número hex de 6 dígitos (3 bytes) usado em HTML, CSS e SVG, no formato #RRGGBB

Gerar uma cor aleatória é sortear esses 6 dígitos e montar a string

Uma ressalva honesta: o Math.random() serve muito bem pra cor decorativa, mas ele não é criptograficamente seguro e não deve ser usado em contexto de segurança (senha, token, sorteio valendo dinheiro)

Pra esses casos existe a Web Crypto API com crypto.getRandomValues(), disponível em todos os navegadores desde julho de 2015

Pra pintar um elemento na tela, pode usar Math.random() sem medo

O núcleo dessa função é o mesmo Math.floor(Math.random() * n) que a gente já usou pra montar um gerador de número aleatório entre dois valores num vídeo da playlist de JavaScript

Rodando aquele no console várias vezes, o número sempre caía dentro do intervalo, sem estourar pra cima nem pra baixo

Aqui a lógica é idêntica, só que em vez de um intervalo livre a gente prende o sorteio nos 16 caracteres do hexadecimal, então cada chamada devolve uma cor nova e sempre válida

Se tu duvida, joga a função no console e chama umas dez vezes seguidas pra ver a aleatoriedade acontecendo