# Degradado naranja: 25 códigos cálidos, del melocotón al quemado

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

El naranja es uno de los colores más cálidos que puedes poner en una pantalla, y uno de los más fáciles de estropear. Aquí tienes 25 mezclas para copiar agrupadas por ambiente, más las combinaciones y reglas tipográficas que las hacen funcionar.

## The short version

- Un degradado naranja se percibe cálido, cercano y enérgico, y su ambiente cambia mucho según lo claros u oscuros que sean los naranjas.
- El naranja se funde limpiamente con sus vecinos: amarillo, ámbar, rojo, rosa y marrón.
- Mezclar el naranja directamente con azul o verde azulado suele producir un centro gris o turbio, así que mantén los complementarios como un acento aparte.
- El texto blanco no alcanza el contraste necesario sobre un naranja vivo como #f97316; usa ahí texto casi negro o marrón oscuro, o pasa el texto blanco a naranja quemado o más oscuro.
- Los fondos oscuros con una sola luz naranja parecen premium, mientras que las mezclas de melocotón pálido encajan con marcas cotidianas y amables.

Un **degradado naranja** mezcla dos o más naranjas, a menudo con un amarillo, un rojo o un rosa vecinos, y pocas mezclas resultan más cálidas. Las versiones claras de melocotón y albaricoque son suaves y acogedoras, la mandarina viva es llamativa y desenfadada, y el naranja quemado o el óxido son terrosos y maduros. Abajo tienes 25 códigos agrupados por esos ambientes, seguidos de con qué combinarlos y cómo poner texto encima sin perder tus palabras.

## Degradados naranjas suaves: melocotón y albaricoque

