Gerador de Cores Aleatórias

Gere uma paleta de cores aleatórias com valores HEX, RGB, HSL e OKLCH. Trave as que gostar e gere novamente as demais.

Estúdio · ambiente neutro
6

Funcionalidades

Gera de 6 a 12 cores
Valores HEX, RGB e HSL
Copiar com um clique
Bloquear cores

Como Usar

1. Pressione Espaço (ou Gerar) para preencher a superfície com cores aleatórias.

2. Trave as que gostar — os blocos travados sobrevivem ao próximo sorteio. Clique em qualquer bloco para copiar o valor.

3. Alterne o formato do valor (HEX / RGB / HSL / OKLCH) na barra ou copie o conjunto inteiro de uma vez.

Sobre esta ferramenta

Às vezes o jeito mais rápido de encontrar uma direção de cor é deixar o acaso sugerir uma. Este gerador preenche o palco com 3 a 12 cores aleatórias tiradas do gerador de números aleatórios criptograficamente seguro do navegador e mostra cada uma em HEX, RGB, HSL ou OKLCH, com um nome aproximado da cor. Pressione Espaço ou Gerar para sortear de novo; trave qualquer bloco de que gostar e ele continua na próxima rodada, para você montar um conjunto passo a passo. Clique num bloco para copiar o valor, ou copie o conjunto inteiro de uma vez. Cores aleatórias são ótimas para inspiração, dados de teste, fundos de avatar e gráficos provisórios, mas, para uma paleta de marca ou de interface, refine a harmonia e verifique o contraste do texto antes de usá-las.

Perguntas Frequentes

Como as cores aleatórias são geradas?
Os valores vêm de crypto.getRandomValues, a fonte aleatória segura do navegador, então cada uma das 16,7 milhões de cores RGB de 24 bits tem a mesma chance, e os resultados não se repetem num padrão previsível.
Como funcionam as cores travadas?
Travar um bloco mantém a cor dele quando você gera de novo, enquanto os blocos destravados recebem novas cores aleatórias. Assim você guarda as cores de que gosta e continua sorteando o resto.
Qual formato de valor devo copiar?
HEX é o mais aceito em ferramentas de design e no CSS. HSL é mais fácil de ajustar à mão, e OKLCH é útil quando você quer ajustar a luminosidade de forma consistente entre cores no CSS moderno.
Cores aleatórias podem formar uma paleta acessível?
Sozinhas, não. Pares aleatórios costumam ter pouco contraste. Use-os como ponto de partida e verifique qualquer combinação de texto e fundo num verificador de contraste segundo a WCAG AA.
Como consigo cores aleatórias mais suaves ou mais vivas?
Aqui todo valor RGB tem a mesma chance, então os resultados vão de apagados a vivos. Copie uma cor de que gostar para o Conversor de cores e diminua a saturação para tons mais suaves ou aumente para tons mais vivos, ou use o Gerador de paletas para criar um conjunto harmônico a partir dela.

Ferramentas Relacionadas