La versión corta
- Un degradado negro y oro combina un fondo casi negro con un oro construido con varias paradas, normalmente un bronce oscuro, un oro cálido como #d4af37 y un brillo pálido como #f3e5ab.
- El oro plano parece mostaza en pantalla, porque el oro real solo se lee como metal cuando la luz y la sombra se mueven sobre él.
- El negro y el oro parecen más caros cuando el oro cubre una parte pequeña del diseño, como una luz en un borde, una línea o el texto.
- El texto dorado como #d4af37 sobre casi negro alcanza un contraste de unos 9:1, así que es legible en titulares y líneas cortas.
- El oro impreso con tintas normales nunca parece metálico, así que usa foil o una tinta metálica cuando importa lo auténtico.
En esta página
Un degradado negro y oro pone un fondo casi negro frente a un oro construido con varias paradas y no con un solo color plano: un bronce oscuro como #8a6d1f, un oro cálido como #d4af37 y un brillo pálido como #f3e5ab. Esa variación es lo que hace que el oro parezca metal. Las versiones con buen gusto también usan mucho menos oro de lo que cabría esperar, a menudo solo un resplandor en un borde o el propio texto. Aquí tienes los códigos, el CSS del texto dorado metálico y las reglas que mantienen la pareja con aspecto caro.
Por qué el oro plano parece barato
El oro no es realmente un color; es un material. Lo que reconoces como oro es un patrón de reflejos: marrón oliva oscuro en las sombras, amarillo cálido en los tonos medios, casi blanco donde da la luz. Un solo valor hex captura solo uno de ellos, así que un #ffd700 plano parece amarillo o mostaza y no metal. Un degradado con al menos tres paradas hace el trabajo que haría la luz.
Códigos de degradado dorado metálico
Estos son los rellenos dorados en sí: para una línea, una insignia, un monograma o texto con degradado. Cada uno va de oscuro a claro y a oscuro, lo que da la impresión de una superficie curva y pulida que capta la luz.
Fondos degradados negro y oro
Para un fondo, invierte las proporciones: el negro hace casi todo el trabajo y el oro llega como un resplandor, un horizonte o una calidez tenue en una esquina. Un negro cálido, con un toque de marrón, combina mejor con el oro que un negro puro o azulado.
Los degradados oscuros muestran más banding que cualquier otro tipo, y un resplandor dorado sobre negro es casi el peor caso. Una capa de grano fino lo arregla y, de regalo, hace que la superficie parezca papel o terciopelo. Hay más fondos en degradados negros.
Cómo mantener el negro y el oro con buen gusto
Parece barato
- Oro amarillo plano como
#ffd700 - Oro cubriendo la mitad del diseño
- Halos dorados detrás de cada palabra
- Oro sobre negro azulado puro
- Letra ornamentada, oro y biseles a la vez
Parece caro
- Oro construido con tres o más paradas
- Oro en un solo lugar: una luz, una línea o el nombre
- Tipografía sencilla y bien espaciada, sin efectos
- Oro sobre negro cálido
- Una tipografía elegante, márgenes generosos
La contención es todo el truco. Los envases de lujo suelen mostrar mucho espacio oscuro vacío y una pequeña cantidad de metal, para que el metal parezca precioso. Lo mismo vale en pantalla. Paletas de colores de lujo y diseño de lujo cubren el lenguaje más amplio.
Texto dorado sobre un degradado negro
El oro se lee bien sobre negro. Las cifras de abajo usan la fórmula de contraste WCAG; 4,5:1 es el mínimo habitual para texto pequeño y 3:1 para titulares grandes. Reserva los oros antiguos más oscuros para líneas y bordes, no para palabras.
#0a0a0aTexto
#d4af37Contraste
Uso
#0a0a0aTexto
#b8860bContraste
Uso
#14110aTexto
#c9a227Contraste
Uso
#1a1408Texto
#f3e5abContraste
Uso
#0a0a0aTexto
#8a6d1fContraste
Uso
El texto con degradado metálico funciona para una sola palabra o un nombre corto. El CSS de abajo recorta el degradado de oro pulido a las letras y deja un oro sólido como alternativa. Texto con degradado en CSS cubre el lado de la accesibilidad.
.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;
}Una publicación de joyería: negro cálido, una luz dorada, tipografía sencilla.
Una historia de Nochevieja con un horizonte dorado abajo.
Negro y oro en impresión
La impresión normal a cuatro colores no puede reproducir el metal. Un degradado dorado impreso en CMYK sale como un amarillo parduzco, por muy cuidadosamente que lo construyas. Para invitaciones, tarjetas y envases en que el oro importa, usa estampado en caliente o una tinta metálica para las partes doradas y deja el degradado para la pantalla. Degradados en impresión explica las opciones, y RGB frente a CMYK explica por qué difieren pantalla y papel.
Dónde usar el negro y el oro
El negro y el oro van bien con joyería, relojes, fragancias, licores, hoteles, barberías, eventos de etiqueta y Nochevieja. También combina bien con los rojos vino profundos; mira degradados burdeos. Si quieres un look oscuro y cálido que sea solo tuyo, un Mark de Gradiently es una receta de colores, materiales, luz y grano y no un relleno plano. Cada Mark tiene un dueño a la vez y, una vez que reservas uno, un competidor no puede exportarlo.
Preguntas frecuentes
¿Cuál es el código hex del oro metálico?
Un oro metálico muy usado es #d4af37. Para un metal convincente, combínalo en un degradado con un bronce oscuro como #8a6d1f y un brillo pálido como #f3e5ab.
¿Cómo hago un degradado dorado en CSS?
Usa un degradado lineal simétrico que vaya de oscuro a brillante, a brillo, a brillante y a oscuro, por ejemplo linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%).
¿Es legible el texto dorado sobre negro?
Sí. El oro metálico #d4af37 sobre casi negro alcanza un contraste de unos 9:1. Para pasajes largos, un oro champán más pálido se lee con más comodidad.
¿Por qué mi diseño negro y oro parece barato?
Normalmente porque el oro es un único amarillo plano, hay demasiado o lleva resplandores y biseles. Construye el oro con varias paradas y úsalo en un solo lugar.
¿Puedo imprimir un degradado negro y oro?
Puedes, pero el oro en CMYK sale como un amarillo parduzco, no metálico. Usa foil o una tinta metálica para el oro que tiene que brillar.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil