Gerador de paletas em gradiente RGB
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.
Começar a usar
Gerador de paletas em gradiente RGB
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 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
#2563EB → #EC4899, 5 cores
#2563EB, #575CD7, #8956C2, #BA4FAE, #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 total inclui os dois extremos e é 10 por predefinição. A parte decimal é removida e o total fica limitado a 2–100. Os painéis permitem HEX, RGB, HSV e HSL, mas a interpolação usa sempre canais RGB codificados, arredondados a inteiros. A pré-visualização tem direção fixa de 90°. Não há pontos adicionais, alfa ou escolha do espaço de cor. A saída tem um HEX por linha, sem código CSS nem descarga de imagem.
O processamento é feito localmente no navegador.