Resumindo
- 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.
Nesta página
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.
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.
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.
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.
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 e design de luxo 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.
#0a0a0aTexto
#d4af37Contraste
Use para
#0a0a0aTexto
#b8860bContraste
Use para
#14110aTexto
#c9a227Contraste
Use para
#1a1408Texto
#f3e5abContraste
Use para
#0a0a0aTexto
#8a6d1fContraste
Use para
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 trata da parte de acessibilidade.
.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;
}O post de um joalheiro: preto quente, uma luz dourada, tipografia simples.
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 explica as opções, e 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ô. 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.
Perguntas frequentes
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.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil