Precisa de uma cor para uma maqueta, um gráfico ou uma tela em branco e prefere não a escolher por hábito? Este gerador gratuito de cores aleatórias retira cores de todo o intervalo de 24 bits que um ecrã consegue mostrar e coloca cada uma numa amostra ao lado do seu código. Escolha quantas quer no campo Quantidade — qualquer valor de 1 a 50 — assinale os formatos de que precisa e clique em Gerar. A página abre com uma única cor em HEX, por isso o primeiro resultado está a um clique de distância. A caixa de verificação Código HEX está assinalada desde o início, Código RGB e Código HSL estão ao lado dela, e qualquer combinação das três pode ser ativada ao mesmo tempo. O botão em forma de roda dentada junto ao botão Gerar abre a secção Opções avançadas, onde pode limitar as cores a um tipo ou intervalo, excluir repetições e alterar a forma como o HEX é escrito.
Cada cor é criada no seu navegador através 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 no ecrã é composta por 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. Portanto, cada canal é simplesmente um byte, sem passos intermédios: não se toma nenhum resto e nenhum passo de conversão favorece um tom. Isso faz com que todas as 16.777.216 cores que a página pode produzir sejam exatamente equiprováveis, sempre que clicar em Gerar. Um intervalo mais estreito na secção Opções avançadas preserva essa propriedade dentro do intervalo: as cores continuam a ser retiradas de todo o espaço, e as que ficam de fora são descartadas, pelo que cada cor permitida pelo intervalo tem a mesma probabilidade. Nada é enviado a um servidor, nada é registado, e depois de a página carregar, continua a funcionar mesmo sem ligação.
Os três formatos descrevem a mesma cor de três formas. O formato Código HEX é a forma de seis dígitos usada em CSS e na maioria das ferramentas de design, como #0778ff; escreve-se em minúsculas com um # no início, e as opções Maiúsculas e Sem # da secção Opções avançadas alteram isso para ferramentas que esperam outra coisa. O formato Código RGB indica os três canais por extenso, como em rgb(7, 120, 255), o que convém a código que trabalha com cada canal separadamente. O formato Código HSL descreve a cor através da tonalidade, saturação e luminosidade, como em hsl(213, 100%, 51%), a forma mais fácil de ajustar à mão depois. Os três colam-se diretamente numa folha de estilos. Contudo, não são igualmente precisos. HEX e RGB são exatos; HSL é arredondado. A página escreve a tonalidade, a saturação e a 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 é superior a 5 passos num canal e costuma ser de 1 ou 2 — invisível no ecrã, mas real se guardar o valor HSL e esperar recuperar o HEX original. Guarde 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 desloca-se dentro da caixa, e a seta no canto abre-a até à altura total; a página lembra-se de como 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 dessa cor numa única linha, separados por espaços. Clique na própria amostra e abre-se o seletor de cores do seu navegador: escolha aí outra cor, e todos os códigos nessa linha são reescritos em conformidade, em cada formato que ativou, juntamente com o respetivo selo. O botão Copiar tudo copia o lote completo, uma cor por linha, e o botão Guardar em ficheiro grava o mesmo texto num ficheiro .txt simples; ambos têm em conta qualquer cor que tenha alterado no seletor. O painel Histórico guarda os seus últimos 10 lotes neste navegador, exatamente como foram gerados, e o botão Limpar esvazia o resultado. As suas configurações, incluindo as da secçã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 uma saturação HSL de pelo menos 70% e uma luminosidade entre 35% e 65%. As cores quase cinzentas, com saturação inferior a 20%, são apenas cerca de 4%, e as cores muito escuras (luminosidade inferior a 20%) e muito claras (superior a 80%) são cerca de 3% cada. Por isso, um lote de dez cores com a opção Todas as cores costuma conter várias cores fortes e raramente um tom pastel ou um cinzento-antracite. Quando 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 cinzentos, cada uma ao seu. A opção Personalizado permite definir os seus próprios intervalos de Tonalidade, Saturação e Luminosidade, e um intervalo de tonalidade pode passar pelo 0, por isso de 330 a 30 dá vermelhos. O intervalo é verificado em relação ao código HSL que a página mostra, por isso nenhum código fica fora dele, e se contiver poucas cores para o valor de Quantidade, a página pede-lhe que o alargue em vez de repetir cores. De resto, as repetições são possíveis mas raras: assinale Sem repetições para as excluir, e sem essa opção a probabilidade de duas das 50 cores de todo o intervalo saírem idênticas é de cerca de 1 em 13.700.
Uma cor aleatória é muitas vezes usada como fundo, o que levanta a única pergunta que uma amostra não consegue responder a olho: 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 atinge isso em cerca de 65% delas e o texto branco em cerca de 36%, e não há nenhuma cor em que ambos falhem: o melhor dos dois atinge sempre pelo menos 4,58:1. Por isso, para qualquer fundo aleatório, o texto preto ou o branco cumpre o requisito, e a página mostra-lhe qual. Junto a 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, por isso nunca é sobrestimada, e atualiza-se quando 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 é retirada de forma independente, sem conhecimento das outras, por isso o gerador nunca constrói uma paleta no sentido do designer — sem pares complementares, sem sequências análogas, sem luminosidade partilhada. Um intervalo mais estreito muda o carácter de um lote, não essa regra: tons pastel ou uma sequência de azuis continuam a chegar um a um, sem nada que os ligue. É precisamente esse o objetivo: dá-lhe a cor que não teria escolhido, e é isso que quebra um hábito ou um bloqueio criativo. Para transformar um achado aleatório em algo útil, mantenha a cor de que gosta e construa a partir dela, em vez de clicar em Gerar até que um conjunto inteiro coincida por acaso. Mantenha a tonalidade fixa e ajuste a luminosidade para obter variantes mais claras e mais escuras, ou rode a tonalidade 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.
Porquê 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 de cada vez, cada uma numa amostra com um selo de contraste de texto
- Vivo, Pastel, Escuro, Suave e Escala de cinzentos, ou o seu próprio intervalo de tonalidade, saturação e luminosidade
- Sem repetições quando precisar, e HEX em maiúsculas ou sem #
- Clique num código para o copiar, ou mude qualquer cor no seletor de cores do seu navegador
- Copiar tudo, Guardar em ficheiro e um Histórico dos seus últimos 10 lotes, guardado no seu navegador
- Gratuito e ilimitado: sem registo, sem quota, nada é armazenado nos nossos servidores
As cores aleatórias mostram-se úteis em qualquer situação em que se precisa de uma cor antes de alguém ter escolhido uma. Os designers usam-nas para quebrar um bloqueio criativo e encontrar um ponto de partida que a sua paleta habitual nunca alcançaria. Os programadores preenchem maquetas, espaços reservados e avatares, atribuem a cada série num gráfico a 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 concebida — 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 orienta o teste para um desses extremos. Os artistas generativos e quem prototipa jogos introduzem os valores diretamente no código, onde a forma RGB se encaixa na maioria das bibliotecas gráficas. Os 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 num círculo cromático, e porque é 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 com qual escolher.
Vale a pena conhecer algumas limitações honestas. Este é um gerador, não uma ferramenta de paletas: não constrói harmonias de cor nem 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 um ecrã exibe — HEX, RGB e HSL — sem transparência e sem CMYK, Pantone, OKLCH ou cores CSS com nome; para impressão, ajuste a cor no seu processo de impressão em vez de confiar num código de ecrã. O mesmo código também pode parecer ligeiramente diferente de um ecrã para outro, porque os ecrãs não são calibrados da mesma forma. Os valores HSL são arredondados, como descrito acima, e a menos que Sem repetições esteja assinalado, 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 definiu, tem a mesma probabilidade a cada clique, retirada da fonte criptográfica do seu navegador e nunca enviada a lado nenhum.