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

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

Preto e dourado é o atalho para o luxo, e a paleta mais fácil de deixar barata. A diferença quase sempre está em como o dourado é construído e em quão pouco dele você usa.

## The short version

- Um degradê preto e dourado combina um fundo quase preto com um dourado feito de várias paradas, normalmente um bronze escuro, um dourado quente como #d4af37 e um realce claro como #f3e5ab.
- Dourado chapado parece mostarda na tela, porque o ouro de verdade só parece metal quando luz e sombra passam por ele.
- Preto e dourado parece mais caro quando o dourado ocupa uma parte pequena do design, como uma luz numa borda, um fio ou o texto.
- Texto dourado como #d4af37 sobre quase preto chega a cerca de 9:1 de contraste, então é legível em títulos e linhas curtas.
- Dourado impresso com tintas comuns nunca parece metálico, então use hot stamping ou tinta metálica quando o efeito real importa.

Um **degradê preto e dourado** coloca um fundo quase preto contra um dourado construído com várias paradas em vez de uma cor chapada: um bronze escuro como `#8a6d1f`, um dourado quente como `#d4af37` e um realce claro como `#f3e5ab`. É essa variação que faz o dourado parecer metal. As versões de bom gosto também usam muito menos dourado do que você imagina, muitas vezes só um brilho numa borda ou o próprio texto. Aqui estão os códigos, o CSS para texto dourado metálico e as regras que mantêm a combinação com cara de cara.

## Por que o dourado chapado parece barato

O dourado não é bem uma cor; é um material. O que você reconhece como ouro é um padrão de reflexos: marrom oliva escuro nas sombras, amarelo quente nos meios-tons, quase branco onde a luz bate. Um único valor hex captura só um deles, então um `#ffd700` chapado parece amarelo ou mostarda, não metal. Um gradiente com pelo menos três paradas faz o papel da luz.

- Azeviche: #0a0a0a
- Preto quente: #1a1408
- Sombra bronze: #5c4813
- Ouro envelhecido: #8a6d1f
- Ouro escuro: #b8860b
- Dourado metálico: #d4af37
- Mel: #e6c76a
- Champanhe: #f3e5ab

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

## Códigos de gradiente dourado metálico

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

- Ouro polido: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Ouro iluminado de cima: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Barra envelhecida: `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 de dourado metálico. A simetria, escuro nas duas pontas e claro no meio, é o que parece uma superfície curva.

## Fundos em degradê preto e dourado

Para um fundo, inverta as proporções: o preto faz quase todo o trabalho e o dourado chega como um brilho, um horizonte ou um leve calor num canto. Um preto quente, com um toque de marrom, combina melhor com 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 ribalta: `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 eles, o dourado cobre bem menos de um quarto do quadro.

