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

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

O bordô é o vermelho que amadureceu. Lembra vinho, veludo e bibliotecas antigas, e vira marrom no instante em que você o mistura sem cuidado. Estes códigos continuam ricos.

## The short version

- Um gradiente bordô mistura vermelhos profundos e arroxeados como #800020, #7f1d3a e #4a0e1f, muitas vezes rumo ao quase preto, ao rosa, ao rosado ou ao dourado.
- O bordô tende ao roxo e o grená tende ao marrom, e essa pequena diferença decide se um gradiente lembra vinho ou ferrugem.
- Gradientes bordô ficam turvos quando misturados com verde, oliva ou um cinza quente, então passe por rosa, ameixa ou quase preto.
- Texto creme e off-white quente se lê muito bem sobre o bordô, e o dourado funciona como acento, não como texto corrido.
- O bordô combina com vinho, hospitalidade, beleza, campanhas de outono e inverno, convites e qualquer marca que queira vermelho sem urgência.

Um **gradiente bordô** mistura vermelhos profundos e levemente arroxeados: o bordô clássico `#800020`, o vinho `#7f1d3a` e o escuro sangue-de-boi `#4a0e1f`, geralmente desaparecendo em quase preto, suavizando-se em rosa e rosado, ou iluminados por um toque de dourado. O segredo para mantê-lo rico é misturar o bordô só com seus parentes, vermelhos, rosas, ameixas e marrons bem escuros, e dar a ele um parceiro creme ou dourado em vez de branco. Abaixo estão os códigos, as diferenças entre bordô, grená e vinho e as cores de texto que funcionam.

## Bordô, grená, vinho e sangue-de-boi: qual é a diferença

As pessoas usam esses nomes de forma solta, mas eles tendem a direções diferentes, e a direção importa ao montar um gradiente. O bordô e o vinho tendem ao roxo, então se misturam com elegância à ameixa e ao rosa. O grená e o sangue-de-boi tendem ao marrom, então combinam com couro, bege e latão. Se o seu gradiente parece ferrugem, você provavelmente misturou um grená amarronzado com um rosa frio.

- Adega: #2a0a12
- Sangue-de-boi: #4a0e1f
- Grená: #800000
- Bordô: #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 amarronzado do conjunto; o vinho e a granada são os mais arroxeados.

## Códigos de gradiente bordô profundo

Os gradientes bordô mais úteis são escuros: um fundo quase preto com luz de vinho subindo por ele. Parecem caros porque há pouquíssima cor viva, e a que existe brilha. Mantenha o vermelho mais claro longe de onde ficarão as palavras.

- Da adega ao bordô: `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%)`
- Couro 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 bordô escuros. Cada um guarda seu vermelho mais vivo num só lugar, deixando uma área escura e calma para o texto.

