A versão curta
- Uma paleta de gradientes é uma pequena família nomeada de gradientes feita a partir de uma paleta de cores base e de algumas regras partilhadas.
- 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 acento e um calmo para texto.
- Os gradientes leem-se como uma família quando partilham uma cor de fundo, uma direção, posições de paragem consistentes e os mesmos passos de luminosidade.
- Guardar gradientes como propriedades CSS personalizadas com nome mantém-nos idênticos num site, numa app e em ficheiros de design.
- Uma paleta de gradientes deve ser testada em formatos reais com palavras reais antes de ser escrita nas diretrizes da marca.
Nesta página
Uma paleta de gradientes é uma pequena família nomeada de gradientes, feita a partir de uma paleta de cores e de um punhado de regras partilhadas, para que todos os gradientes que uma marca usa pareçam aparentados. Começa com cinco ou seis cores base, dá a cada gradiente uma função (principal, profundo, discreto, brilho, acento, texto) e depois fixa o que os torna irmãos: o mesmo fundo, o mesmo ângulo, posições de paragem iguais e passos de luminosidade uniformes. Escreve-os como tokens e testa-os em designs reais antes de mais alguém os usar.
Porque é que uma marca precisa de mais do que um gradiente
Um único gradiente é esticado para tarefas que não consegue fazer. A mistura brilhante do principal, que fica ótima numa publicação de lançamento, é ruidosa de mais atrás de um parágrafo, escura de mais para uma secção clara do site e confusa de mais para um slide cheio de números. As equipas acabam a improvisar, alguém escolhe um azul parecido e, em um ano, a marca tem quinze gradientes que quase condizem. Uma paleta evita isso ao decidir as variações de antemão.
Um monte de gradientes
- Cada um feito à parte, para um só design
- Ângulos diferentes em cada página
- Cores que quase condizem com a marca
- Sem nome, por isso ninguém consegue pedir um
- Copiados à vista de ficheiros antigos
Uma paleta de gradientes
- Criada a partir de uma paleta base
- Uma só direção, usada em todo o lado
- Códigos hexadecimais e posições de paragem exatos
- Nomeados pela função: principal, profundo, discreto
- Guardados como tokens no código e nos ficheiros
Começa por uma paleta de cores base
Todos os gradientes da família devem ser feitos só com estas cores, ou com tons mais claros e mais escuros delas. Se as cores da tua marca ainda não estão assentes, resolve isso primeiro 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 acento de outra zona da roda.
Dá a cada gradiente uma função
Nomeia os gradientes pelo que fazem, não pelo que parecem. “Principal” sobrevive a uma renovação de cor; “pôr do sol roxo” não. Seis funções cobrem quase todas as marcas.
Para que serve
Em que difere
Em que difere
Em que difere
Em que difere
Em que difere
Em que difere
As regras que fazem dos gradientes uma família
- Um só fundo. Todos os gradientes escuros acabam na mesma tinta, todos os claros na mesma concha. O fundo é o que o olho usa para os agrupar.
- Uma só direção. Escolhe um ângulo, 135 graus ou 160 graus, e mantém-no. Ângulos misturados fazem uma página parecer acidental. Ângulo do gradiente explica a escolha.
- Paragens iguais. Reutiliza as mesmas posições (0, 45, 75 e 100 por cento, por exemplo) para as transições terem o mesmo ritmo. Paragens de gradientes trata do espaçamento.
- Passos de luminosidade uniformes. Cada cor de uma mistura deve ser um passo claramente mais clara ou mais escura do que a vizinha. Passos desiguais dão uma faixa brilhante no meio.
- Um acento, racionado. A cor de acento aparece num só gradiente. Espalhada por todos, deixa de ser um acento.
- Uma interpolação fixa no código. Se o teu site mistura em oklch, todos os gradientes devem fazê-lo, ou os mesmos códigos parecerão diferentes entre secções.
Transforma a paleta de gradientes em tokens
Uma paleta que vive só num PDF é reescrita e desvia-se. Guarda cada gradiente uma só vez como propriedade personalizada com nome e refere-o em todo o lado. Os designers podem colar os mesmos valores nos seus ficheiros, e uma renovação futura muda uma linha por gradiente. Tokens de design trata da prática mais ampla.
: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); }Testa-a em formatos reais
As amostras mentem. Um gradiente que parece equilibrado como pequeno quadrado pode pôr a faixa mais brilhante mesmo atrás de um título quando preenche um story de 1080×1920. Antes de publicares a paleta, faz três designs reais com palavras reais: uma publicação vertical, um story e um hero de site. Confirma que o gradiente de texto mantém os parágrafos legíveis, com as verificações de contraste de contraste de cor e acessibilidade, e que o principal e o profundo parecem aparentados lado a lado.
A função principal numa publicação vertical de 1080×1350.
A mesma família num story de 1080×1920. Confirma que a faixa mais brilhante continua a libertar o título no enquadramento mais alto.
Com o Gradiently Pro, o kit de marca guarda as tuas paletas de cores junto com o logótipo e as fontes, e o Designer aplica-as ao compor novos designs. Se o teu gradiente principal é aquilo por que as pessoas te reconhecem, gradientes de marca explica como transformar um gradiente numa assinatura.
Perguntas frequentes
O que é uma paleta de gradientes?
Um pequeno conjunto nomeado de gradientes feito a partir de uma paleta de cores com regras partilhadas, para que pareçam uma família onde quer que apareçam.
Quantos gradientes deve ter uma marca?
Quatro a seis cobrem a maioria das necessidades: um principal, um profundo e um discreto, um brilho radial, um acento e um calmo o bastante para texto. As marcas pequenas podem começar com três.
Como faço para os gradientes parecerem pertencer juntos?
Usa a mesma cor de fundo, o mesmo ângulo, as mesmas posições de paragem e passos de luminosidade uniformes em todos os gradientes.
Como devo guardar os gradientes de marca para um website?
Define as cores e cada gradiente uma só vez como propriedades CSS personalizadas e depois refere esses nomes em todos os componentes.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil