Início / Ferramentas de Cor / Gerador de Gradiente CSS
Ferramentas online gratuitas

Gerador de Gradiente CSS

Crie uma rampa de cores reproduzível, pré-visualize cada passo gerado e copie a sequência HEX exata para CSS, gráficos ou design tokens. O processamento é fe…

Começar a usar

O que esta ferramenta o ajuda a fazer

Crie uma rampa de cores reproduzível, pré-visualize cada passo gerado e copie a sequência HEX exata para CSS, gráficos ou design tokens.

Exemplo prático

Entrada

#2563EB → #EC4899, 5 cores

Resultado

#2563EB, #584EC0, #8A39A2, #BB2585, #EC4899

Como o resultado é produzido

Cada cor intermédia é criada por interpolação linear dos canais vermelho, verde e azul. As extremidades são mantidas e as restantes cores são colocadas em intervalos iguais.

Fluxos de trabalho úteis

  • Criar cores ordenadas para gráficos ou rampas de mapas de calor
  • Construir cores de hover e de estado entre dois design tokens
  • Produzir uma paleta compacta para um gradiente de fundo

Limitações importantes

  • A interpolação RGB pode parecer mais escura ou turva entre algumas cores complementares.
  • Uma paleta de aspeto suave não é automaticamente acessível a daltónicos.
  • Este gerador produz cores RGB espaçadas uniformemente; não afirma uniformidade percetual.

Perguntas frequentes

Porque é que o ponto médio pode parecer cinzento ou turvo?

Canais RGB opostos podem tender para uma cor neutra. Adicione uma cor intermédia adequada num fluxo de trabalho CSS com várias paragens quando a vivacidade visual for importante.

Quantas cores devo gerar?

Use o menor número que corresponda aos estados distintos ou faixas de dados que precisa; fundos contínuos podem usar mais passos.

O processamento é feito localmente no navegador.