# Gradientes vibrantes: códigos saturados que não tremem

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

A cor saturada é a forma mais rápida de ser notado e a mais rápida de cansar a vista. Estes códigos são vivos de propósito e construídos para que as arestas nunca tremam, com as razões, para fazeres os teus.

## The short version

- Um gradiente vibrante usa cores muito saturadas, mas só é confortável de olhar quando as cores vizinhas têm tons próximos e diferem claramente em luminosidade.
- Cores de tons opostos e luminosidade semelhante, lado a lado, parecem tremer, um efeito a que muitas vezes se chama vibração cromática.
- Opostos saturados misturados diretamente em sRGB passam por um meio acinzentado, o que a interpolação em oklch evita em grande parte.
- Um fundo escuro ou neutro dá ao olho um sítio onde descansar e faz a cor vibrante parecer mais brilhante do que sobre branco.
- O texto sobre um gradiente vibrante lê-se melhor em quase preto ou em branco, nunca noutra cor saturada de luminosidade semelhante.

Um **gradiente vibrante** é vivo e saturado sem tremer quando se cumprem duas regras: cada cor fica perto da vizinha no círculo cromático e cada passo muda claramente de luminosidade. Quebra a primeira e o meio fica turvo; quebra a segunda, pondo lado a lado tons opostos com o mesmo brilho, e a aresta parece tremer. Os doze códigos abaixo seguem as duas regras, por isso são ruidosos como um cartaz é ruidoso, não como uma enxaqueca.

## Doze códigos de gradientes vibrantes

- Manga: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Violeta elétrico: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Lagoa: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamingo: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Refresco de lima: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Cereja pop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Glaciar: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Rosa sobre a noite: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Brasa: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Subida de cobalto: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Coral a dourado, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Cada mistura atravessa tons vizinhos enquanto fica mais clara ou mais escura, e é isso que a mantém limpa. A última está escrita em oklch e precisa de um navegador atual.

## Porque é que alguns gradientes vivos vibram

Põe um vermelho saturado mesmo ao lado de um azul saturado de brilho semelhante e a fronteira parece cintilar, como se as duas cores não decidissem qual está à frente. Os designers chamam-lhe vibração cromática. É mais forte em arestas duras, em linhas finas e em texto colorido, e é por isso que o texto vermelho sobre fundo azul cansa tanto a leitura. As cores em si estão bem; o que a causa é a combinação de tons opostos com a mesma luminosidade, em contacto.

- Vibra: aresta dura, mesmo brilho: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Calmo: um degrau escuro no meio: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

O mesmo vermelho e o mesmo azul. À esquerda tocam-se com o mesmo brilho e a aresta cintila; à direita um degrau profundo separa-os e as duas cores parecem mais fortes.

Há duas soluções. Ou manténs as cores afastadas com um degrau mais escuro ou mais claro entre elas, como à direita, ou escolhes vizinhos em vez de opostos. [Cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) explica quando vale a pena o trabalho dos opostos.

## Regras para fazeres o teu gradiente vibrante

| Regra | Porquê | Exemplo |
| --- | --- | --- |
| Fica dentro de um terço do círculo | Os vizinhos misturam-se sem passar pelo cinzento | Índigo, violeta, magenta |
| Escalona a luminosidade | Dá profundidade e impede as arestas de tremer | De um `#1d4ed8` profundo a um `#38bdf8` vivo |
| Usa uma cor protagonista | Três cores igualmente ruidosas lutam entre si | O magenta é o pico; as outras apoiam-no |
| Acrescenta um fundo | Uma zona escura ou neutra deixa o olho descansar | Rosa sobre a noite, brasa |
| Mistura em oklch | Mantém o ponto médio saturado, não baço | Coral a dourado, oklch |

Cinco regras por trás de cada código acima. Quebra uma de propósito, nunca por acaso.

