Gerador de Cores e CSS Online

Escolher as cores certas é metade do trabalho de qualquer projeto visual. Este gerador de cores e CSS online reúne seletor de cores com conversão HEX/RGB/HSL, gerador de paletas harmônicas, verificador de contraste para acessibilidade, gerador de gradientes CSS e criador de efeitos hover — tudo pronto para copiar e colar no seu código.

Depois de definir suas cores, use nossa ferramenta de texto e código para formatar seu CSS, ou confira a calculadora multifuncional online para outros cálculos do dia a dia.

Como usar o gerador de cores e CSS

Seletor de cores

Escolha uma cor no seletor da primeira aba e veja instantaneamente seus valores em HEX, RGB e HSL — prontos para copiar no seu CSS, Figma ou qualquer editor de design.

Gerador de paleta

Escolha uma cor base na aba "Paleta" e clique em "Gerar Paleta" para criar cinco variações de luminosidade dessa cor, ideais para compor esquemas de cores harmônicos em um site ou aplicativo.

Verificador de contraste

Selecione a cor do texto e do fundo na aba "Contraste" para calcular a razão de contraste segundo as diretrizes WCAG de acessibilidade, e veja se a combinação está adequada para leitura.

Gerador de gradiente CSS

Escolha duas cores e o ângulo desejado na aba "Gradiente" para gerar automaticamente o código CSS de um gradiente linear, com pré-visualização em tempo real.

Efeitos hover em CSS

Na última aba, escolha um estilo de efeito (escala, sombra, mudança de cor ou borda animada), veja o resultado no botão de exemplo e copie o código CSS pronto para usar.

Perguntas frequentes

Os códigos gerados funcionam em qualquer navegador?
Sim, todo o CSS gerado usa propriedades padrão amplamente suportadas por navegadores modernos como Chrome, Firefox, Safari e Edge.

Como funciona o cálculo de contraste?
Usamos a fórmula oficial de luminância relativa do WCAG 2.1, a mesma usada por ferramentas profissionais de acessibilidade.

Posso usar as cores geradas comercialmente?
Sim, cores e códigos CSS não têm direitos autorais — você pode usá-los livremente em qualquer projeto, pessoal ou comercial.

A ferramenta salva minhas paletas?
Não, tudo é gerado em tempo real no navegador. Recomendamos copiar os códigos que você quiser guardar.

Funciona no celular?
Sim, o seletor de cores usa o input nativo do sistema, funcionando tanto em Android quanto em iOS.

Confira também o gerador de senhas seguras e a central de jogos online para uma pausa entre um projeto e outro.