Los naranjas pálidos son la forma más amable de entrar en este color. Están cerca de la piel, del pan y de la luz de última hora de la tarde, por eso los usan tanto panaderías, cosmética y marcas infantiles. Haz que la parada más clara sea casi crema, para que la mezcla tenga un sitio tranquilo donde descansar. Para un artículo entero sobre el extremo más pálido, mira los [degradados melocotón](https://gradiently.design/es/guide/peach-gradient).

- De crema a albaricoque: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Albaricoque suave: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Piel de melocotón: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Luz de mañana: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- De mantequilla a melón: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Cinco degradados naranjas pálidos. Todos empiezan cerca del crema, así que siempre hay una zona tranquila para texto oscuro.

## Degradados naranjas vivos: mandarina y cítricos

El naranja saturado es pura energía. Encaja con rebajas, comida a domicilio, deporte, festivales y todo lo que tenga que verse al tamaño de una miniatura. El riesgo es que el naranja vivo se aplane en un único bloque estridente, así que dale una parada más clara hacia el amarillo o una más profunda hacia el rojo. Ese pequeño cambio es lo que hace que parezca luz y no pintura.

- Mandarina: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Explosión cítrica: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- De naranja a sandía: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Punto caliente: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- De naranja a limón: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Los naranjas vivos funcionan mejor con una parada que tire a amarillo o a rosa. Así la mezcla se lee como luz y no como un relleno plano.

## Degradados naranjas de atardecer y ámbar

Llevar el naranja en vertical, del dorado arriba al rojo o ciruela abajo, te da un atardecer, probablemente el degradado más conocido que existe. Las mezclas ámbar son su prima más discreta: tonos miel, mermelada y whisky que resultan ricos sin gritar. Si quieres el cielo completo, los [degradados de atardecer](https://gradiently.design/es/guide/sunset-gradient) van más allá.

- Atardecer clásico: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Crepúsculo: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Ámbar miel: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Mermelada: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Última luz: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Las mezclas verticales se leen como cielo. Pon el color más claro arriba y el del horizonte abajo.

## Degradados naranja quemado y óxido

Lleva el naranja hacia el marrón y se convierte en terracota, óxido y cobre: colores de macetas de barro, hojas de otoño y cuero viejo. Resultan artesanales y meditados, así que encajan con interiorismo, café, cerámica, marcas outdoor y todo lo que tenga una historia hecha a mano. Además, sostienen el texto blanco mucho mejor que el naranja vivo.

- Naranja quemado: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terracota: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Cobre: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Óxido: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- De arcilla a corteza: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Los naranjas quemados están cerca del marrón. Son más tranquilos, más cálidos y funcionan mejor detrás de texto blanco.

## Luz naranja sobre fondo oscuro

La forma más premium de usar el naranja es con moderación. Parte de un casi negro, un marrón profundo o un azul marino, y deja que un único naranja brille desde una esquina como una brasa o una farola. Es el tratamiento para eventos nocturnos, restaurantes, música y todo lo que deba resultar cálido de noche. Las mezclas oscuras forman bandas con facilidad, así que lee [fondos degradados oscuros](https://gradiently.design/es/guide/dark-gradient-backgrounds) antes de exportar.

- Brasa: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Junto al fuego: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Farola sobre azul marino: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Carbón y cobre: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Resplandor en el horizonte: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

Una luz naranja y mucha oscuridad. El fondo crea el ambiente; el naranja solo tiene que brillar.

## Colores que combinan con un degradado naranja

El naranja tiene dos tipos de buena pareja. Los vecinos, como el amarillo, el rosa y el rojo, se funden directamente con él. Los opuestos, como el azul profundo y el verde azulado, lo hacen vibrar, pero deben ir junto al naranja como acento, no dentro de la misma mezcla, porque el punto medio entre ellos se vuelve gris. [Degradados turbios](https://gradiently.design/es/guide/muddy-gradients) explica por qué, y [colores complementarios](https://gradiently.design/es/guide/complementary-colors) muestra cómo aprovechar esa tensión sin riesgo.

- Crema: #fff7ed
- Albaricoque: #fdba74
- Mandarina: #f97316
- Óxido: #9a3412
- Tinta corteza: #431407
- Acento azul profundo: #1e3a8a
- Acento verde azulado: #0f766e

Una paleta naranja práctica: un fondo crema, tres naranjas, un marrón oscuro para el texto y dos acentos fríos fuera de la mezcla.

## Texto sobre degradados naranjas

Aquí es donde fallan la mayoría de los diseños en naranja. El blanco sobre mandarina viva parece rotundo, pero tiene una relación de contraste de unos 2,8 a 1, muy por debajo del 4,5 a 1 que pide WCAG para el texto de cuerpo. El casi negro sobre el mismo naranja supera el 6 a 1. La regla es sencilla: texto oscuro sobre naranjas claros y vivos, texto blanco solo del naranja quemado hacia abajo. El método completo está en [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility).

| Fondo | Texto blanco | Texto oscuro #1c1917 |
| --- | --- | --- |
| Albaricoque `#fdba74` | No cumple | Cumple de sobra |
| Mandarina `#f97316` | Unos 2,8:1, no cumple | Unos 6,2:1, cumple |
| Naranja intenso `#ea580c` | Unos 3,6:1, solo texto grande | Cumple |
| Naranja quemado `#c2410c` | Unos 5,2:1, cumple | Flojo |
| Óxido `#9a3412` | Unos 7,3:1, cumple | No cumple |

Contraste medido sobre color plano. En un degradado, prueba el punto más claro que haya detrás de tus palabras.

Publicación de rebajas de una panadería con un degradado naranja cálido justo detrás del titular, que cuesta leer

Cuando el naranja más vivo pasa justo detrás del titular, las palabras empiezan a pelearse con el color.

La misma publicación de rebajas de una panadería con una zona más tranquila y profunda del degradado detrás de un titular claro

La misma publicación con una zona más tranquila detrás de las palabras y el color del texto elegido para ella.

Gradiently se encarga de esta parte por ti. Un Mark sabe dónde están las palabras: coloca su zona más tranquila detrás de ellas y la Tinta automática elige texto claro u oscuro línea a línea a partir de la propia paleta del Mark, así que un diseño naranja sigue siendo legible a cualquier tamaño sin cajas ni sombras.

## Degradado naranja en CSS

Cada código de arriba es un único valor CSS que puedes pegar en `background`. Para una sección que necesite calidez y profundidad a la vez, superpón una luz radial a una base lineal y define siempre un color sólido de reserva. Lee [degradados lineales en CSS](https://gradiently.design/es/guide/css-linear-gradient) para la sintaxis completa.

```css
.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}
```

Una luz albaricoque viva sobre una base de mandarina a óxido. Coloca el titular abajo a la izquierda, donde el color es más profundo.

Si quieres un estilo naranja que nadie más esté publicando, explora el Mercado en busca de Marks cálidos: busca palabras como «naranja quemado» o «albaricoque», diseña gratis con cualquiera sin reservar y resérvalo si se convierte en tu marca.

## FAQ

### ¿Qué colores combinan con un degradado naranja?

El amarillo, el rosa, el rojo y el marrón se funden directamente con el naranja. El azul profundo y el verde azulado son buenos acentos, pero mantenlos junto al naranja y no dentro de la misma mezcla.

### ¿Cuál es el código hex del naranja quemado?

No hay un código oficial único, pero `#c2410c` y `#cc5500` se usan mucho. Un degradado naranja quemado como `linear-gradient(135deg, #ea580c, #9a3412)` le da profundidad.

### ¿Puedo poner texto blanco sobre un degradado naranja?

Solo sobre los naranjas más oscuros. El blanco sobre mandarina viva no alcanza el contraste, así que usa ahí casi negro y reserva el texto blanco para el naranja quemado, el óxido y tonos más oscuros.

### ¿Por qué mi degradado naranja y azul se ve gris en el centro?

El naranja y el azul están en lados opuestos del círculo cromático, así que los colores intermedios pierden saturación. Añade una parada rosa o morada entre ellos, o mantenlos como zonas separadas.

### ¿Qué dice un degradado naranja de una marca?

El naranja suele percibirse cálido, cercano, desenfadado y asequible. Las versiones más oscuras y quemadas lo llevan hacia el oficio y la seguridad.