# Como criar uma paleta de gradientes para uma marca

[Canonical HTML page](https://gradiently.design/pt-pt/guide/gradient-palette)

Um bom gradiente é fácil. Seis que claramente pertencem juntos, cobrem todas as tarefas de uma marca e ficam bem lado a lado, isso já é um sistema. Aqui fica como o construir.

## The short version

- 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.

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](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors). 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.

- Tinta: #14112b
- Ameixa noturna: #2e1065
- Ameixa: #4c1d95
- Violeta: #7c3aed
- Orquídea: #c084fc
- Concha: #faf5ff
- Brasa: #f97316

Uma base de exemplo: um fundo escuro, quatro passos de violeta, um quase branco e um único acento quente. Todos os gradientes abaixo são construídos com estes sete códigos.

## 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.

| Função | Para que serve | Em que difere |
| --- | --- | --- |
| Principal | Lançamentos, capas, o momento de que as pessoas se lembram | Gama completa, de escuro a claro |
| Profundo | Secções escuras, slides, campanhas noturnas | Só as duas ou três cores mais escuras |
| Discreto | Páginas claras, documentos, leitura longa | Concha e o tom mais pálido, quase sem movimento |
| Brilho | Fotografias de produto e palavras isoladas | Radial, com luz num canto |
| Acento | Botões, etiquetas, um destaque por design | Matiz principal para a cor de acento |
| Texto | Atrás de parágrafos e legendas | Baixo contraste interno, alto contraste com o texto |

Seis funções para uma paleta de gradientes de marca. As marcas pequenas podem começar com principal, profundo e discreto.

- Principal: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Profundo: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Discreto: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Brilho: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Acento: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Texto: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

A família construída a partir da base acima. O mesmo fundo, o mesmo ângulo de 135 graus, as mesmas cores: podiam estar lado a lado numa página sem discutir.

## 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](https://gradiently.design/pt-pt/guide/gradient-angle) 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](https://gradiently.design/pt-pt/guide/gradient-stops) 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](https://gradiently.design/pt-pt/guide/design-tokens) trata da prática mais ampla.

```css
: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); }
```

A família inteira como propriedades CSS personalizadas. As cores são definidas uma vez e cada gradiente é construído a partir delas.

## 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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility), e que o principal e o profundo parecem aparentados lado a lado.

Uma publicação vertical de lançamento sobre um fundo de gradiente rico e de gama completa

A função principal numa publicação vertical de 1080×1350.

Um story vertical com o mesmo título sobre um fundo de gradiente aparentado da mesma família

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](https://gradiently.design/pt-pt/guide/brand-gradient-system) explica como transformar um gradiente numa assinatura.

## FAQ

### 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.