# Degradado amarillo: códigos luminosos que no se vuelven verdes

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

El amarillo es el color que más a menudo traiciona a un degradado: una parada equivocada y el sol se vuelve lima, o el dorado se vuelve caqui. Por qué pasa y un conjunto de códigos que se mantienen cálidos de principio a fin.

## The short version

- Un degradado amarillo se vuelve verde cuando se funde hacia el cian, el verde azulado o el azul, porque los colores entre el amarillo y el azul pasan por el verde.
- Los amarillos oscuros derivan hacia el oliva y el caqui, así que oscurece el amarillo con ámbar, naranja o marrón en lugar de gris o negro.
- El amarillo se mantiene más soleado cuando sus otras paradas tiran a cálido: crema, melocotón, naranja, rosa o dorado.
- El texto blanco casi nunca funciona sobre amarillo; un casi negro o un marrón profundo se leen mucho mejor.
- Para unir amarillo y azul en una sola mezcla, pon blanco, rosa o violeta entre ellos para que el punto medio nunca caiga en el verde.

Un **degradado amarillo** se ve luminoso y alegre cuando todas sus paradas tiran a cálido: crema, mantequilla, limón, dorado, naranja. Falla de dos maneras previsibles. Fúndelo hacia el azul o el verde azulado y el centro se vuelve verde; oscurécelo con gris y se vuelve oliva. Mantén el tono en el lado cálido del amarillo, oscurécelo con ámbar en vez de negro y seguirá siendo sol de un extremo a otro. Los códigos de abajo se basan en esa regla.

## Por qué los degradados amarillos se vuelven verdes o turbios

El amarillo está justo al lado del verde en el círculo cromático, mucho más cerca de lo que la mayoría cree. Eso lo hace frágil en tres situaciones.

- **Fundirlo hacia colores fríos.** Entre el amarillo y el cian, el verde azulado o el azul, el navegador tiene que pasar por el verde. Una mezcla de amarillo soleado a azul cielo saca una franja lima o salvia en el centro.
- **Oscurecerlo con negro o gris.** Nuestros ojos leen un amarillo oscuro y poco saturado como oliva o caqui, no como «amarillo oscuro». No existe un amarillo profundo que siga pareciendo amarillo.
- **Partir de un limón que ya tira a verde.** Los limones ácidos como `#e4f04a` se ven frescos solos, pero arrastran todas las paradas vecinas hacia el lima.

### Se vuelve verde u oliva

- Amarillo directo a azul cielo o verde azulado
- Amarillo oscurecido con gris o negro
- Un limón frío como parada más clara
- Amarillo a verde sin ninguna parada cálida

### Sigue soleado

- Amarillo hacia crema, melocotón, naranja o rosa
- Amarillo oscurecido con ámbar y marrón
- Un amarillo cálido como `#facc15` como parada más clara
- Blanco o rosa entre el amarillo y el azul

