Gerador de cores
Sistema de paletas // v1.0
Intervalo: 1-10
Aguardando entrada...
O que é um gerador de cores aleatórias?
Um gerador de cores aleatórias escolhe uma cor — ou uma paleta coordenada — entre os milhões que uma tela pode mostrar e entrega os valores que você realmente usa no trabalho. O RandomHub devolve de 1 a 10 cores por clique, passa por cinco regras de teoria das cores (monocromática, análoga, complementar, triádica, tetrádica, além de aleatória pura) e ajusta o resultado para o tom que você escolher: pastel, vivo, suave, escuro, claro ou sem restrição. Cada cor vem com HEX, RGB e HSL prontos para copiar. Tudo acontece no navegador — sem cadastro, sem upload, sem logs.
Para quem é este gerador?
Designers de UI e produto
Sair do ciclo das mesmas seis cores de marca quando precisa explorar um clima rápido antes da review com stakeholders. Pastel-análoga para app de meditação, vivo-triádica para produto infantil, escuro-tetrádica para uma ferramenta dev.
Designers de identidade
Passar por dezenas de combinações complementares e tetrádicas na fase de busca larga de um brand sprint. Quebra a inércia do "sempre acabo no azul-marinho".
Desenvolvedores front-end
Três cores placeholder para uma demo CSS ou para o Tailwind config? Um clique, copia o HEX, segue — sem abrir Figma.
Ilustradores e pintores digitais
Gerar uma paleta restrita para um exercício com cores impostas. Cinco análogas suaves obrigam a compor pelo contraste de valor em vez de matiz.
Profissionais de visualização de dados
Triádica e tetrádica dão matizes matematicamente distintos para codificação de categorias. Em cima, os tons — vivo para destaque, suave para camadas de contexto.
Estudantes e docentes de design
Ver as regras de harmonia rodando ao vivo. Gera uma triádica, depois uma tetrádica, depois uma monocromática — e percebe como a mesma cor base muda completamente de sensação.
Por que este gerador
Cinco regras de harmonia de verdade
Não "cinco cores aleatórias que não brigam". Monocromática, análoga, complementar, triádica e tetrádica — cada uma calculada a partir de uma cor base com a matemática que escolas de design realmente ensinam.
Tons alinhados com briefs reais
Pastel para wellness e educação. Vivo para esporte e público jovem. Suave para editorial e finanças. Escuro para tech e luxo. Claro para saúde e SaaS. Você escolhe o clima e a saída cai no bairro certo.
HEX, RGB e HSL juntos
Um botão de cópia por formato em cada linha. HSL é o mais prático para ajustar saturação no CSS, HEX para passar adiante, RGB para código. O formato segue o destino da cor.
Só no navegador, nada registrado
A página gera localmente com matemática HSL. Não salvamos paletas, não pedimos e-mail, não há plano premium. Quem chega vê sempre a mesma ferramenta.
Cenários comuns com exemplos
Mood board para app de wellness
Você precisa de paleta para um app de meditação. Cores agudas soariam erradas. Puxa 5 cores em harmonia análoga e tom pastel — verdes e azuis macios que se fundem.
Configuração: 5 cores, Análoga, Pastel. Resultado típico: #C8E1D2, #B6D8C7, #A4CFBC, #92C6B1, #80BDA6 — um conjunto coerente de verdes de baixa saturação que entra em frames do Figma em menos de um minuto.
Rebrand de energético
Terceira semana de brand sprint e o time continua orbitando vermelho e amarelo. Puxa 4 cores em harmonia triádica e tom vivo para empurrar para outro território.
Configuração: 4 cores, Triádica, Vivo. Três matizes a 120° com saturação alta — a busca pula do vermelho-amarelo para combinações magenta-ciano-âmbar que o time ainda não tinha tentado.
Protótipo em Tailwind CSS
Você quer cores de destaque para uma página demo em modo claro. Três cores claras, pouco saturadas, copia os HEX direto no config e segue construindo.
Configuração: 3 cores, Aleatória, Claro. Saída típica: #E8DCD0, #D4E0DD, #DCD8E8. No tailwind.config como accent-50, accent-100, accent-200 — a página fica pronta para demo.
Exercício de paleta restrita
Pintores e ilustradores crescem com limites impostos. Gera 5 cores suaves e refaz a mesma natureza-morta usando só essas.
Configuração: 5 cores, Aleatória, Suave. Cada cor com cerca de 30 % de saturação e luminosidade média — um conjunto empoeirado e harmônico que obriga a compor por valor em vez de matiz.
Como usar
- 1.
Definir a quantidade
De 1 a 10. Cinco é um padrão útil — variedade suficiente para compor, número pequeno o bastante para guardar de cabeça.
- 2.
Escolher a regra de harmonia
Aleatória para explorar. Análoga para proximidade. Complementar para pares de alto contraste. Triádica e tetrádica para paletas de categorias. Monocromática para estudos de valor.
- 3.
Escolher o tom
Pastel, vivo, suave, escuro, claro ou "qualquer". Cada preset estreita as faixas de saturação e luminosidade para a paleta cair num clima específico.
- 4.
Gerar e copiar
Botão Gerar ou Enter. Cada cor exibe HEX, RGB e HSL com botões próprios. "Copiar tudo" leva a paleta inteira como texto multilinha — perfeito para colar em Figma, código ou notas.
Perguntas frequentes
As paletas são realmente aleatórias ou tiradas de uma lista fixa?
Aleatórias. A ferramenta sorteia um matiz base (0–360°) por paleta, aplica a regra de harmonia e amostra saturação e luminosidade dentro da faixa do tom escolhido. Duas execuções com a mesma configuração devolvem paletas diferentes — a estrutura harmônica continua, os valores variam.
Qual a diferença entre as cinco regras de harmonia?
Monocromática: um único matiz, variando luminosidade. Análoga: vizinhos no círculo cromático (cerca de ±25°). Complementar: matizes opostos a 180°. Triádica: três matizes a 120° de distância. Tetrádica: quatro matizes a 90°. A mesma cor base, mas a sensação muda completamente conforme a regra.
Como funcionam os tons na prática?
Cada preset limita saturação (S) e luminosidade (L). Pastel: S 25–55 %, L 78–92 %. Vivo: S 85–100 %, L 42–58 %. Suave: S 15–40 %, L 40–60 %. Escuro: S 40–95 %, L 12–32 %. Claro: S 30–70 %, L 70–88 %.
Dá para salvar ou compartilhar uma paleta que gostei?
Use "Copiar tudo" para levar a paleta como texto puro (HEX · RGB · HSL por linha). Cole no Figma, em notas, num doc, num thread do Slack. Não existe salvamento atrelado a conta — proposital: nada sai do navegador.
Por que HSL junto com HEX e RGB?
HSL separa matiz, saturação e luminosidade em três valores independentes, então é o formato mais cômodo para ajustes do tipo "+10 % de saturação" ou "matiz +30°" em CSS e em ferramentas de design. HEX é mais curto para entrega. RGB é o que mais se aproxima de como a tela realmente desenha a cor.
Posso usar essas paletas em trabalho comercial?
Pode. Valores de cor não têm direito autoral. Use qualquer paleta gerada em projetos comerciais, materiais de marca, trabalho remunerado para cliente, produtos que você vende. Sem atribuição.
No que isso difere de Coolors ou Adobe Color?
Coolors e Adobe Color são serviços maduros, com bibliotecas salvas, geração de gradientes, extração a partir de imagem e comunidade. O RandomHub faz uma coisa só: gerar paletas aleatórias guiadas por regras, rápido, entregando HEX / RGB / HSL — sem cadastro, sem biblioteca, sem upsell.
Por que o máximo é 10?
Acima de sete ou oito cores a maior parte das regras de harmonia começa a devolver resultados visualmente parecidos — o olho deixa de ler o conjunto como paleta. Dez é um teto generoso que ainda mantém cada resultado significativo.
Sobre paletas aleatórias em design
Designers usam aleatoriedade como entrada criativa desde que a disciplina existe. O exercício da Bauhaus — "ponha três cores lado a lado e force a relação a funcionar" — é exatamente o mesmo mecanismo: restrição e surpresa empurrando o cérebro além do primeiro reflexo. O que mudou com as telas é que as regras de harmonia podem ser calculadas em instantes: uma paleta triádica que levava meia hora com a roda Munsell em 1965 leva um clique em 2026. A velocidade é o ponto. A primeira paleta gerada quase nunca é a que vai para produção; o valor está em rodar vinte em cinco minutos e perceber qual combinação fecha. O RandomHub aposta em três decisões: as regras ancoram a matemática em teoria das cores real em vez de "cinco cores aleatórias", os tons correspondem a briefs concretos em vez de categorias soltas, e HSL / HEX / RGB saem juntos para você nunca precisar converter à mão. Se uma regra ou um tom que você usa todo dia está faltando, isso é um sinal — manda um e-mail.
Ferramentas relacionadas
Ferramentas relacionadas
Continue com ferramentas para aulas, jogos, escrita, planejamento e decisões rápidas.