# Como criar uma paleta de gradientes para uma marca

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

Um bom gradiente é fácil. Seis que claramente pertencem à mesma família, cobrem todas as necessidades de uma marca e ainda ficam bem lado a lado formam um sistema. Veja como construí-lo.

## The short version

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

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](https://gradiently.design/pt-br/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 destaque de outro ponto do círculo cromático.

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

Um exemplo de base: um fundo escuro, quatro passos de violeta, um quase branco e um único destaque quente. Todo gradiente abaixo é feito com estes sete códigos.

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

| Função | Para que serve | Como se diferencia |
| --- | --- | --- |
| Principal | Lançamentos, capas, o momento de que as pessoas lembram | Faixa completa, do escuro ao claro |
| Profundo | Seçõ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 | Fotos de produto e palavras isoladas | Radial, claro em um canto |
| Destaque | Botões, selos, um realce por design | Matiz principal até a cor de destaque |
| Texto | Atrás de parágrafos e legendas | Pouco contraste interno, muito contraste com o texto |

Seis funções para a paleta de gradientes de uma marca. 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%)`
- Destaque: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Texto: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

A família construída com a base acima. Mesmo fundo, mesmo ângulo de 135 graus, mesmas cores: poderiam ficar lado a lado numa página sem brigar.

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

```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 personalizadas CSS. As cores são definidas uma vez, e cada gradiente é construído a partir delas.

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

Um post vertical de lançamento sobre um fundo em gradiente rico, de faixa completa

A função principal num post vertical de 1080×1350.

Um story vertical com o mesmo título sobre um fundo em gradiente parente, da mesma família

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

## FAQ

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