El mismo problema del centro gris afecta a cualquier pareja de colores opuestos, y [degradados turbios](https://gradiently.design/es/guide/muddy-gradients) lo trata en general. El amarillo simplemente lo muestra antes, porque el verde está muy cerca.

## Códigos de degradado amarillo vivo

Estos son los llamativos: verano, banners de rebajas, marcas infantiles, festivales, señalética de aviso bien hecha. Cada uno combina el amarillo con un compañero más cálido para que haya movimiento sin derivar al verde.

- Sorbete de limón: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Girasol: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- De amarillo a mandarina: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Limonada rosa: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Sol de mediodía: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Ola de calor: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Seis degradados amarillos vivos. Cada color compañero es más cálido que el amarillo, y eso es lo que los mantiene limpios.

El amarillo vivo cansa en grandes cantidades, así que úsalo en posts y banners más que en toda una web. En una story de 1080×1920, una mezcla amarilla que se funde en naranja abajo da a la mirada un lugar donde posarse y mantiene la parte más luminosa cerca de la zona del titular, arriba.

## Degradados amarillo claro: mantequilla y crema

Los amarillos pálidos se comportan como un papel cálido. Son fondos excelentes para menús, invitaciones, newsletters y todo lo que tenga mucho texto, porque el texto oscuro reposa cómodo sobre ellos. Deja al menos una parada cerca del blanco para que el amarillo se lea como luz y no como un velo sobre todo.

- Papel crema: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Mantequilla: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Natillas y melocotón: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Luz de ventana: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Amarillos suaves para textos largos y marcas delicadas. Combinan bien con texto carbón, marrón y verde profundo.

## Degradados dorados y amarillo oscuro sin oliva

Para que el amarillo resulte rico, no lo oscurezcas. Desplázalo. Lleva las paradas profundas hacia el ámbar, el ocre y el marrón, y el amarillo se convertirá en dorado, miel y mostaza en vez de caqui. Para acabados metálicos en concreto, [degradados dorados](https://gradiently.design/es/guide/gold-gradient-design) muestra cómo simular el brillo.

- Miel: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Mostaza: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Oro cepillado: `linear-gradient(135deg, #fef3c7 0%, #e9b949 40%, #a16207 75%, #fde68a 100%)`
- Oro sobre oscuro: `radial-gradient(circle at 75% 25%, #fde047 0%, #b45309 30%, #1c1208 75%)`

Cada parada profunda se desplaza hacia el ámbar o el marrón. El resultado se lee como dorado, no como oliva.

> **Cuidado con el color de la sombra** Si sombreas un objeto amarillo en un diseño con una capa gris o negra, parecerá oliva. Sombrea el amarillo con un ámbar o un marrón translúcido.

## Degradados amarillo y azul sin el centro verde

El amarillo y el azul son una pareja clásica, pero una mezcla directa entre ellos produce una franja verde. Tienes tres buenas opciones: poner una parada clara entre ellos, llevar la mezcla por el rosa y el violeta, o mantener los dos colores separados como zonas en vez de como mezcla.

- Evita: centro lima: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Pasando por crema: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Pasando por rosa: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Luz amarilla sobre marino: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

La primera mezcla muestra el problema. Las otras tres unen amarillo y azul sin pasar nunca por el verde.

En el CSS moderno también puedes pedir al navegador que dé la vuelta larga al círculo cromático. Interpolar en OKLCH con `longer hue` lleva el amarillo al azul pasando por el naranja, el rosa y el violeta en lugar del verde. El soporte y la sintaxis están en [degradados CSS en OKLCH](https://gradiently.design/es/guide/css-gradient-oklch).

```css
.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}
```

La ruta larga por el círculo de tonos evita el verde. Conserva la alternativa hecha a mano para navegadores sin interpolación de espacios de color.

## Texto sobre un degradado amarillo

El amarillo es el color saturado más claro que existe, así que el texto blanco desaparece sobre él. El blanco sobre `#facc15` da aproximadamente 1,5 a 1, mientras que un marrón profundo como `#422006` supera 9 a 1 sobre el mismo amarillo. Usa texto oscuro casi en todas partes y reserva el blanco para los dorados más profundos. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) recoge los umbrales.

| Fondo | Texto blanco | Texto marrón #422006 |
| --- | --- | --- |
| Limón `#fde047` | Suspende con creces | Unos 11:1 |
| Girasol `#facc15` | Unos 1,5:1, suspende | Unos 9,5:1 |
| Dorado oscuro `#ca8a04` | Unos 2,9:1, suspende | Aprueba |
| Ocre `#a16207` | Unos 4,9:1, aprueba | Débil |
| Bronce `#854d0e` | Unos 6,9:1, aprueba | Suspende |

Mediciones sobre color plano. En un degradado, comprueba la zona más clara detrás de cada línea de texto.

Un post de una tienda de granja con el titular en marrón oscuro sobre un degradado cálido amarillo y naranja

Texto oscuro y cálido sobre un amarillo soleado. Se lee al instante y conserva el ánimo alegre.

En Gradiently, la tinta automática decide por ti, eligiendo texto claro u oscuro para cada línea a partir de la propia paleta del Mark, así que un diseño amarillo no necesita una comprobación manual de contraste cada vez que lo redimensionas. Si el amarillo forma parte de tu identidad, [significado del color amarillo](https://gradiently.design/es/guide/yellow-color-meaning) explica lo que transmite, y los [degradados naranjas](https://gradiently.design/es/guide/orange-gradient) son su vecino natural.

## FAQ

### ¿Por qué mi degradado amarillo se ve verde?

O bien se funde hacia un color frío como el azul o el verde azulado, o bien el propio amarillo tira a limón. Usa paradas compañeras más cálidas como naranja, rosa o crema.

### ¿Cómo hago un degradado amarillo oscuro que no sea oliva?

Oscurece el amarillo con ámbar, ocre y marrón en lugar de gris o negro. Así se convierte en dorado o miel en vez de caqui.

### ¿Qué color de texto va sobre un fondo amarillo?

Casi negro, carbón o marrón profundo. El texto blanco suspende el contraste en casi cualquier amarillo vivo.

### ¿Cómo mezclo amarillo y azul en un degradado?

Pon crema, blanco o rosa entre ellos, o interpola en OKLCH con `longer hue` para que la mezcla pase por colores cálidos en vez de por el verde.

### ¿Qué código CSS de degradado amarillo es bueno?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` es un amarillo cálido fiable que nunca deriva al verde.