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

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.

El mismo problema del centro gris afecta a cualquier pareja de colores opuestos, y degradados turbios 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.

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.

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 muestra cómo simular el brillo.

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.

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.

.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);
  }
}

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 recoge los umbrales.

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 explica lo que transmite, y los degradados naranjas son su vecino natural.