Estes ficam perto da ponta mais escura dos [gradientes vermelhos](https://gradiently.design/pt-br/guide/red-gradient), mas com menos fogo e mais profundidade. Vermelhos escuros formam banding com facilidade em imagens comprimidas, então acrescente um pouco de granulação antes de exportar.

## Bordô com dourado, rosado e ameixa

O bordô raramente funciona sozinho por muito tempo. Seus parceiros clássicos mudam o clima, cada um a seu modo. O dourado o deixa formal e festivo. O rosado o deixa romântico e suave. A ameixa o deixa sombrio e moderno. O azul-marinho, posto ao lado e não misturado, o deixa acadêmico.

- Bordô 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 bordô: `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 bordô com seus quatro melhores companheiros. O dourado fica numa borda curta, e as outras misturas ficam entre vermelhos, rosas e roxos, para que nada vire marrom.

O par bordô e dourado é o mais fácil de exagerar. Limite o dourado a uma faixa fina numa borda ou ao texto, e ele lembra vinho fino, não fantasia. Para mais sobre dourado escuro, veja [gradientes preto e dourado](https://gradiently.design/pt-br/guide/black-and-gold-gradient).

## Como evitar que um gradiente bordô vire marrom

1. **Escolha uma direção: roxo ou marrom** Decida se o seu bordô tende a vinho ou a couro e mantenha todas as cores do gradiente tendendo para o mesmo lado.
2. **Escureça rumo ao quase preto, não ao cinza** Um bordô se desfazendo num cinza quente parece empoeirado. Desfaça-o num preto tingido de vermelho como `#14050a` e ele continua rico.
3. **Nunca misture com verde ou oliva** O verde é oposto ao vermelho na roda de cores, então o meio da mistura vira um cinza amarronzado. [Gradientes turvos](https://gradiently.design/pt-br/guide/muddy-gradients) mostra o efeito.
4. **Clareie com rosa, não com laranja** Para deixar o bordô mais claro, passe pela granada e pelo rosa antigo. O laranja o puxa para a ferrugem.
5. **Acrescente granulação fina** Vermelhos profundos comprimem mal e formam degraus. Uma camada leve de ruído mantém a superfície lisa e a faz parecer veludo ou papel.

## Cores de texto sobre um gradiente bordô

O bordô é escuro o bastante para que texto claro se leia com facilidade em quase toda a sua extensão. O branco puro pode soar áspero; um creme quente mantém o design inteiro suave. O dourado se lê bem sobre os vermelhos mais escuros e é lindo para um nome ou uma data, mas use em tamanhos grandes. As razões abaixo usam a fórmula do WCAG, em que 4,5:1 é o mínimo usual para texto pequeno.

| Fundo | Texto | Contraste | Use para |
| --- | --- | --- | --- |
| Bordô `#800020` | Branco `#ffffff` | 10,8:1 | Qualquer texto |
| Vinho `#7f1d3a` | Creme `#fdf2e9` | 8,9:1 | Qualquer texto, clima 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 seu gradiente vai do bordô ao rosado, as palavras precisam ficar numa das pontas ou trocar de tinta onde cruzam.

Um post vertical de evento para uma noite de degustação de vinhos, com letras creme sobre um gradiente bordô escuro

Um post de vinhoteca sobre um fundo bordô profundo com texto creme.

Um convite de reserva de data com o bordô se desfazendo em rosado e letras escuras na ponta clara

Um convite 5×7 pol. em que o bordô se suaviza em rosado.

Os dois designs mantêm suas palavras numa das pontas da mistura. [Texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) explica como lidar com uma linha que precisa cruzar do escuro ao claro.

## Um fundo de gradiente bordô 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 granada no canto superior direito, sombra sangue-de-boi no inferior esquerdo, texto creme e um acento dourado.

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

## Onde o bordô funciona

O bordô traz o calor do vermelho sem a urgência, e por isso raramente aparece em banners de liquidação e muitas vezes em cardápios, convites e rótulos. Combina com vinhotecas e restaurantes, beleza e perfumaria, livrarias, universidades, campanhas de inverno e de fim de ano e coleções de outono. Também combina naturalmente com as [paletas de tons terrosos](https://gradiently.design/pt-br/guide/earth-tone-colors) que muitas marcas de estilo de vida usam, como o acento profundo entre beges e olivas.

Se você quer um visual de vermelho profundo que seja realmente seu, e não um código hex que qualquer um copia, explore os Marks bordô e vinho no Mercado do Gradiently digitando uma palavra de cor como “vinho”. Cada Mark é único, renderiza em todos os tamanhos de que você precisa e mantém suas palavras legíveis nas partes mais escuras e mais claras.

## FAQ

### Qual é o código hex do bordô?

O bordô clássico é `#800020`. O vinho fica em torno de `#7f1d3a` e o sangue-de-boi, mais escuro, em torno de `#4a0e1f`.

### Qual a diferença entre bordô e grená?

O bordô tende levemente ao roxo, como vinho tinto. O grená, `#800000`, tende levemente ao marrom. Essa diferença decide com quais cores cada um se mistura bem.

### Que cores combinam com um gradiente bordô?

Dourado, rosado, rosa antigo, ameixa, creme e quase preto funcionam. O azul-marinho funciona ao lado do bordô, mas evite misturá-lo com verde ou oliva, que fica turvo.

### Que cor de texto usar sobre o bordô?

Creme ou branco se leem muito bem sobre o bordô, com contraste de cerca de 9:1 a 11:1. O dourado combina com títulos e nomes sobre os vermelhos mais escuros.

### Por que meu gradiente bordô parece marrom?

Provavelmente está se misturando com laranja, oliva ou um cinza quente, ou misturando um grená amarronzado com um rosa frio. Mantenha cada parada tendendo para o mesmo lado e desfaça num preto tingido de vermelho.