Gerador de paleta de cores e degradê
Monte paletas de cores e degradês que combinam e copie o CSS ou salve uma imagem
Carregando a ferramenta…
Monta esquemas de cores a partir de uma cor base, gera paletas aleatórias e cria degradês para copiar como CSS ou salvar como imagem PNG. Use para escolher as cores de um design, uma apresentação ou uma página web.
Como usar
- Em “Paleta”, escolha uma “Cor base” e um “Esquema”. Se gostar, pressione “Usar este esquema como paleta”.
- Pressione “Gerar (Espaço)” para novas cores; trave as que quiser manter e gere de novo.
- Leve as cores com “Copiar lista HEX”, “Copiar variáveis CSS” ou “Salvar como imagem” e pressione “Guardar paleta” para guardar uma para depois.
- Em “Degradê”, defina o “Tipo”, o “Ângulo” e os “Pontos de cor” e depois copie o código CSS ou pressione “Salvar PNG”.
Como funciona
- Os esquemas giram a matiz no círculo cromático HSL: complementar 180°, análogo ±30°, triádico 120°, complementar dividido 150° e 210°, quadrado em passos de 90°.
- Os níveis de contraste seguem a WCAG 2.2: AA exige 4,5:1, AAA 7:1 e texto grande 3:1.
- A “Simulação de visão de cores” é uma aproximação baseada em Machado et al. (2009). Ela muda só as cores na tela, não os valores copiados ou salvos.
- Até 40 paletas guardadas ficam armazenadas neste navegador, neste dispositivo.
Perguntas frequentes
- Como encontrar a cor complementar?
- É a cor diretamente oposta no círculo cromático, a 180°. Defina o “Esquema” como “Complementar” para vê-la e toque na amostra para copiar o valor HEX.
- Como fazer um degradê em CSS?
- Em “Degradê”, toque na barra para adicionar pontos e defina suas cores e posições. A caixa de CSS mostra o código, pronto para copiar.
- Por que as cores do meio do degradê ficam apagadas?
- Defina o “Espaço de interpolação” como OKLCH. As cores do meio ficam mais vivas, e o CSS também ganha uma linha alternativa para navegadores antigos.
- Como saber se um texto vai ficar legível sobre esta cor?
- Cada cor mostra a razão de contraste e o nível da cor de texto mais legível, branco ou preto. A razão é (L1 + 0,05) ÷ (L2 + 0,05), em que L1 e L2 são a luminância relativa da cor mais clara e da mais escura.