🎨Gerador de cores aleatórias
Clique em gerar e veja uma paleta de cores aleatórias com os códigos HEX, RGB e HSL. Trave as que você gostou, gere de novo só as demais e copie o código com um clique. Ideal para design, código e inspiração.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: Web Crypto API e modelo de cor HSL (CSS Color) — conversão HSL para RGB e HEX conforme a especificação CSS Color; sorteio local · Última verificação em 24/09/2026
Um gerador de cores aleatórias sorteia matiz, saturação e luminosidade e mostra a cor resultante em HEX, RGB e HSL. Você define a quantidade, escolhe o estilo (pastel, vivas ou escuras), trava as cores que gostou e gera novamente só as outras, copiando o código com um clique. Tudo roda no navegador.
Como usar o gerador de cores aleatórias
- Escolha quantidade e estiloDefina de 1 a 12 cores. O estilo qualquer cor sorteia tudo; pastel gera tons suaves; vivas gera cores saturadas; escuras gera tons profundos.
- Gere e trave as favoritasClique em gerar para ver as amostras. Ao gostar de uma, clique em travar: ela permanece na tela enquanto as demais mudam no próximo sorteio.
- Copie os códigosUse copiar HEX em uma amostra ou copie todos os códigos de uma vez. Os valores RGB e HSL aparecem abaixo de cada cor, prontos para conferir e colar no CSS.
Como funciona o sorteio de cores
A ferramenta trabalha no modelo HSL, que descreve a cor de forma parecida com o modo como a percebemos: o matiz é o ângulo no círculo cromático (0 a 360 graus, do vermelho passando por verde e azul), a saturação indica a intensidade e a luminosidade indica o quão clara ou escura é a cor. Cada componente é sorteado com o gerador criptográfico do navegador dentro de uma faixa que depende do estilo escolhido.
Depois do sorteio, o HSL é convertido em RGB, com valores de 0 a 255 para vermelho, verde e azul, e em HEX, que escreve esses três valores em base 16 precedidos de cerquilha, como #3A7BD5. O código de cada cor é exibido nos três formatos, e o texto sobre a amostra troca entre claro e escuro conforme a luminosidade, para continuar legível.
HSL → matiz 0–360°, saturação 0–100%, luminosidade 0–100%
Exemplo de uso
Uma designer precisa de cinco cores para começar o rascunho de um cartaz. Ela escolhe o estilo pastel, quantidade 5 e gera. Aparece uma combinação em que gostou de duas amostras, um rosa suave e um verde-água. Ela trava essas duas e gera outra vez: as três restantes mudam, enquanto as travadas continuam na tela. Depois de algumas rodadas, copia todos os HEX e cola no arquivo de estilos.
Um desenvolvedor pode usar o mesmo recurso para colorir gráficos de teste, avatares provisórios ou etiquetas de categorias, sorteando doze cores vivas e copiando os códigos. Já um professor de artes pode propor um desafio: sortear três cores e criar uma pintura usando apenas aquelas tonalidades e as misturas entre elas.
HEX, RGB e HSL: quando usar cada formato
O HEX é o formato mais comum em CSS e em ferramentas de design, por ser curto e fácil de copiar. O RGB é útil quando você precisa de transparência (rgba) ou quando trabalha com código que manipula os canais separadamente. O HSL é o mais amigável para ajustes manuais: para clarear uma cor, basta aumentar a luminosidade; para deixá-la mais apagada, reduza a saturação; para trocar o tom, gire o matiz. Todos os três representam exatamente a mesma cor, e aqui aparecem juntos para que você escolha o que se encaixa melhor no seu projeto.
Como montar uma paleta que combine
Cores totalmente aleatórias raramente formam uma paleta harmônica. Um bom método é sortear, travar a cor que mais agrada e usar o gerador várias vezes até surgirem companheiras que funcionem. O estilo pastel tende a combinar entre si, porque as cores compartilham saturação e luminosidade parecidas. Para textos e fundos, confira o contraste com o verificador do site: texto claro sobre fundo claro é ilegível, mesmo que as duas cores sejam bonitas separadamente.
Suposições e limitações
- As cores são sorteadas em HSL; a conversão para RGB e HEX arredonda os canais para inteiros, o que pode causar diferenças mínimas entre formatos
- A ferramenta não verifica contraste nem acessibilidade; use o verificador de contraste do site antes de aplicar em textos
- A aparência real varia conforme o monitor, o brilho e o perfil de cor do dispositivo
- O limite é de 12 cores por rodada, e as travas são apagadas ao recarregar a página
Dicas para tirar o melhor proveito
Use o estilo pastel para fundos e áreas amplas, e o estilo vivas para destaques e botões. Se estiver montando uma identidade visual, gere várias rodadas, trave a cor principal e procure as secundárias com o mesmo estilo, o que costuma gerar harmonia. Copie os HEX de todas as cores ao final e guarde em um arquivo, porque o resultado desaparece ao recarregar a página. Como o processamento é 100% local, nada sai do navegador. Para transformar a paleta em degradê, use o gerador de gradiente CSS do site, e para converter formatos, o conversor de cores.
Erros comuns a evitar
Um erro comum é escolher cores apenas pelo primeiro impacto e esquecer de testar contraste: um fundo bonito com texto ilegível prejudica a leitura e a acessibilidade. Outro é usar cores demais no mesmo projeto, quando três ou quatro bastam para uma identidade clara. Também é frequente confundir o HEX de três dígitos com o de seis: a forma curta só funciona quando cada canal tem dois dígitos iguais. Por fim, muita gente esquece que a cor na tela não é igual à cor impressa, então, para materiais gráficos, confira uma prova antes de imprimir em grande quantidade.
Veja também
Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Gerador de gradiente CSS, Conversor de cores (HEX, RGB, HSL), Verificador de contraste de cores, Gerador de paleta de cores.
Ferramentas relacionadas
🎨Gerador de gradiente CSS
Escolha as cores e a direção, veja o preview ao vivo e copie o código CSS pronto.
Abrir ferramenta →🌈Conversor de cores (HEX, RGB, HSL)
Digite ou escolha uma cor e veja HEX, RGB e HSL sincronizados na hora.
Abrir ferramenta →🎨Verificador de contraste de cores
Calcule a razão de contraste entre texto e fundo e veja se passa no WCAG AA e AAA.
Abrir ferramenta →🎨Gerador de paleta de cores
Gere 5 cores harmônicas a partir de uma cor base: complementar, análoga, triádica ou monocromática.
Abrir ferramenta →Perguntas frequentes
Como gerar cores aleatórias online?
Escolha a quantidade e o estilo, clique em gerar e copie o código da cor que gostar. Você pode travar cores para mantê-las enquanto gera novas ao lado.
Qual a diferença entre HEX, RGB e HSL?
São formas diferentes de escrever a mesma cor. HEX e RGB descrevem as intensidades de vermelho, verde e azul, e HSL descreve matiz, saturação e luminosidade, o que facilita ajustes manuais.
Como travar uma cor e gerar as outras?
Clique em travar na amostra que deseja manter. Ao gerar novamente, apenas as cores destravadas mudam, e as travadas permanecem exatamente iguais.
O que são cores pastel e cores vivas?
Pastel são cores claras e suaves, com saturação moderada e luminosidade alta. Vivas são cores intensas, com saturação alta e luminosidade média, ideais para destaques.
Posso copiar todos os códigos de uma vez?
Sim. O botão copiar todos os HEX reúne os códigos de todas as amostras, um por linha, e copia para a área de transferência.
As cores geradas são enviadas a algum servidor?
Não. O sorteio e a conversão acontecem inteiramente no seu navegador, e nada é enviado ou armazenado em servidores.
Explore mais ferramentas gratuitas
Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.