# Degradado dorado: códigos para un oro metálico real

[Canonical HTML page](https://gradiently.design/es/guide/gold-gradient-design)

La mayor parte del oro digital parece zumo de naranja o mostaza. El oro real es sobre todo sombra marrón, un poco de ocre y un destello pálido de luz. Aquí hay códigos que lo logran y las razones por las que funcionan.

## The short version

- Un degradado dorado realista va de una sombra marrón profunda, pasando por un tono medio ocre apagado, a un brillo crema pálido, y luego vuelve a la sombra.
- El oro se ve naranja cuando sus colores son demasiado saturados y rojizos, y se ve como amarillo plano cuando le faltan una sombra oscura y un brillo casi blanco.
- El oro metálico depende del contraste: las paradas más oscura y más clara deben estar muy separadas en luminosidad, con el brillo estrecho.
- En CSS, el texto dorado es un degradado lineal dorado recortado a las letras con background-clip: text.
- El oro se ve más precioso usado con moderación, sobre un fondo oscuro como negro, azul marino o verde profundo.

Un **degradado dorado** parece metal de verdad cuando cubre un rango amplio de luminosidad: una sombra marrón profunda, un medio ocre apagado, un brillo crema pálido y estrecho, y de vuelta al marrón. El código clásico de partida es `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`. La mayoría de los degradados dorados fallan porque usan dos amarillos y naranjas brillantes sin sombra ni brillo reales, y se leen como pintura naranja y no como metal.

## Códigos de degradado dorado que puedes copiar

- Oro clásico: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)`
- Oro champán: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)`
- Oro rosa: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)`
- Oro antiguo: `linear-gradient(135deg, #2f2210 0%, #7a5c26 30%, #c4a25a 50%, #8a6a2e 68%, #3e2c12 100%)`
- Lámina de oro brillante: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)`
- Luz dorada sobre negro: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)`

Seis oros, cada uno con una sombra oscura y un brillo claro y estrecho. Los cinco primeros son para texto, bordes y formas; el último es un fondo.

- Bronce de sombra: #5c3d12
- Ocre profundo: #7a5418
- Oro viejo: #b8862b
- Oro metálico: #c79a3c
- Brillo pálido: #f3dc9a
- Crema especular: #fff6dc

Los códigos de color del oro detrás del Oro clásico, de la sombra al brillo, más un crema especular para usar solo en una franja, si acaso.

## Por qué tu degradado dorado se ve naranja

En pantalla, el oro es una ilusión hecha de contraste. No hay un píxel dorado, solo marrones y amarillos dispuestos para que el ojo lea una superficie reflectante. Cuando algo sale mal, suele salir mal de una de cuatro maneras.

| Se ve | Por qué | Solución |
| --- | --- | --- |
| Naranja | Tonos medios demasiado rojos y saturados | Desplaza los tonos hacia el ocre amarillento y baja la saturación |
| Amarillo plano | Sin sombra oscura ni brillo pálido | Añade una parada marrón cerca de los extremos y una parada crema en el medio |
| Marrón o turbio | Brillo demasiado oscuro, demasiadas paradas apagadas | Sube el brillo hasta casi crema y estrecha las zonas oscuras |
| Verdoso | Amarillos demasiado fríos, sombras demasiado grises | Calienta las sombras hacia el marrón y no hacia el oliva o el gris |

Los cuatro fallos clásicos del oro y cómo arreglar cada uno.

