A versão curta
- 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.
Nesta página
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.
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.
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.
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.
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 e design de luxo 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.
#0a0a0aTexto
#d4af37Contraste
Usar em
#0a0a0aTexto
#b8860bContraste
Usar em
#14110aTexto
#c9a227Contraste
Usar em
#1a1408Texto
#f3e5abContraste
Usar em
#0a0a0aTexto
#8a6d1fContraste
Usar em
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 trata da 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;
}Uma publicação de joalheiro: preto quente, uma luz dourada, texto simples.
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 explica as opções, e 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ô. 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.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil