Precisa de uma cor para um mockup, um gráfico ou uma tela em branco, e prefere não escolher uma por hábito? Este gerador gratuito de cores aleatórias extrai cores de todo o intervalo de 24 bits que uma tela pode mostrar e coloca cada uma em uma amostra ao lado do seu código. Escolha quantas cores você quer no campo Quantidade — qualquer valor de 1 a 50 — marque os formatos de que você precisa e clique em Gerar. A página abre com uma única cor em HEX, então o primeiro resultado está a um clique de distância. A caixa de seleção Código HEX está marcada desde o início, Código RGB e Código HSL ficam ao lado dela, e qualquer combinação dos três pode ser ativada ao mesmo tempo. O botão em forma de engrenagem ao lado do botão Gerar abre a seção Opções avançadas, onde você pode limitar as cores a um tipo ou intervalo, excluir repetições e mudar como o HEX é escrito.
Cada cor é criada no seu navegador por meio da Web Crypto API (crypto.getRandomValues), que fornece bytes aleatórios criptograficamente fortes a partir da própria fonte de aleatoriedade do seu sistema, em vez de uma função pseudoaleatória como Math.random(). Uma cor na tela é composta de três canais — vermelho, verde e azul —, cada um um número inteiro de 0 a 255, e um byte aleatório pode assumir exatamente 256 valores. Então cada canal é simplesmente um byte, sem etapas intermediárias: nenhum resto é considerado, e nenhuma etapa de conversão favorece algum tom. Isso torna todas as 16.777.216 cores que a página pode produzir exatamente equiprováveis, cada vez que você clica em Gerar. Um intervalo mais estreito na seção Opções avançadas preserva essa propriedade dentro do intervalo: as cores continuam sendo extraídas de todo o espaço, e as que caem fora são descartadas, de modo que cada cor permitida pelo intervalo tem a mesma chance. Nada é enviado a um servidor, nada é registrado, e depois que a página carrega, ela continua funcionando mesmo sem conexão.
Os três formatos descrevem a mesma cor de três maneiras. O formato Código HEX é a forma de seis dígitos usada em CSS e na maioria das ferramentas de design, como #0778ff; ele é escrito em letras minúsculas com um # no início, e as opções Maiúsculas e Sem # da seção Opções avançadas mudam isso para ferramentas que esperam de outra forma. O formato Código RGB detalha os três canais, como em rgb(7, 120, 255), o que é adequado para código que trabalha com cada canal separadamente. O formato Código HSL descreve a cor por tonalidade, saturação e luminosidade, como em hsl(213, 100%, 51%), a forma mais fácil de ajustar manualmente depois. Os três são colados diretamente em uma folha de estilos. No entanto, eles não são igualmente precisos. HEX e RGB são exatos; HSL é arredondado. A página escreve tonalidade, saturação e luminosidade como números inteiros, e em cerca de 89% das cores esse valor arredondado não volta a dar exatamente a mesma cor: #646503 é mostrado como hsl(61, 94%, 20%), que, convertido de novo, dá #616303. A diferença nunca é maior que 5 passos em um canal e geralmente é de 1 ou 2 — invisível na tela, mas real se você salvar o valor HSL e esperar recuperar o HEX original. Salve de preferência o valor HEX ou RGB.
Uma cor aparece como um único bloco no meio do resultado; várias aparecem como uma lista numerada, uma cor por linha, com os formatos escolhidos lado a lado e um pequeno selo de contraste no final. Uma lista com mais de três cores rola dentro da caixa, e a seta no canto dela a expande para a altura total; a página lembra como você a deixou da última vez. Clique em qualquer código para copiar apenas esse código. O botão de cópia no final de uma linha copia todos os códigos daquela cor em uma única linha, separados por espaços. Clique na própria amostra e o seletor de cores do seu navegador se abre: escolha outra cor ali, e todos os códigos naquela linha são reescritos de acordo, em cada formato que você ativou, junto com o selo. O botão Copiar tudo copia o lote completo, uma cor por linha, e o botão Salvar em arquivo grava o mesmo texto em um arquivo .txt simples; os dois levam em conta qualquer cor que você tenha alterado no seletor. O painel Histórico guarda seus últimos 10 lotes neste navegador, exatamente como foram gerados, e o botão Limpar esvazia o resultado. Suas configurações, incluindo as da seção Opções avançadas, são lembradas para a próxima visita.
Cores equiprováveis não parecem distribuídas de forma uniforme, e saber o que esperar evita clicar em Gerar pelo motivo errado. Segundo medições em todo o intervalo, cerca de 35% das cores são vivas e saturadas, com saturação HSL de pelo menos 70% e luminosidade entre 35% e 65%. As cores quase cinzas, com saturação abaixo de 20%, são apenas cerca de 4%, e as cores muito escuras (luminosidade abaixo de 20%) e muito claras (acima de 80%) são cerca de 3% cada. Então um lote de dez cores com a opção Todas as cores normalmente terá várias cores fortes e raramente um tom pastel ou um cinza-chumbo. Quando você precisar de um tipo específico, escolha-o em Tipo de cor: a opção Vivo corresponde exatamente a esse grupo, e as opções Pastel, Escuro, Suave e Escala de cinza, cada uma ao seu. A opção Personalizado permite definir seus próprios intervalos de Tonalidade, Saturação e Luminosidade, e um intervalo de tonalidade pode passar por 0, então de 330 a 30 dá vermelhos. O intervalo é verificado em relação ao código HSL que a página mostra, então nenhum código fica fora dele, e se ele contiver poucas cores para o valor de Quantidade, a página pede que você o amplie em vez de repetir cores. Fora isso, repetições são possíveis, mas raras: marque Sem repetições para excluí-las, e sem essa opção, a chance de que duas das 50 cores de todo o intervalo saiam idênticas é de cerca de 1 em 13.700.
Uma cor aleatória costuma ser usada como fundo, o que levanta a única pergunta que uma amostra não pode responder a olho nu: o texto sobre ela será legível? A diretriz de acessibilidade web, WCAG, exige uma taxa de contraste de pelo menos 4,5:1 para texto normal. Segundo medições em todas as cores que esta página pode produzir, o texto preto alcança isso em cerca de 65% delas e o texto branco em cerca de 36%, e não há nenhuma cor em que os dois falhem: o melhor dos dois sempre alcança pelo menos 4,58:1. Então, para qualquer fundo aleatório, o texto preto ou o branco vai atender ao requisito, e a página mostra qual. Ao lado de cada cor aparece um pequeno selo que mostra Aa na mais legível das duas cores de texto, seguido pela taxa de contraste. A taxa é arredondada para baixo, então ela nunca é superestimada, e é atualizada quando você muda a cor no seletor. O selo compara apenas texto preto e branco; para uma cor de marca ou qualquer outra cor de texto, use um verificador de contraste.
Aleatório não é a mesma coisa que harmonioso. Cada cor de um lote é extraída de forma independente, sem conhecimento das outras, então o gerador nunca constrói uma paleta no sentido do designer — sem pares complementares, sem sequências análogas, sem luminosidade compartilhada. Um intervalo mais estreito muda o caráter de um lote, não essa regra: tons pastel ou uma sequência de azuis ainda chegam um a um, sem nada que os conecte. Esse é justamente o objetivo: ele entrega a cor que você não teria escolhido, e é isso que rompe um hábito ou um bloqueio criativo. Para transformar um achado aleatório em algo útil, mantenha a cor de que você gostou e construa a partir dela, em vez de clicar em Gerar até que um conjunto inteiro combine por acaso. Mantenha a tonalidade fixa e ajuste a luminosidade para obter variantes mais claras e mais escuras, ou gire a tonalidade em 180 graus para obter uma cor de contraste. O formato Código HSL é o que transforma esses movimentos em aritmética em vez de tentativa e erro.
Por que escolher este gerador de cores aleatórias?
- Cada cor criada no seu navegador com a Web Crypto API, nada é enviado
- Todas as 16.777.216 cores exatamente equiprováveis, um byte aleatório por canal
- Códigos HEX, RGB e HSL para a mesma cor, em qualquer combinação
- Até 50 cores por vez, cada uma em uma amostra com um selo de contraste de texto
- Vivo, Pastel, Escuro, Suave e Escala de cinza, ou seu próprio intervalo de tonalidade, saturação e luminosidade
- Sem repetições quando você precisar, e HEX em maiúsculas ou sem #
- Clique em um código para copiá-lo, ou mude qualquer cor no seletor de cores do seu navegador
- Copiar tudo, Salvar em arquivo e um Histórico dos seus últimos 10 lotes, guardado no seu navegador
- Grátis e ilimitado: sem cadastro, sem cota, nada é armazenado em nossos servidores
Cores aleatórias se mostram úteis em qualquer situação em que se precisa de uma cor antes de alguém ter escolhido uma. Designers as usam para romper um bloqueio criativo e encontrar um ponto de partida que sua paleta habitual nunca alcançaria. Desenvolvedores preenchem mockups, espaços reservados e avatares, dão a cada série de um gráfico sua própria cor enquanto o tema real ainda não está decidido, e testam como uma interface se comporta com fundos para os quais não foi projetada — um lote de 50 com a opção Todas as cores quase sempre inclui pelo menos uma cor muito escura ou muito clara, e a opção Escuro ou Pastel direciona o teste para um desses extremos. Artistas generativos e quem prototipa jogos alimentam os valores diretamente no código, onde a forma RGB se encaixa na maioria das bibliotecas gráficas. Professores colocam os três formatos lado a lado para mostrar que uma cor pode ser escrita como um código, como três canais ou como uma posição em um círculo cromático, e por que a versão HSL é arredondada. E qualquer pessoa que rotule, marque ou codifique por cores uma lista obtém cores distintas sem se preocupar em qual escolher.
Vale a pena conhecer alguns limites honestos. Este é um gerador, não uma ferramenta de paletas: ele não constrói harmonias de cor e não mantém uma cor fixa enquanto as outras mudam, e um intervalo mais estreito dá cores de um só tipo, não cores escolhidas para combinar entre si. O selo de contraste compara apenas texto preto e branco. A página trabalha com as cores sRGB que uma tela exibe — HEX, RGB e HSL — sem transparência e sem CMYK, Pantone, OKLCH ou cores CSS nomeadas; para impressão, ajuste a cor no seu processo de impressão em vez de confiar em um código de tela. O mesmo código também pode parecer um pouco diferente de uma tela para outra, porque as telas não são calibradas da mesma forma. Os valores HSL são arredondados, como descrito acima, e a menos que Sem repetições esteja marcado, um lote não é verificado quanto a repetições. O que a página realmente garante é mais restrito e exato: cada uma das suas 16.777.216 cores, ou cada cor dentro do intervalo que você definiu, tem a mesma chance a cada clique, extraída da fonte criptográfica do seu navegador e nunca enviada a lugar nenhum.