Gradientes escuros criam mais faixas do que qualquer outro tipo, e um brilho dourado sobre preto é praticamente o pior caso. Uma camada fina de granulado resolve e, de quebra, faz a superfície parecer papel ou veludo. Mais fundos em [gradientes pretos](https://gradiently.design/pt-br/guide/black-gradient).

## Como manter o preto e dourado com bom gosto

### Parece barato

- Dourado amarelo chapado como `#ffd700`
- Dourado cobrindo metade do design
- Halos de brilho dourado atrás de cada palavra
- Dourado sobre preto azulado puro
- Letra cursiva rebuscada, dourado e chanfros ao mesmo tempo

### Parece caro

- Dourado feito com três ou mais paradas
- Dourado num só lugar: uma luz, um fio ou o nome
- Tipografia simples e bem espaçada, sem efeitos
- Dourado sobre preto quente
- Uma fonte elegante, margens generosas

A contenção é todo o segredo. Embalagens de luxo costumam mostrar muito espaço escuro vazio e pouco metal, para que o metal pareça precioso. Na tela é igual. [Paletas de cores de luxo](https://gradiently.design/pt-br/guide/luxury-color-palettes) e [design de luxo](https://gradiently.design/pt-br/guide/luxury-design) cobrem a linguagem mais ampla.

## Texto dourado sobre degradê preto

O dourado fica bem legível sobre preto. Os números abaixo usam a fórmula de contraste das WCAG; 4,5:1 é o mínimo usual para texto pequeno e 3:1 para títulos grandes. Guarde os dourados envelhecidos mais escuros para fios e bordas, não para palavras.

| Fundo | Texto | Contraste | Use para |
| --- | --- | --- | --- |
| Azeviche `#0a0a0a` | Dourado metálico `#d4af37` | 9,4:1 | Títulos e linhas curtas |
| Azeviche `#0a0a0a` | Ouro escuro `#b8860b` | 6,1:1 | Subtítulos, etiquetas |
| Preto quente `#14110a` | Dourado `#c9a227` | 7,8:1 | Títulos |
| Preto quente `#1a1408` | Champanhe `#f3e5ab` | 14,5:1 | Texto corrido |
| Azeviche `#0a0a0a` | Ouro envelhecido `#8a6d1f` | 4,0:1 | Só texto grande ou fios |

Para textos longos, o champanhe é mais confortável de ler que o dourado saturado.

Texto em gradiente metálico funciona para uma única palavra ou um nome curto. O CSS abaixo recorta o gradiente de ouro polido nas letras e mantém um dourado sólido como reserva. [Texto em gradiente com CSS](https://gradiently.design/pt-br/guide/css-gradient-text) trata da parte de 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 seção em preto quente com uma leve luz dourada, texto champanhe e um título em ouro polido.

Um post de joalheria em retrato com letras douradas claras sobre um fundo preto quente com um leve brilho dourado num canto

O post de um joalheiro: preto quente, uma luz dourada, tipografia simples.

Um story vertical de Réveillon com letras champanhe sobre preto, que se dissolve num horizonte dourado embaixo

Um story de Réveillon com um horizonte dourado embaixo.

## Preto e dourado na impressão

A impressão comum em quatro cores não reproduz metal. Um gradiente dourado impresso em CMYK sai como um amarelo amarronzado, por mais cuidadoso que seja. Em convites, cartões de visita e embalagens em que o dourado importa, use hot stamping ou tinta metálica nas partes douradas e deixe o gradiente para a tela. [Gradientes na impressão](https://gradiently.design/pt-br/guide/print-gradients) explica as opções, e [RGB vs CMYK](https://gradiently.design/pt-br/guide/rgb-vs-cmyk) explica por que tela e papel são diferentes.

## Onde usar preto e dourado

Preto e dourado combinam com joias, relógios, perfumes, destilados, hotéis, barbearias, eventos black tie e Ano Novo. Também vão bem com vermelhos vinho profundos; veja [degradês bordô](https://gradiently.design/pt-br/guide/maroon-gradient). Se você quer um visual escuro e quente que seja só seu, um Mark do Gradiently é uma receita de cores, materiais, luz e granulado, não um preenchimento chapado. Cada Mark tem um dono por vez, e depois que você reserva um, nenhum concorrente pode exportá-lo.

## FAQ

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

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

### Como fazer um gradiente dourado em CSS?

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

### Texto dourado sobre preto é legível?

Sim. O dourado metálico `#d4af37` sobre quase preto chega a cerca de 9:1 de contraste. Para textos longos, um dourado champanhe mais claro é mais confortável.

### Por que meu design preto e dourado parece barato?

Normalmente porque o dourado é um único amarelo chapado, há dourado demais ou ele vem com brilhos e chanfros. Construa o dourado com várias paradas e use-o num só lugar.

### Dá para imprimir um degradê preto e dourado?

Dá, mas o dourado em CMYK sai amarelo amarronzado, não metálico. Use hot stamping ou tinta metálica para o dourado que precisa brilhar.