# Gradiente bordeaux: códigos ricos de vinho e grená

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

O bordeaux é o vermelho que cresceu. Lê-se como vinho, veludo e bibliotecas antigas, e fica castanho no instante em que o misturas sem cuidado. Estes códigos mantêm-se ricos.

## The short version

- Um gradiente bordeaux mistura vermelhos escuros arroxeados como #800020, #7f1d3a e #4a0e1f, muitas vezes rumo ao quase preto, ao rosa, ao rosado ou ao dourado.
- O bordeaux tende para o roxo e o grená tende para o castanho, e essa pequena diferença decide se um gradiente parece vinho ou ferrugem.
- Os gradientes bordeaux ficam turvos quando se misturam com verde, azeitona ou cinzento quente, por isso passa antes por rosa, ameixa ou quase preto.
- Texto creme e branco quente lê-se muito bem sobre bordeaux, e o dourado funciona como acento e não como texto corrido.
- O bordeaux serve para vinho, hotelaria, beleza, campanhas de outono e inverno, convites e qualquer marca que queira vermelho sem urgência.

Um **gradiente bordeaux** mistura vermelhos escuros e ligeiramente arroxeados: o bordeaux clássico `#800020`, o vinho `#7f1d3a` e o sangue de boi escuro `#4a0e1f`, normalmente a esbater para quase preto, a suavizar-se em rosa e rosado, ou iluminado com um toque de dourado. O truque para o manter rico é misturar o bordeaux só com os seus parentes, vermelhos, rosas, ameixas e castanhos muito escuros, e dar-lhe um parceiro creme ou dourado em vez de branco. Abaixo ficam os códigos, as diferenças entre bordeaux, grená e vinho e as cores de texto que funcionam.

## Bordeaux, grená, vinho e sangue de boi: qual é a diferença

As pessoas usam estes nomes à vontade, mas tendem em direções diferentes, e a direção importa quando constróis um gradiente. O bordeaux e o vinho tendem para o roxo, por isso misturam-se com elegância em ameixa e rosa. O grená e o sangue de boi tendem para o castanho, por isso assentam bem com cabedal, bege e latão. Se o teu gradiente parece ferrugem, provavelmente misturaste um grená acastanhado com um rosa frio.

- Adega: #2a0a12
- Sangue de boi: #4a0e1f
- Grená: #800000
- Bordeaux: #800020
- Vinho: #7f1d3a
- Granada: #9f1239
- Rosa antigo: #be7c8c
- Rosado: #e8b4b8

A família dos vermelhos profundos, do escuro de adega ao rosado. O grená é o mais acastanhado do conjunto; o vinho e a granada são os mais arroxeados.

## Códigos de gradiente bordeaux profundo

Os gradientes bordeaux mais úteis são escuros: um fundo quase preto com luz de vinho a subir por ele. Parecem caros porque há muito pouca cor viva, e a que há brilha. Mantém o vermelho mais claro longe de onde vão ficar as palavras.

- Da adega ao bordeaux: `linear-gradient(160deg, #2a0a12 0%, #4a0e1f 45%, #800020 100%)`
- Vinho à luz de velas: `radial-gradient(circle at 70% 25%, #9f1239 0%, #4a0e1f 40%, #14050a 80%)`
- Cabedal grená: `linear-gradient(135deg, #800000 0%, #4a0e1f 55%, #1c0a08 100%)`
- Cortina de veludo: `radial-gradient(ellipse at 50% 100%, #7f1d3a 0%, #3b0a1c 45%, #0f0508 85%)`

Quatro gradientes bordeaux escuros. Cada um guarda o seu vermelho mais brilhante num só sítio, deixando uma zona escura e calma para o texto.

