Resumindo
- Uma paleta de gradientes é uma família pequena e nomeada de gradientes feita a partir de uma paleta de cores base e algumas regras comuns.
- A maioria das marcas precisa de quatro a seis gradientes: um principal, uma versão profunda, uma versão clara e discreta, um brilho radial, um de destaque e um calmo para texto.
- Os gradientes parecem uma família quando compartilham a cor de fundo, a direção, posições de parada consistentes e os mesmos passos de luminosidade.
- Guardar os gradientes como propriedades personalizadas CSS com nome mantém tudo idêntico no site, no app e nos arquivos de design.
- Uma paleta de gradientes deve ser testada em formatos reais com texto real antes de entrar no manual da marca.
Nesta página
Uma paleta de gradientes é uma família pequena e nomeada de gradientes construída a partir de uma paleta de cores e de algumas regras comuns, para que todo gradiente que a marca usa pareça parente dos outros. Comece com cinco ou seis cores base, dê a cada gradiente uma função (principal, profundo, discreto, brilho, destaque, texto) e fixe o que os torna irmãos: a mesma cor de fundo, o mesmo ângulo, posições de parada iguais e passos uniformes de luminosidade. Registre tudo como tokens e teste em designs reais antes que outras pessoas usem.
Por que uma marca precisa de mais de um gradiente
Um único gradiente acaba esticado para funções que não consegue cumprir. A mistura principal vibrante que fica ótima num post de lançamento é chamativa demais atrás de um parágrafo, escura demais para uma seção clara do site e movimentada demais para um slide cheio de números. A equipe improvisa, alguém escolhe um azul parecido, e em um ano a marca tem quinze gradientes que quase combinam. Uma paleta evita isso decidindo as variações com antecedência.
Uma pilha de gradientes
- Cada um feito à parte, para um design
- Ângulos diferentes em cada página
- Cores que quase batem com a marca
- Sem nome, então ninguém consegue pedir
- Copiados no olho de arquivos antigos
Uma paleta de gradientes
- Construída a partir de uma paleta base
- Uma direção, usada em tudo
- Códigos hex e posições de parada exatos
- Nomeados pela função: principal, profundo, discreto
- Guardados como tokens no código e nos arquivos
Comece por uma paleta de cores base
Todo gradiente da família deve ser feito só com essas cores, ou com tons mais claros e mais escuros delas. Se as cores da sua marca ainda não estão definidas, resolva isso antes com como escolher as cores da marca. Uma boa base tem um fundo escuro, dois ou três passos do matiz principal, um quase branco e um destaque de outro ponto do círculo cromático.
Dê uma função a cada gradiente
Nomeie os gradientes pelo que eles fazem, não pela aparência. “Principal” sobrevive a uma renovação de cores; “pôr do sol roxo” não. Seis funções cobrem quase toda marca.
Para que serve
Como se diferencia
Como se diferencia
Como se diferencia
Como se diferencia
Como se diferencia
Como se diferencia
As regras que transformam gradientes em família
- Um fundo. Todo gradiente escuro termina na mesma tinta, todo claro na mesma concha. O fundo é o que o olho usa para agrupá-los.
- Uma direção. Escolha um ângulo, 135 ou 160 graus, e mantenha. Ângulos misturados fazem a página parecer acidental. Ângulo do gradiente explica a escolha.
- Paradas iguais. Reutilize as mesmas posições (0, 45, 75 e 100 por cento, por exemplo) para que as transições tenham o mesmo ritmo. Paradas do gradiente trata do espaçamento.
- Passos de luminosidade uniformes. Cada cor de uma mistura deve ser um passo claro mais clara ou mais escura que a vizinha. Passos desiguais criam uma faixa clara no meio.
- Um destaque, racionado. A cor de destaque aparece em um único gradiente. Espalhada por todos, ela deixa de destacar.
- Uma interpolação fixa no código. Se o seu site mistura em oklch, todos os gradientes devem misturar assim, senão os mesmos códigos vão parecer diferentes entre seções.
Transforme a paleta de gradientes em tokens
Uma paleta que vive só num PDF é redigitada e se desvia. Guarde cada gradiente uma única vez como propriedade personalizada com nome e referencie em todo lugar. Os designers podem colar os mesmos valores nos seus arquivos, e uma renovação futura muda uma linha por gradiente. Design tokens trata da prática como um todo.
:root {
--ink: #14112b;
--plum: #4c1d95;
--violet: #7c3aed;
--orchid: #c084fc;
--shell: #faf5ff;
--ember: #f97316;
--gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
--gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
--gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
--gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
--gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
--gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}
.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }Teste em formatos reais
Amostras enganam. Um gradiente que parece equilibrado num quadradinho pode colocar a faixa mais clara bem atrás do título quando preenche um story de 1080×1920. Antes de publicar a paleta, faça três designs reais com texto real: um post vertical, um story e um hero de site. Confira se o gradiente de texto mantém os parágrafos legíveis, usando as verificações de contraste de cor e acessibilidade, e se o principal e o profundo parecem parentes lado a lado.
A função principal num post vertical de 1080×1350.
A mesma família num story de 1080×1920. Confira se a faixa mais clara continua livre do título no quadro mais alto.
Com o Gradiently Pro, o kit de marca guarda suas paletas de cores junto com o logo e as fontes, e o Designer as aplica quando monta novos designs. Se o seu gradiente principal deve ser o que as pessoas reconhecem, gradientes de marca explica como transformar um gradiente em assinatura.
Perguntas frequentes
O que é uma paleta de gradientes?
Um conjunto pequeno e nomeado de gradientes feito a partir de uma paleta de cores com regras comuns, para que pareçam uma família onde quer que apareçam.
Quantos gradientes uma marca deve ter?
De quatro a seis cobrem a maioria das necessidades: um principal, uma versão profunda e uma discreta, um brilho radial, um destaque e um calmo o bastante para texto. Marcas pequenas podem começar com três.
Como fazer gradientes parecerem da mesma família?
Use a mesma cor de fundo, o mesmo ângulo, as mesmas posições de parada e passos uniformes de luminosidade em todos os gradientes.
Como guardar os gradientes da marca para um site?
Defina as cores e cada gradiente uma única vez como propriedades personalizadas CSS e use esses nomes em todos os componentes.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil