# Degradados negro y oro: códigos de lujo con buen gusto [Canonical HTML page](https://gradiently.design/es/guide/black-and-gold-gradient) El negro y el oro son sinónimo de lujo y la paleta más fácil de volver barata. La diferencia casi siempre está en cómo se construye el oro y en lo poco que se usa. ## The short version - 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. 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. - Azabache: #0a0a0a - Negro cálido: #1a1408 - Sombra de bronce: #5c4813 - Oro antiguo: #8a6d1f - Vara de oro oscuro: #b8860b - Oro metálico: #d4af37 - Miel: #e6c76a - Champán: #f3e5ab Dos negros y seis oros. Un metal convincente usa al menos tres oros de esta rampa, nunca solo uno. ## 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. - Oro pulido: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)` - Oro iluminado desde arriba: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)` - Barra antigua: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)` - Champán cepillado: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)` Rellenos dorados metálicos. La simetría, oscuro en ambos extremos y brillante en el centro, es lo que se lee como superficie curva. ## 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. - Luz dorada en la esquina: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)` - Horizonte dorado: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)` - Luz de candilejas: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)` - Borde dorado: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)` Fondos negro y oro. En todos, el oro cubre bastante menos de una cuarta parte del encuadre. 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](https://gradiently.design/es/guide/black-gradient). ## 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](https://gradiently.design/es/guide/luxury-color-palettes) y [diseño de lujo](https://gradiently.design/es/guide/luxury-design) 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. | Fondo | Texto | Contraste | Uso | | --- | --- | --- | --- | | Azabache `#0a0a0a` | Oro metálico `#d4af37` | 9,4:1 | Titulares y líneas cortas | | Azabache `#0a0a0a` | Vara de oro oscuro `#b8860b` | 6,1:1 | Subtítulos, etiquetas | | Negro cálido `#14110a` | Oro `#c9a227` | 7,8:1 | Titulares | | Negro cálido `#1a1408` | Champán `#f3e5ab` | 14,5:1 | Texto corrido | | Azabache `#0a0a0a` | Oro antiguo `#8a6d1f` | 4,0:1 | Solo texto grande o líneas | Para textos largos, el champán se lee con más comodidad que el oro saturado. 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](https://gradiently.design/es/guide/css-gradient-text) cubre el lado de la accesibilidad. ```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; } ``` Una sección de negro cálido con una tenue luz dorada, texto corrido champán y un titular de oro pulido. Una publicación vertical de joyería con letras de oro pálido sobre un fondo negro cálido con un tenue resplandor dorado en una esquina Una publicación de joyería: negro cálido, una luz dorada, tipografía sencilla. Una historia vertical de Nochevieja con letras champán sobre negro que se funde en un horizonte dorado abajo 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](https://gradiently.design/es/guide/print-gradients) explica las opciones, y [RGB frente a CMYK](https://gradiently.design/es/guide/rgb-vs-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](https://gradiently.design/es/guide/maroon-gradient). 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. ## FAQ ### ¿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.