Criador de Paleta de Gradiente | CSS e cores intermediárias de uma vez
Escolha de 2 a 5 cores e gere ao mesmo tempo um gradiente suave e uma paleta de cores em etapas. Alterne entre linear e radial, ajuste o ângulo de 0 a 360 graus, defina de 3 a 24 etapas e copie tanto o CSS linear-gradient() quanto uma lista de códigos HEX.
💡 Sobre esta ferramenta
Descobrir na mão qual cor fica exatamente entre dois tons é demorado e costuma resultar num meio sem graça. Aqui, um único conjunto de cores produz duas saídas: a string CSS pronta para colar numa folha de estilo e uma grade de amostras interpoladas que você pega uma a uma. Ao clicar em qualquer amostra, o valor HEX vai para a área de transferência, o que evita redigitar #A952A4 à mão num painel de design.
O controle de etapas é o mais subaproveitado. Precisa de uma escala de interface com 5 níveis entre duas cores de destaque? Use 5 etapas. Quer uma legenda de mapa de calor com 24 paradas? Aumente o controle. Os modos linear e radial compartilham os mesmos pontos de cor, então você fixa uma paleta e compara uma varredura tipo banner com um brilho radial sem reescolher nada.
🧐 Perguntas frequentes
O CSS já pode ser usado direto?
Sim. Ele sai como background: linear-gradient(90deg, #ec1380 0%, #00f0ff 100%); e cola direto numa propriedade background. Ao escolher radial, gera radial-gradient(circle, ...).
O que exatamente o controle de etapas muda? Define quantas amostras aparecem na paleta e na lista HEX. Em 3 você tem início, meio e fim; em 24, uma rampa tonal fina. Ele não altera o gradiente CSS, que sempre usa como paradas as 2 a 5 cores que você inseriu.
Por que os tons do meio às vezes parecem lavados? É o resultado clássico de interpolar no espaço RGB: misturar um rosa e um ciano saturados passa por um centro de baixa saturação. Para meios mais vivos, adicione uma terceira cor no centro em vez de confiar numa mistura de duas.
Posso usar isto para escalas de cor do Tailwind ou SCSS?
A lista HEX dá os valores brutos; cole-os no seu theme.extend.colors ou num mapa SCSS. A ferramenta entrega valores, não a sintaxe de um framework específico.
📚 Curiosidades
O motivo de uma mistura magenta-ciano puxar para o cinza no meio é que a interpolação RGB segue uma linha reta através de um cubo de cor, e essa linha passa perto do centro de baixa saturação. Espaços perceptuais como o OKLCH foram criados justamente para evitar isso, mantendo a luminosidade e o croma estáveis enquanto o matiz gira. Para um fundo CSS ou uma escala de tons de interface, o passo RGB é previsível e suficiente; em visualização de dados, onde cada etapa precisa ser lida como igualmente distinta, esse mergulho no cinza é o problema que a ciência das cores tenta eliminar.