# Gradientes vermelhos: energia sem soar o alarme

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

O vermelho chama a atenção mais depressa do que qualquer outra cor, e é exatamente por isso que corre mal. Como construir gradientes vermelhos que parecem vivos, quentes e confiantes em vez de ruidosos.

## The short version

- Um gradiente vermelho é uma transição construída à volta de tons de vermelho como carmesim, escarlate, sangue de boi ou coral, usada em designs que precisam de calor e urgência.
- Os gradientes vermelhos ficam melhor quando só uma paragem está totalmente saturada e as outras avançam para um vinho mais profundo ou para um laranja e um rosa mais quentes.
- O #ff0000 puro com texto branco tem um rácio de contraste de 4:1, abaixo do mínimo de 4,5:1 para texto corrido normal.
- Manter o vermelho junto dos seus vizinhos quentes, em vez de azul saturado, evita a cintilação e o alarme que tornam os designs vermelhos agressivos.
- Os vermelhos profundos como o sangue de boi e o vinho leem-se como premium e calmos, enquanto o escarlate vivo e o coral se leem como enérgicos e brincalhões.

Um **gradiente vermelho** é uma transição construída à volta do vermelho, do escarlate vivo e do carmesim ao sangue de boi profundo e ao coral suave, e é o gradiente mais enérgico que podes pôr num ecrã. O segredo para o usar bem é a contenção: deixa uma paragem levar a saturação máxima, faz as restantes avançar para um vinho mais profundo ou para um laranja e um rosa mais quentes, e mantém o vermelho longe dos sítios onde as pessoas esperam avisos. Feito assim, o vermelho lê-se como calor e apetite e não como uma mensagem de erro.

Abaixo encontras três paletas de vermelhos, nove códigos de gradientes vermelhos para copiar, os números de contraste para texto sobre vermelho e onde o vermelho funciona melhor. Para saberes como as cores ganham significado, vê a [psicologia das cores](https://gradiently.design/pt-pt/guide/color-psychology).

## Porque é que o vermelho é mais difícil do que parece

O vermelho é ruidoso por várias razões ao mesmo tempo. O vermelho de ecrã atinge uma saturação muito alta, por isso domina tudo o que está ao lado. As interfaces ensinaram as pessoas a lê-lo como perigo: estados de erro, botões de apagar, bateria fraca e indicadores de não lidos são quase sempre vermelhos. E o vermelho vivo mesmo ao lado de azul saturado pode parecer tremeluzir ou ficar a outra profundidade, um efeito chamado cromoestereopsia, que torna cansativo ler texto nessa combinação.

### Lê-se como alarme

- `#ff0000` liso a preencher a tela inteira
- Texto ou contornos vermelhos numa página branca sem outra cor quente
- Vermelho encostado diretamente a azul saturado
- Vermelho usado tanto na marca como nas mensagens de erro

### Lê-se como energia

- Uma paragem de vermelho vivo a cair num vinho ou sangue de boi profundo
- Vermelho misturado com os seus vizinhos quentes, laranja e rosa
- Vermelho sobre um fundo escuro e quente, com um branco-sujo suave para o texto
- Uma cor à parte, claramente diferente, reservada para os erros

## Três paletas de vermelho: carmesim, sangue de boi e coral

A maioria dos gradientes vermelhos bem-sucedidos vem de uma de três famílias. O carmesim inclina-se ligeiramente para o azul e parece ousado e clássico. O sangue de boi e o vinho são vermelhos profundos e escuros que lembram couro, veludo e vinho tinto. O coral é o vermelho levado para o laranja e o rosa, mais suave e mais simpático. Escolhe a família antes de escolheres o gradiente, porque misturar as três numa só transição costuma dar um resultado lamacento.

- Carmesim: #e11d48
- Carmesim profundo: #b91c1c
- Sangue de boi: #7f1d1d
- Vinho: #4a0e0e
- Coral: #ff6f61
- Rosado: #fecaca

O carmesim no topo, o sangue de boi e o vinho para a profundidade, o coral e o rosado para a leveza. Cada família constrói o seu tipo de gradiente vermelho.

## Códigos de gradientes vermelhos para copiar

Cada um destes gradientes mantém o vermelho como nota principal, mas varia em temperatura e profundidade. Os mais escuros funcionam como fundos inteiros; os mais vivos servem melhor botões, etiquetas, cartões e momentos curtos de atenção.

- Fogo carmesim: `linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #f97316 100%)`
- Sangue de boi: `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`
- Coral a carmesim: `linear-gradient(135deg, #ff6f61 0%, #e11d48 100%)`
- Brilho de cereja: `radial-gradient(80% 80% at 30% 20%, #ef4444 0%, #991b1b 55%, #3b0a0a 100%)`
- Vermelho a rosa: `linear-gradient(135deg, #dc2626 0%, #ec4899 100%)`
- Escarlate a vinho: `linear-gradient(90deg, #ff3b30 0%, #b91c1c 50%, #5b0f1f 100%)`
- Terracota: `linear-gradient(180deg, #c2410c 0%, #9a3412 50%, #6b1f0e 100%)`
- Rosado suave: `linear-gradient(135deg, #fee2e2 0%, #fca5a5 50%, #f87171 100%)`
- Vermelho a preto: `linear-gradient(180deg, #b91c1c 0%, #450a0a 70%, #120404 100%)`

Nove gradientes vermelhos, do vivo ao profundo. Cada um passa apenas por vizinhos quentes ou vermelhos mais profundos, nunca por cinzento.

Repara no que os códigos têm em comum. A paragem viva fica numa ponta ou num ponto, nunca no campo todo. As paragens escuras são *vermelhos* escuros, não preto nem cinzento, por isso a transição mantém a cor enquanto desce. Se um gradiente vermelho fica castanho no meio, provavelmente misturaste-o em direção a um verde ou a um cinzento; o nosso guia sobre [gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients) explica porquê.

## Como controlar a intensidade do vermelho

1. **Escolhe uma paragem viva** Decide onde vive o vermelho mais saturado, normalmente perto de um título ou do ponto focal. Tudo o resto desce a partir dele em luminosidade ou saturação.
2. **Dá-lhe vizinhos escuros** Os vermelhos profundos como `#7f1d1d` e `#4a0e0e` fazem a paragem viva brilhar por contraste, como uma única brasa a brilhar numa fogueira escura.
3. **Mistura em direção a cores quentes** O laranja, o coral e o rosa ficam ao lado do vermelho no círculo cromático, por isso misturam-se com limpeza. Vê as [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors) para perceberes porque os vizinhos se portam sempre bem.
4. **Limita o vermelho a uma parte do design** O vermelho é, por natureza, uma cor de destaque. Mesmo num design liderado pelo vermelho, uma área grande e calma ajuda; a [regra 60-30-10](https://gradiently.design/pt-pt/guide/60-30-10-rule) é uma boa proporção de partida.
5. **Dá aos erros outra cor** Se a tua marca é vermelha, dá às mensagens de erro um tratamento claramente diferente, como um ícone mais um vermelho mais escuro ou puxado para o laranja, para que um aviso nunca pareça marketing.

## Texto sobre um gradiente vermelho

O vermelho fica num meio-termo estranho para texto. O vermelho puro de ecrã é escuro demais para o texto preto ser confortável e claro demais para o texto branco passar o mínimo para texto corrido. A solução é escurecer o fundo quando queres letra branca, ou aclará-lo quando queres letra escura, e verificar o ponto mais claro do gradiente que fica por trás das tuas palavras.

| Fundo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| `#ff0000` vermelho puro | Branco | 4,0:1 | Só texto grande |
| `#dc2626` vermelho | Branco | 4,8:1 | Passa para texto corrido |
| `#b91c1c` carmesim profundo | Branco | 6,5:1 | Confortável |
| `#7f1d1d` sangue de boi | `#fff1f0` branco-sujo | 9,1:1 | Excelente |
| `#ff6f61` coral | Branco | 2,7:1 | Falha |
| `#ff6f61` coral | `#1a0505` quase preto | 7,2:1 | Excelente |

Rácios calculados com a fórmula WCAG. 4,5:1 é o mínimo para texto normal e 3:1 para texto grande. Detalhes no [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

Uma publicação vertical de saldos com as palavras Saldos de inverno a branco sobre um gradiente carmesim profundo

O título sobre a parte mais profunda do vermelho, onde a letra branca é confortável.

Um story vertical a anunciar horário alargado sobre um gradiente vermelho quente com um brilho perto do topo

O mesmo vermelho num story, com a paragem viva afastada das palavras.

## Onde os gradientes vermelhos funcionam melhor

O vermelho pertence aos sítios onde a energia e o apetite são o objetivo. É comum em comida e bebida, desporto, entretenimento e promoções, e no design festivo; na tradição chinesa, o vermelho está fortemente associado à sorte e à celebração, e é por isso que domina o design do Ano Novo Lunar. Os significados mudam entre culturas, por isso confirma os da tua no [significado das cores pelo mundo](https://gradiently.design/pt-pt/guide/color-meanings-around-the-world).

- **Comida, cafés e restaurantes:** os gradientes coral e terracota parecem quentes e apetitosos
- **Desporto e fitness:** o fogo carmesim e o escarlate a vinho transmitem velocidade e esforço
- **Moda e beleza:** o sangue de boi, o vinho e o rosado parecem pensados e premium
- **Promoções e lançamentos:** uma paragem viva num campo vermelho profundo atrai o olhar sem gritar
- **Música e vida noturna:** o vermelho a preto e o brilho de cereja servem espaços escuros e iluminados

Se queres vermelho sem o reconstruir para cada formato, o Mercado da Gradiently permite pesquisar Marks com palavras como “vermelho profundo” ou “coral”. Cada Mark desloca a sua zona mais calma para trás das tuas palavras, o que resolve por ti o problema do texto sobre vermelho descrito acima.

## FAQ

### Que cores combinam bem com o vermelho num gradiente?

Os seus vizinhos quentes misturam-se com mais limpeza: laranja, coral, rosa e vinho profundo. Misturar o vermelho em direção ao verde ou ao cinzento tende a deixar o meio castanho.

### Pode pôr-se texto branco sobre um fundo vermelho?

Sim, se o vermelho for profundo o suficiente. O branco sobre `#dc2626` dá 4,8:1 e passa para texto corrido, mas sobre `#ff0000` puro dá só 4:1, por isso usa-o apenas em texto grande.

### Qual é o código hex de um gradiente vermelho escuro?

Experimenta `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`, uma transição sangue de boi que se mantém vermelha de ponta a ponta.

### Porque é que o meu gradiente vermelho parece agressivo?

Normalmente porque o campo todo é vermelho totalmente saturado. Mantém uma paragem viva, deixa o resto cair em vermelhos mais profundos e evita encostar o vermelho a azul saturado.