# Gradientes preto e dourado: códigos de luxo com bom gosto

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

Preto e dourado é a abreviatura do luxo e a paleta mais fácil de tornar barata. A diferença está quase sempre em como o dourado é construído e em quão pouco se usa.

## The short version

- Um gradiente preto e dourado junta um fundo quase preto com um dourado construído com várias paragens, tipicamente um bronze escuro, um dourado quente como #d4af37 e um realce pálido como #f3e5ab.
- O dourado liso parece mostarda no ecrã, porque o ouro verdadeiro só se lê como metal quando a luz e a sombra se movem sobre ele.
- O preto e dourado parece mais caro quando o dourado cobre uma pequena parte do design, como uma luz num canto, um filete ou o texto.
- Texto dourado como #d4af37 sobre quase preto atinge cerca de 9:1 de contraste, por isso é legível em títulos e linhas curtas.
- O dourado impresso com tintas normais nunca parece metálico, por isso usa película metalizada ou tinta metálica quando o efeito real importa.

Um **gradiente preto e dourado** põe um fundo quase preto frente a um dourado construído com várias paragens em vez de uma cor lisa: um bronze escuro como `#8a6d1f`, um dourado quente como `#d4af37` e um realce pálido como `#f3e5ab`. É essa variação que faz o dourado parecer metal. As versões com bom gosto também usam muito menos dourado do que se imagina, muitas vezes apenas um brilho num canto ou o próprio texto. Aqui ficam os códigos, o CSS para texto dourado metálico e as regras que mantêm a combinação com ar caro.

## Porque é que o dourado liso parece barato

O dourado não é bem uma cor; é um material. O que reconheces como ouro é um padrão de reflexos: castanho-oliva escuro nas sombras, amarelo quente nos meios-tons, quase branco onde a luz bate. Um único valor hex capta só um desses, por isso um `#ffd700` liso lê-se como amarelo ou mostarda e não como metal. Um gradiente com pelo menos três paragens faz o trabalho que a luz faria.

- Azeviche: #0a0a0a
- Preto quente: #1a1408
- Sombra de bronze: #5c4813
- Ouro antigo: #8a6d1f
- Vara-de-ouro escura: #b8860b
- Ouro metálico: #d4af37
- Mel: #e6c76a
- Champanhe: #f3e5ab

Dois pretos e seis dourados. Um metal convincente usa pelo menos três dourados desta escala, nunca apenas um.

## Códigos de gradiente dourado metálico

Estes são os próprios preenchimentos dourados: para um filete, um emblema, um monograma ou texto em gradiente. Cada um vai de escuro a claro e a escuro, o que dá a impressão de uma superfície curva e polida a apanhar luz.

- Ouro polido: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Ouro iluminado por cima: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Barra antiga: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)`
- Champanhe escovado: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)`

Preenchimentos dourados metálicos. A simetria, escuro nas duas pontas e brilhante no meio, é o que se lê como superfície curva.

## Fundos em gradiente preto e dourado

Num fundo, inverte as proporções: o preto faz quase todo o trabalho e o dourado chega como um brilho, um horizonte ou um calor ténue num canto. Um preto quente, com um toque de castanho, combina melhor com o dourado do que um preto puro ou azulado.

- Luz dourada no canto: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)`
- Horizonte dourado: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)`
- Luz de palco: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)`
- Borda dourada: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)`

Fundos preto e dourado. Em todos, o dourado cobre bem menos de um quarto do enquadramento.

Os gradientes escuros têm mais banding do que qualquer outro tipo, e um brilho dourado sobre preto é quase o pior caso. Uma camada de grão fino resolve-o e, como bónus, dá à superfície um toque de papel ou veludo. Há mais fundos em [gradientes pretos](https://gradiently.design/pt-pt/guide/black-gradient).

## Como manter o preto e dourado com bom gosto

### Parece barato

- Dourado amarelo liso como `#ffd700`
- Dourado a cobrir metade do design
- Halos dourados atrás de cada palavra
- Dourado sobre preto azulado puro
- Letra cursiva ornamentada, dourado e relevos tudo ao mesmo tempo

### Parece caro

- Dourado construído com três ou mais paragens
- Dourado num só sítio: uma luz, um filete ou o nome
- Texto simples, bem espaçado e sem efeitos
- Dourado sobre preto quente
- Uma tipografia elegante, margens generosas

A contenção é todo o segredo. As embalagens de luxo tendem a mostrar muito espaço escuro vazio e um pouco de metal, para que o metal pareça precioso. O mesmo vale no ecrã. [Paletas de cores de luxo](https://gradiently.design/pt-pt/guide/luxury-color-palettes) e [design de luxo](https://gradiently.design/pt-pt/guide/luxury-design) tratam a linguagem mais ampla.

## Texto dourado sobre um gradiente preto

O dourado lê-se bem sobre preto. Os valores abaixo usam a fórmula de contraste WCAG; 4,5:1 é o mínimo habitual para texto pequeno e 3:1 para títulos grandes. Guarda os dourados antigos mais escuros para filetes e bordas, não para palavras.

| Fundo | Texto | Contraste | Usar em |
| --- | --- | --- | --- |
| Azeviche `#0a0a0a` | Ouro metálico `#d4af37` | 9,4:1 | Títulos e linhas curtas |
| Azeviche `#0a0a0a` | Vara-de-ouro escura `#b8860b` | 6,1:1 | Subtítulos, etiquetas |
| Preto quente `#14110a` | Ouro `#c9a227` | 7,8:1 | Títulos |
| Preto quente `#1a1408` | Champanhe `#f3e5ab` | 14,5:1 | Texto corrido |
| Azeviche `#0a0a0a` | Ouro antigo `#8a6d1f` | 4,0:1 | Apenas texto grande ou filetes |

Para texto longo, o champanhe lê-se com mais conforto do que o dourado saturado.

O texto em gradiente metálico funciona para uma só palavra ou um nome curto. O CSS abaixo recorta o gradiente de ouro polido pelas letras e mantém um dourado liso como recurso. [Texto com gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-text) trata da acessibilidade.

```css
.luxe {
  background-color: #0a0a0a;
  background-image: radial-gradient(circle at 80% 15%, #5c4813 0%, #1a1408 35%, #0a0a0a 75%);
  color: #f3e5ab;
}

.luxe h1 {
  color: #d4af37; /* fallback */
  background: linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
}
```

Uma secção de preto quente com uma ténue luz dourada, texto corrido em champanhe e um título em ouro polido.

Uma publicação vertical de joalharia com letras em dourado pálido sobre fundo preto quente, com um brilho dourado ténue num canto

Uma publicação de joalheiro: preto quente, uma luz dourada, texto simples.

Um story vertical de Passagem de Ano com letras cor de champanhe sobre preto que se desvanece num horizonte dourado em baixo

Um story de Passagem de Ano com um horizonte dourado em baixo.

## Preto e dourado em impressão

A impressão normal a quatro cores não consegue reproduzir metal. Um gradiente dourado impresso em CMYK sai como um amarelo acastanhado, por mais cuidado que ponhas a construí-lo. Para convites, cartões de visita e embalagens em que o dourado conta, usa hot foil ou tinta metálica nas partes douradas e guarda o gradiente para o ecrã. [Gradientes em impressão](https://gradiently.design/pt-pt/guide/print-gradients) explica as opções, e [RGB vs CMYK](https://gradiently.design/pt-pt/guide/rgb-vs-cmyk) explica porque os ecrãs e o papel diferem.

## Onde usar preto e dourado

O preto e dourado serve a joalharia, relojoaria, perfumaria, bebidas espirituosas, hotéis, barbearias, eventos de gala e Passagem de Ano. Combina também com vermelhos vinho profundos; vê [gradientes bordô](https://gradiently.design/pt-pt/guide/maroon-gradient). Se queres um estilo escuro e quente só teu, um Mark da Gradiently é uma receita de cores, materiais, luz e grão e não um preenchimento liso. Cada Mark tem um dono de cada vez e, depois de reservares um, um concorrente não o consegue exportar.

## FAQ

### Qual é o código hex do dourado metálico?

Um dourado metálico muito usado é `#d4af37`. Para um metal convincente, combina-o num gradiente com um bronze escuro como `#8a6d1f` e um realce pálido como `#f3e5ab`.

### Como faço um gradiente dourado em CSS?

Usa um gradiente linear simétrico que vá de escuro a brilhante, realce, brilhante e escuro, por exemplo `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`.

### O texto dourado sobre preto é legível?

Sim. O dourado metálico `#d4af37` sobre quase preto atinge cerca de 9:1 de contraste. Para passagens longas, um dourado champanhe mais pálido lê-se com mais conforto.

### Porque é que o meu design preto e dourado parece barato?

Normalmente porque o dourado é um amarelo liso, há demasiado, ou tem brilhos e relevos. Constrói o dourado com várias paragens e usa-o num só sítio.

### Posso imprimir um gradiente preto e dourado?

Podes, mas o dourado em CMYK parece um amarelo acastanhado, não metálico. Usa película ou tinta metálica para o dourado que precisa de brilhar.