A lama é a outra forma de os gradientes vivos falharem. Mistura dois opostos saturados em sRGB simples e a cor a meio cai para o cinzento, o que se trata em [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) e, a um nível mais técnico, em [interpolação de gradientes](https://gradiently.design/pt-pt/guide/gradient-interpolation). A própria saturação é um botão, não um interruptor; [saturação no design](https://gradiently.design/pt-pt/guide/color-saturation) mostra como a regular.

## Gradientes vibrantes em CSS

Os navegadores modernos conseguem misturar num espaço de cor percetual se acrescentares `in oklch` ao gradiente. Isso mantém o meio de uma mistura larga tão vivo como as pontas. Dá primeiro aos navegadores mais antigos uma versão em hex.

```css
.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}
```

O gradiente Ultra com um recurso de três paragens e uma versão oklch de duas paragens que se mantém viva a meio sem paragem auxiliar.

## Onde os gradientes vibrantes funcionam melhor

A cor vibrante ganha atenção, por isso gasta-a onde a atenção é todo o trabalho: um feed a deslizar, uma miniatura entre vinte, um cartaz do outro lado da rua. Funciona menos onde as pessoas precisam de ler durante muito tempo, como documentos, dashboards e artigos longos, onde um campo saturado cansa a vista ao fim de poucos parágrafos. Aí, limita o gradiente vibrante a um cabeçalho ou a um único botão e deixa uma superfície calma levar o resto.

| Uso | Experimenta | Tamanho |
| --- | --- | --- |
| Publicação de saldos ou lançamento | Manga, Flamingo | 1080×1350 |
| Miniatura do YouTube | Violeta elétrico, Brasa | 1280×720 |
| Cabeçalho de aplicação ou produto | Lagoa, Glaciar | 1920×1080 |
| Capa de story ou Reel | Refresco de lima, Cereja pop | 1080×1920 |
| Capa de playlist | Rosa sobre a noite, Ultra | 1080×1080 |
| Cartaz A4 de evento | Ultra, Subida de cobalto | 2480×3508 |

Seis lugares onde os gradientes vibrantes mostram o seu valor, com códigos da grelha acima e o tamanho em que desenhar.

A impressão é o único sítio onde convém esperar um choque. As cores de ecrã mais vivas, sobretudo os azuis elétricos, os rosas fortes e os verdes ácidos, ficam fora do que as tintas CMYK reproduzem e voltam visivelmente mais baças no papel. [RGB vs CMYK](https://gradiently.design/pt-pt/guide/rgb-vs-cmyk) explica porquê; escolhe tu versões ligeiramente mais profundas e pede uma prova antes de uma tiragem.

## Palavras sobre um gradiente vibrante

Os fundos saturados variam de brilho de uma ponta à outra, por isso uma única cor de texto que se lê na ponta escura pode desaparecer na ponta clara. Usa só branco ou quase preto, põe o título onde o gradiente é mais profundo ou mais pálido e verifica o contraste no pior ponto, não na média. [Contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) tem os números a atingir.

Uma publicação vertical de saldos com texto em negrito sobre um fundo vivo e saturado

Um fundo ruidoso com texto simples e pesado. A cor faz a venda; as palavras só precisam de ser legíveis.

É aqui que um Mark do Gradiently ajuda com a cor viva: sabe onde estão as palavras, aprofunda ou aclara a cor junto às letras e a Tinta automática escolhe texto claro ou escuro por linha a partir da sua própria paleta. Um visual saturado mantém-se legível em todos os tamanhos, sem caixa nem sombra atrás do título. Para looks néon em concreto, vê [gradientes néon](https://gradiently.design/pt-pt/guide/neon-gradients); para o extremo oposto do botão, [gradientes subtis](https://gradiently.design/pt-pt/guide/subtle-gradients).

## FAQ

### O que faz um gradiente parecer vibrante?

Cores muito saturadas e próximas no círculo cromático, com uma mudança clara de luminosidade de uma ponta à outra.

### Porque é que algumas combinações de cores vivas doem a olhar?

Tons opostos de luminosidade semelhante, lado a lado, parecem tremer. Separa-os com um degrau mais escuro ou mais claro, ou escolhe cores vizinhas.

### Como evito que um gradiente vivo fique cinzento a meio?

Usa tons vizinhos, acrescenta uma paragem intermédia ou mistura em oklch com `linear-gradient(in oklch, ...)` nos navegadores que o suportam.

### Que cor de texto funciona sobre um gradiente vibrante?

Branco ou quase preto. Verifica o contraste no ponto mais claro e no mais escuro por trás das palavras, não só no meio.

### Qual é um bom gradiente vibrante para o cabeçalho de um site?

Experimenta `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` com texto branco.