Gerador de cores aleatórias

Este gerador de cores aleatórias dá uma cor nova com os códigos HEX, RGB e HSL em um clique. Mude para o modo paleta para montar um conjunto de cinco e guardar os tons de que gostar.

Códigos da cor

HEX
RGB
HSL

Contraste do texto

Texto branco 2,75:1
  • AA falha
  • AAA falha
Texto preto 7,61:1
  • AA passa
  • AAA passa

Texto normal precisa de pelo menos 4,5:1 para AA e 7:1 para AAA.

Pressione Espaço para novas cores

O que faz o gerador de cores aleatórias

Cada vez que você aperta Gerar, uma nova cor é sorteada e seu código aparece em três formatos: HEX, RGB e HSL. O modo paleta mostra cinco cores de uma vez: trave as que gostar e sorteie de novo as outras até o conjunto ficar bom.

Ao lado de cada cor há uma verificação de contraste. Ela mostra o quanto texto branco e texto preto seriam legíveis por cima dela, usando a mesma razão de contraste das diretrizes de acessibilidade na web (WCAG).

Como usar

  1. Aperte Gerar (ou a barra de espaço) para ver uma nova cor aleatória.
  2. Copie o valor de que precisa. Códigos HEX como #3A7BD5 servem para a maioria das ferramentas de design e páginas web, o RGB lista as partes de vermelho, verde e azul, e o HSL descreve matiz, saturação e luminosidade.
  3. Mude para o modo paleta para ver cinco cores lado a lado.
  4. Trave qualquer cor que quiser manter. Quando você gerar de novo, só as cores destravadas mudam.
  5. Confira o contraste. Cada cor mostra sua razão em relação ao texto branco e ao preto, para você ver de relance qual é mais fácil de ler.

Jeitos de usar um gerador de paletas de cores

Projetos de design

Travou na combinação de cores de um cartaz, uma apresentação, um site ou um convite? Gere uma paleta, trave uma ou duas cores que combinam e continue sorteando até o resto se encaixar.

Prática de arte e ilustração

Faça um desafio: pinte ou desenhe algo usando só as cinco cores da tela. Limites aleatórios levam você a misturar, sobrepor e testar combinações que nunca escolheria de propósito.

Programação e testes

Uma cor hex aleatória é prática para fundos provisórios, dados de teste e experimentos rápidos de tema. Copie o código direto para a sua folha de estilos.

Artesanato e ideias para a casa

Tricô, patchwork, cartões e pintura de um cômodo começam com a escolha de cores. Use a paleta como ponto de partida e depois ajuste aos materiais que você tem.

Aulas de cores

Mostre aos alunos como HEX, RGB e HSL descrevem a mesma cor de jeitos diferentes. A verificação de contraste é uma forma simples de explicar por que alguns textos são difíceis de ler em certos fundos.

Dicas para trabalhar com cores

  • Leia um código HEX em pares. Os seis caracteres depois do # são três pares, para vermelho, verde e azul, cada um de 00 (nada) a FF (máximo).
  • Use HSL para fazer versões mais claras ou mais escuras. Mantenha o matiz e mude a luminosidade para obter tons claros e escuros de uma cor na sua ferramenta de design.
  • Busque um bom contraste. O nível AA das WCAG pede razão de pelo menos 4,5:1 para texto normal e 3:1 para texto grande.
  • Trave primeiro, sorteie depois. Se você já tem uma cor de que gosta, trave-a e deixe o gerador sugerir as outras.
  • Tela e papel são diferentes. As cores podem parecer diferentes na impressão, então teste uma amostra antes de uma impressão grande.
  • Quer ideias de arte também? Combine uma paleta com o gerador de imagens aleatórias ou com uma lista de coisas para desenhar.

Perguntas

Como consigo uma cor hex aleatória?

Aperte Gerar e o código HEX aparece ao lado da nova cor, junto com os valores RGB e HSL, prontos para copiar.

Qual é a diferença entre HEX, RGB e HSL?

São três formas de escrever a mesma cor. HEX e RGB listam quantidades de vermelho, verde e azul, enquanto o HSL descreve o matiz, a intensidade e a luminosidade.

Posso montar uma paleta de cores completa?

Sim. O modo paleta mostra cinco cores de uma vez. Trave as que quiser manter e gere de novo para trocar só as outras.

O que significa a verificação de contraste?

Ela mostra a razão de contraste entre a cor e o texto branco ou preto. Uma razão maior significa texto mais fácil de ler, e 4,5:1 ou mais é a meta usual para texto normal.

Posso usar as cores nos meus próprios projetos?

Sim. Copie qualquer código e cole em uma ferramenta de design, folha de estilos ou aplicativo que aceite códigos de cor.

O gerador de cores aleatórias é grátis?

Totalmente grátis e sem cadastro. As cores são criadas no seu navegador e o site não usa cookies.

Última atualização: 2 de outubro de 2026