O que esta ferramenta faz
Por que usar um gerador aleatório
Modo de paleta e roda de cores
Bloquear, substituir e alterar o número de cores
Sincronizar o fundo da página
Copiar código e baixar arquivos
Prévia da interface ao vivo
Recursos explicados
Paletas aleatórias de 2 a 10 cores
Gerar cores aleatórias ou pressionar a barra de espaço cria uma nova paleta. É uma forma rápida de explorar. As cores são totalmente aleatórias, então algumas combinações podem não funcionar bem.
Bloquear e substituir cores individuais
Bloqueie uma cor para mantê-la na próxima geração. Use o ícone de atualização para mudar somente uma amostra e montar a paleta gradualmente.
Valores HEX, RGB e HSL
Clique em um valor no cartão para copiá-lo. O cartão mostra matiz e saturação para HSL; o valor HSL copiado também inclui luminosidade.
Visualização da roda de cores
Mostra a posição de cada cor por matiz e saturação. Ajuda a perceber se as cores estão agrupadas ou espalhadas pela roda.
Trechos de código em quatro formatos
Variáveis CSS, objeto de cores Tailwind, array React e constantes Flutter/Dart. O trecho Tailwind é apenas um fragmento para inserir na sua configuração, não um arquivo completo.
Download SVG e cópia JSON
O SVG é uma faixa simples de amostras com rótulos HEX. O JSON contém os dados completos de cada cor: HEX, RGB, HSL e estado de bloqueio.
Sincronização do fundo e prévia da interface
Duas formas rápidas de ver a paleta em contexto: no fundo da página inteira e em uma maquete com botão, cartão e selo.
Para que você pode usar esta ferramenta?
Começar um novo design
Gere paletas até encontrar uma cor adequada, bloqueie-a e construa as demais cores ao redor dela.
Configurar folha de estilos ou tema
Copie as cores como variáveis CSS ou trecho Tailwind e cole-as diretamente no projeto.
Projetos Flutter e React
Obtenha constantes Dart Color ou um array JavaScript de valores HEX sem conversão manual.
Compartilhar uma paleta com um designer
Baixe a faixa SVG ou copie o JSON para compartilhar as cores e seus códigos HEX.
Ensino e prática
Use a roda para observar a relação entre matiz, saturação e posição, e compare cores aleatórias visualmente.
Informações da ferramenta
| Tipo de ferramenta | Gerador de paleta de cores aleatórias |
|---|---|
| Quantidade de cores | 2 a 10 (começa com 6) |
| Valores exibidos | HEX, RGB, HSL |
| Roda de cores | Sim, somente matiz e saturação |
| Trechos de código | Variáveis CSS, Tailwind, array React, Flutter/Dart |
| Download de arquivo | SVG (palette.svg) |
| Cópia de dados | JSON |
| Atalho de teclado | Barra de espaço gera uma nova paleta |
| Salvamento da paleta | Não; a paleta é perdida ao recarregar a página |
| Verificação de contraste | Não |
| Envio de arquivo | Nenhum; não há arquivo de entrada |
| Processamento | No navegador |
Benefícios
- Gere e copie cores sem enviar nada.
- O atalho da barra de espaço facilita experimentar várias paletas.
- Bloquear e substituir uma cor permite refinar a paleta sem recomeçar.
- O código em quatro formatos está pronto para copiar.
Limitações
- As cores são totalmente aleatórias. A ferramenta não aplica regras de harmonia e algumas combinações podem destoar.
- As paletas não são salvas. Ao recarregar ou fechar a página, a paleta atual é perdida; copie ou baixe o que quiser guardar.
- A ferramenta não verifica contraste nem acessibilidade. A prévia é somente visual.
- O único download é SVG; não há downloads de amostras PNG, PDF ou Adobe.
- A cópia JSON usa o formato de dados próprio da ferramenta, não é um arquivo de tokens Figma pronto.
- O atalho de espaço não está disponível em telas sensíveis ao toque sem teclado; use o botão.
- A roda mostra somente matiz e saturação, não luminosidade.
Como a ferramenta trata seus dados
A ferramenta gera cores, desenha a roda, cria trechos de código e monta o arquivo SVG no navegador. Não há envio de arquivos, e o próprio código da ferramenta não envia a paleta a um servidor. A cópia usa a área de transferência do navegador.
Privacidade
A ferramenta também não salva suas paletas no navegador. Esta declaração abrange a própria ferramenta, não outros scripts que o restante do site possa carregar.
Dicas
- Bloqueie primeiro a cor principal e gere outras paletas para encontrar cores de destaque.
- Ative a sincronização do fundo para ver a primeira cor em tamanho real.
- Aumente para 10 cores para explorar e reduza a quantidade ao encontrar algumas opções boas.
- Copie a paleta antes de recarregar a página, pois ela não é salva.
- Antes de usar uma paleta em textos, confira o contraste com uma ferramenta específica.
Perguntas frequentes
Preciso de uma conta para usar a ferramenta?
Não. A ferramenta não exige login. Abra a página e comece a gerar cores.
As cores são realmente aleatórias?
Sim. Cada cor é escolhida aleatoriamente entre todos os valores HEX. A ferramenta não segue regras de harmonia; algumas paletas ficam boas e outras não.
Quantas cores posso gerar?
De 2 a 10 por vez. Uma paleta nova começa com 6 cores.
Como mantenho uma cor de que gostei?
Clique no cadeado do cartão. Cores bloqueadas permanecem ao gerar outra paleta. O ícone de atualização substitui somente aquela cor.
Quais formatos posso copiar?
Cores individuais podem ser copiadas como HEX, RGB ou HSL. A paleta inteira pode ser copiada como variáveis CSS, trecho Tailwind, array React ou constantes Flutter/Dart. Também pode ser copiada como JSON.
Posso baixar a paleta como arquivo?
Sim, como SVG chamado palette.svg. Ele mostra uma amostra por cor e seu código HEX. Não há downloads de amostras PNG, PDF ou Adobe.
A ferramenta verifica contraste de texto ou acessibilidade?
Não. A prévia na parte inferior é apenas visual. Use uma ferramenta de contraste antes de escolher cores de texto e fundo.
Minha paleta é salva se eu recarregar a página?
Não. A paleta não é armazenada. Copie os códigos ou baixe o SVG antes de sair da página.
A ferramenta funciona no celular?
O botão Gerar cores aleatórias, os cadeados e os botões de cópia funcionam por toque. O atalho da barra de espaço requer um teclado.