El problema del naranja es el más común porque el amarillo que eliges en un selector de color suele parecer demasiado pálido, y la gente lo calienta. Resiste: mantén el tono medio en torno al ocre, más o menos donde el amarillo se encuentra con el marrón, y deja que el contraste ponga el brillo. Si lo que quieres en realidad es una mezcla cálida sencilla, [degradado amarillo](https://gradiently.design/es/guide/yellow-gradient) y [degradado naranja](https://gradiently.design/es/guide/orange-gradient) tratan eso directamente.

## Cómo iluminar el oro para que parezca real

1. **Empieza por la sombra** Elige un marrón cálido y profundo. Debe ser lo bastante oscuro como para que el texto blanco se lea sobre él.
2. **Añade un tono medio apagado** Un oro ocre, ligeramente desaturado. Es el color que la gente recordará, así que la mayor parte de la superficie se queda aquí.
3. **Coloca un brillo estrecho** Un crema pálido en una banda fina, descentrada. Cuanto más estrecho, más brillante parece el metal.
4. **Vuelve a la sombra** Vuelve a un ocre más oscuro tras el brillo, para que la luz se lea como un reflejo sobre una superficie curva.
5. **Añade un segundo brillo, más débil** Opcional: un realce más suave cerca del extremo opuesto, como si una segunda luz rozara el borde. Hace que las formas planas se sientan redondeadas.

El oro refleja como cualquier metal pulido, así que se aplica la misma lógica del [efecto de texto cromado](https://gradiently.design/es/guide/chrome-effect), solo que más cálida y con transiciones más suaves. Los degradados dorados con tramos largos y sutiles pueden mostrar bandas tras la compresión; [bandas en los degradados](https://gradiently.design/es/guide/gradient-banding) explica cómo lo evita un grano fino.

## Texto dorado en CSS

```css
.gold {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #c79a3c; /* fallback */
  background: linear-gradient(
    135deg,
    #5c3d12 0%, #b8862b 22%, #f3dc9a 45%,
    #c79a3c 58%, #7a5418 80%, #d6b062 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-rule {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent);
}
```

Texto de titular dorado y un divisor dorado fino. El color de reserva se muestra donde no se admite el recorte con degradado.

Los degradados dorados encajan con tipografías serif y de alto contraste en tamaños grandes. Por debajo de unos 24 píxeles, la sombra y el brillo se difuminan en un marrón uniforme, así que compón el texto pequeño en un tono dorado sólido como `#c79a3c` y comprueba su contraste con el fondo. [Texto con degradado](https://gradiently.design/es/guide/css-gradient-text) trata la compatibilidad de navegadores con la técnica de recorte.

## Degradados dorados en impresión

Un degradado dorado es una imagen de metal, no metal. Impreso con tinta normal de cuatricromía sale como marrones y amarillos que sugieren brillo, lo cual está bien para folletos y carteles pero nunca es realmente reflectante. Para invitaciones, tarjetas de visita y packaging donde importa el brillo real, los impresores usan tintas metálicas o estampación en caliente, y tú entregas la zona dorada como una forma plana aparte en el arte final.

Si imprimes un degradado, espera que salga algo más oscuro y menos vivo que en pantalla. Aviva un poco el brillo, evita los tramos muy largos y sutiles que pueden formar bandas y pide una prueba antes de una tirada grande.

## Diseñar con oro

El oro se lee como precioso cuando es escaso. Un borde fino, un monograma, una palabra en un titular, una línea divisoria: sobre un fondo oscuro de negro, azul marino, granate o verde profundo. Cubre un cartel entero de oro y se vuelve latón. [Degradado negro y dorado](https://gradiently.design/es/guide/black-and-gold-gradient) tiene combinaciones para la pareja más clásica, y [diseño de marca de lujo](https://gradiently.design/es/guide/luxury-design) muestra cómo encaja el oro en una identidad contenida.

Una invitación vertical de gala sobre un fondo oscuro con luz dorada cálida y texto en crema

Una invitación de 5×7 pulgadas: un fondo oscuro con luz metálica cálida y palabras en un crema sereno.

Una publicación vertical de joyería con una frase corta sobre una superficie profunda tocada por luz dorada

Una publicación de joyería donde el oro aparece solo como luz sobre la superficie, nunca como un gran relleno plano.

Para un aspecto cálido que viva detrás de cada diseño en lugar de rehacerse cada vez, busca en el Mercado de Gradiently con palabras de color como «oro cálido» o «bronce». Cada Mark es un fondo vivo con luz y grano, que solo puede tener un propietario a la vez y mantiene su zona más tranquila detrás de tus palabras en cada tamaño.

## FAQ

### ¿Cuál es el mejor código de degradado dorado?

Un buen punto de partida es `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`: sombra marrón, tono medio ocre, brillo pálido y de vuelta a la sombra.

### ¿Qué códigos hex forman un oro metálico?

Combina un bronce oscuro como #5c3d12, un oro viejo como #b8862b, un oro metálico como #c79a3c y un brillo pálido como #f3dc9a.

### ¿Por qué mi degradado dorado se ve naranja?

Los tonos medios son demasiado rojos y saturados. Desplázalos hacia el ocre amarillento, baja la saturación y añade una sombra marrón oscuro y un brillo crema pálido para el contraste.

### ¿Cómo hago texto dorado en CSS?

Aplica un degradado lineal dorado como fondo y luego usa `background-clip: text` y `-webkit-text-fill-color: transparent`, con un `color` dorado sólido como reserva.

### ¿Qué color combina mejor con el oro?

Negro, azul marino, verde profundo, granate y crema cálido. Los fondos oscuros hacen que el oro se vea más brillante y más precioso.