Vivem perto da ponta mais escura dos [gradientes vermelhos](https://gradiently.design/pt-pt/guide/red-gradient), mas com menos fogo e mais profundidade. Os vermelhos escuros formam banding com facilidade em imagens comprimidas, por isso acrescenta um pouco de grão antes de exportar.

## Bordeaux com dourado, rosado e ameixa

O bordeaux raramente funciona sozinho durante muito tempo. Cada um dos seus parceiros clássicos muda o ambiente. O dourado torna-o formal e festivo. O rosado torna-o romântico e suave. A ameixa torna-o sombrio e moderno. O azul-marinho, colocado ao lado e não misturado, dá-lhe um ar universitário.

- Bordeaux e dourado: `linear-gradient(135deg, #4a0e1f 0%, #800020 82%, #d4a24c 100%)`
- Do vinho ao rosado: `linear-gradient(180deg, #7f1d3a 0%, #be7c8c 55%, #f5dede 100%)`
- Da ameixa ao bordeaux: `linear-gradient(120deg, #3b0764 0%, #6b1d4a 50%, #800020 100%)`
- Rosa no escuro: `radial-gradient(circle at 20% 80%, #e8b4b8 0%, #9f1239 40%, #2a0a12 85%)`

O bordeaux com os seus quatro melhores companheiros. O dourado fica numa orla curta, e as outras misturas mantêm-se em vermelhos, rosas e roxos, para que nada vire castanho.

O par bordeaux e dourado é o mais fácil de exagerar. Mantém o dourado numa nesga de uma orla ou no texto, e lê-se como vinho fino e não como disfarce. Para mais sobre o dourado escuro, vê [gradientes preto e dourado](https://gradiently.design/pt-pt/guide/black-and-gold-gradient).

## Como evitar que um gradiente bordeaux vire castanho

1. **Escolhe uma direção: roxo ou castanho** Decide se o teu bordeaux tende para vinho ou para cabedal, e mantém todas as cores do gradiente a tender para o mesmo lado.
2. **Escurece rumo ao quase preto, não ao cinzento** Um bordeaux a esbater para cinzento quente parece empoeirado. Esbate para um preto com tom vermelho como `#14050a` e mantém-se rico.
3. **Nunca mistures com verde ou azeitona** O verde é oposto ao vermelho na roda de cores, por isso o meio da mistura fica cinzento-acastanhado. [Gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) mostra o efeito.
4. **Aclara com rosa, não com laranja** Para tornar o bordeaux mais claro, passa pela granada e pelo rosa antigo. O laranja puxa-o para a ferrugem.
5. **Acrescenta grão fino** Os vermelhos profundos comprimem mal e formam banding em degraus. Uma camada leve de ruído mantém a superfície lisa e dá-lhe um toque de veludo ou papel.

## Cores de texto sobre um gradiente bordeaux

O bordeaux é escuro o suficiente para que o texto claro se leia sem esforço em quase toda a sua extensão. O branco puro pode parecer austero; um creme quente mantém todo o design suave. O dourado lê-se bem sobre os vermelhos mais escuros e é lindo para um nome ou uma data, mas usa-o em tamanhos grandes. Os rácios abaixo usam a fórmula WCAG, em que 4,5:1 é o mínimo habitual para texto pequeno.

| Fundo | Texto | Contraste | Usar para |
| --- | --- | --- | --- |
| Bordeaux `#800020` | Branco `#ffffff` | 10,8:1 | Qualquer texto |
| Vinho `#7f1d3a` | Creme `#fdf2e9` | 8,9:1 | Qualquer texto, ambiente mais suave |
| Sangue de boi `#4a0e1f` | Creme `#fdf2e9` | 13,9:1 | Qualquer texto |
| Adega `#2a0a12` | Dourado `#d4a24c` | 7,9:1 | Nomes, datas, títulos |
| Rosado `#e8b4b8` | Sangue de boi `#4a0e1f` | 8,5:1 | Tinta escura na ponta clara |
| Rosa antigo `#be7c8c` | Branco `#ffffff` | 3,3:1 | Só títulos grandes |

Se o teu gradiente vai do bordeaux ao rosado, as palavras têm de ficar numa ponta ou trocar de tinta onde a atravessam.

Publicação vertical de evento para uma noite de prova de vinhos, com letras cremes sobre um gradiente bordeaux escuro

Uma publicação de bar de vinhos sobre um fundo bordeaux profundo com texto creme.

Convite save the date com bordeaux a esbater para rosado e letras escuras na ponta clara

Um convite de 5×7 pol. em que o bordeaux se suaviza em rosado.

Ambos os designs mantêm as palavras numa ponta da mistura. [Texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) explica como lidar com uma linha que tem de atravessar do escuro ao claro.

## Um fundo de gradiente bordeaux em CSS

```css
.section--wine {
  background-color: #2a0a12;
  background-image:
    radial-gradient(circle at 75% 20%, #9f1239 0%, transparent 45%),
    radial-gradient(circle at 10% 95%, #4a0e1f 0%, transparent 55%),
    linear-gradient(160deg, #2a0a12 0%, #800020 100%);
  color: #fdf2e9;
}

.section--wine .accent {
  color: #d4a24c;
}
```

Um fundo escuro de adega, luz de granada no canto superior direito, sombra de sangue de boi em baixo à esquerda, texto creme e um acento dourado.

Gradientes radiais em camadas sobre uma base linear dão ao bordeaux a profundidade de um tecido em vez da planura de um preenchimento. A mesma ideia, com mais pormenor, está em [gradientes radiais em CSS](https://gradiently.design/pt-pt/guide/css-radial-gradient).

## Onde o bordeaux funciona

O bordeaux tem o calor do vermelho sem a sua urgência, e é por isso que raramente aparece em faixas de saldos e muitas vezes aparece em ementas, convites e rótulos. Serve bares de vinho e restaurantes, beleza e perfumaria, livrarias, universidades, campanhas de inverno e festivas e coleções de outono. Combina também naturalmente com as [paletas de tons terrosos](https://gradiently.design/pt-pt/guide/earth-tone-colors) que muitas marcas de estilo de vida usam, como o acento profundo entre bege e azeitona.

Se queres um visual de vermelho profundo que seja mesmo teu, e não um código hex que qualquer pessoa pode copiar, explora Marks bordeaux e vinho no Mercado do Gradiently escrevendo uma palavra de cor como “vinho”. Cada Mark é único, desenha-se em todos os tamanhos de que precisas e mantém as tuas palavras legíveis nas suas partes mais escuras e mais claras.

## FAQ

### Qual é o código hex do bordeaux?

O bordeaux clássico é `#800020`. O vinho fica por volta de `#7f1d3a` e o sangue de boi, mais escuro, por volta de `#4a0e1f`.

### Qual é a diferença entre bordeaux e grená?

O bordeaux tende ligeiramente para o roxo, como o vinho tinto. O grená, `#800000`, tende ligeiramente para o castanho. Essa diferença decide com que cores cada um se mistura bem.

### Que cores combinam com um gradiente bordeaux?

Dourado, rosado, rosa antigo, ameixa, creme e quase preto funcionam todos. O azul-marinho funciona ao lado do bordeaux, mas evita misturá-lo com verde ou azeitona, que fica turvo.

### Que cor de texto usar sobre bordeaux?

Creme ou branco lêem-se muito bem sobre bordeaux, com um contraste de cerca de 9:1 a 11:1. O dourado serve para títulos e nomes sobre os vermelhos mais escuros.

### Porque é que o meu gradiente bordeaux parece castanho?

Provavelmente está a misturar-se com laranja, azeitona ou cinzento quente, ou mistura um grená acastanhado com um rosa frio. Mantém todas as paragens a tender para o mesmo lado e esbate para um preto com tom vermelho.