# Significado del color amarillo: sol, precaución y diseño legible

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

El amarillo es el color más luminoso del círculo cromático, y eso lo hace alegre, urgente y casi imposible para el texto blanco. Esto es lo que significa el amarillo, tono a tono, y cómo diseñar con él.

## The short version

- El amarillo se asocia con el sol, la calidez, el optimismo, la alegría y la atención, y también con la precaución y el aviso.
- El amarillo es el color saturado más claro, por eso se usa en autobuses escolares, taxis, ropa de alta visibilidad y señales de advertencia.
- El texto blanco sobre amarillo es casi ilegible, mientras que el negro sobre amarillo puro alcanza un contraste de 19,56:1, de los más altos posibles.
- Oscurecer el amarillo con negro lo vuelve oliva, así que los amarillos más profundos como el mostaza y el dorado se consiguen desplazándolo hacia el naranja y el marrón.
- El amarillo fue históricamente el color imperial en China, y el azafrán y el amarillo intenso tienen un significado sagrado en el hinduismo y el budismo.

El **significado del color amarillo** es, ante todo, el sol: calidez, optimismo, alegría y energía. Como el amarillo es el más claro y llamativo de los colores saturados, también significa atención y precaución, de las rayas de una avispa a una señal de tráfico. En branding se percibe como cercano, asequible y animado. Bien usado, es inolvidable. Usado sin cuidado, es el color con más probabilidades de hacer ilegible el texto, y por eso esta guía dedica tanto espacio al contraste como al significado.

## Qué significa el amarillo

- **Sol y calidez:** el color de la luz del sol, el verano y la fruta madura, así que resulta luminoso y generoso.
- **Optimismo y alegría:** las caras sonrientes, los girasoles y los envases alegres se apoyan en él.
- **Atención:** los subrayadores amarillos, las notas adhesivas y las etiquetas de precio existen porque el amarillo se ve.
- **Precaución:** la cinta de peligro, las señales de advertencia y las rayas negras y amarillas que comparten avispas, abejas y naves industriales.
- **Menos favorecedor:** en inglés, «yellow» puede significar cobarde, y los amarillos pálidos y enfermizos pueden sugerir enfermedad o vejez.

Como con cualquier color, estas asociaciones son aprendidas y dependen del contexto. Un amarillo mantequilla suave en una caja de pastelería y un amarillo de peligro en una señal de obras son el mismo tono con mensajes opuestos; la [psicología del color](https://gradiently.design/es/guide/color-psychology) explica por qué.

## Qué significa cada tono de amarillo

| Tono | Hex de ejemplo | Suele transmitir | Habitual en |
| --- | --- | --- | --- |
| Limón | `#FFF44F` | Fresco, ácido, juguetón | Bebidas, marcas infantiles, verano |
| Girasol | `#FFD60A` | Optimista, cercano, audaz | Comercio, reparto, comida |
| Azafrán | `#F4C430` | Cálido, especiado, espiritual | Comida, viajes, ceremonias |
| Ámbar | `#FFBF00` | Precaución, calidez, resplandor | Señales, iluminación, cerveza |
| Mostaza | `#E1AD01` | Vintage, seguro, terroso | Moda, interiorismo, café |
| Dorado | `#D4A017` | Prestigio, recompensa, celebración | Premios, lujo, bodas |
| Mantequilla | `#FFF1B8` | Suave, hogareño, delicado | Panaderías, productos para bebés, papelería |

Siete amarillos. Cuanto más pálido y verdoso es el amarillo, más fresco resulta; cuanto más profundo y anaranjado, más cálido y adulto.

- Limón: #fff44f
- Girasol: #ffd60a
- Azafrán: #f4c430
- Ámbar: #ffbf00
- Mostaza: #e1ad01
- Dorado: #d4a017
- Mantequilla: #fff1b8

Los tonos de la tabla uno junto a otro. Todos necesitan texto oscuro.

## El amarillo y la legibilidad

El amarillo es casi tan claro como el blanco, así que se comporta como un fondo claro, por estridente que parezca. El texto blanco sobre girasol `#FFD60A` da 1,41:1, muy por debajo del 4,5:1 que WCAG pide para el texto principal. El amarillo puro sobre blanco es peor, 1,07:1: casi invisible. Dale la vuelta y el amarillo se convierte en uno de los mejores fondos que existen: el negro sobre amarillo puro alcanza 19,56:1.

### Evita

- Texto blanco sobre cualquier amarillo
- Texto amarillo sobre una página blanca
- Texto dorado `#D4A017` sobre blanco, solo 2,38:1
- El amarillo como única señal de un aviso

### Haz

- Texto casi negro o marrón profundo sobre amarillo
- El amarillo como fondo, franja o resaltado
- Dorado oscuro `#8A6D00` para texto sobre blanco, 4,92:1
- Una palabra o un icono de aviso junto al amarillo

Cualquier amarillo de este artículo aprueba con holgura con un casi negro: mostaza con `#111111` alcanza 9,15:1, y mantequilla con marrón profundo `#3A2E05` alcanza 11,78:1. [Contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility) explica los umbrales.

## Por qué el amarillo oscuro se vuelve verde y cómo evitarlo

Si añades negro al amarillo no obtienes un amarillo más profundo, sino oliva. Por eso los amarillos profundos como el mostaza, el dorado y el ámbar se consiguen desplazando el tono hacia el naranja y añadiendo un toque de marrón. Lo mismo vale para los degradados amarillos: haz que el extremo oscuro pase por el ámbar y el sombra tostada, no por el gris.

- Oscurecido con negro: oliva: `linear-gradient(160deg, #fff44f 0%, #8a8a1f 55%, #2a2a10 100%)`
- Oscurecido pasando por ámbar: dorado: `linear-gradient(160deg, #fff44f 0%, #ffbf00 45%, #b45309 80%, #3b1d06 100%)`
- Resplandor azafrán: `radial-gradient(circle at 30% 25%, #fff1b8 0%, #f4c430 50%, #9a5b0a 100%)`
- De girasol a naranja: `linear-gradient(135deg, #ffd60a 0%, #ff8a00 100%)`

El primer degradado muestra el problema: el amarillo oscurecido hacia el negro deriva al verde. El segundo lo corrige pasando por el ámbar y el sombra tostada.

[Matices, tonos y sombras](https://gradiently.design/es/guide/tints-tones-shades) explica por qué el amarillo se comporta así, y [degradados amarillos](https://gradiently.design/es/guide/yellow-gradient) tiene más códigos basados en el mismo principio.

## El significado del amarillo en distintas culturas

- **China:** el amarillo fue históricamente el color imperial, reservado al emperador, y aún transmite dignidad.
- **Hinduismo y budismo:** el azafrán y el amarillo intenso tienen un significado sagrado, visible en las túnicas de muchos monjes budistas.
- **Ciclismo:** el líder del Tour de Francia viste el maillot amarillo, el maillot jaune.
- **Norteamérica:** los autobuses escolares amarillos y los lazos amarillos, señal de esperanza por el regreso de alguien.
- **En todas partes:** la combinación negra y amarilla de las señales de advertencia se lee como precaución en casi todo el mundo.

Para el amarillo junto al rojo, el blanco y el negro, mira [el significado de los colores en distintas culturas](https://gradiently.design/es/guide/color-meanings-around-the-world).

## El amarillo en el branding

Las marcas amarillas parecen cercanas, rápidas y accesibles, por eso el amarillo es habitual en reparto, comercio low cost, comida rápida y productos infantiles. Como es tan estridente, las identidades amarillas más fuertes lo usan como campo con texto negro, o como un único acento entre neutros. Una página entera de amarillo detrás de fotos amarillas cansa la vista enseguida.

Buenos compañeros son el carbón y el negro para dar fuerza, el azul marino y el cobalto para un contraste seguro, y el crema cálido o la terracota para una sensación más suave y soleada. Combinar el amarillo con otros colores estridentes es posible, pero sigue las reglas de [paletas de colores vivos](https://gradiently.design/es/guide/bright-color-palettes) para que el texto siga teniendo un lugar tranquilo donde apoyarse.

Un post vertical de cafetería en amarillo soleado y cálido con una sola palabra grande y oscura

Un post de Instagram a 1080×1350. Amarillo cálido con texto oscuro: cercano y legible de un extremo al otro del feed.

Un pin alto de evento en tonos ámbar y dorado que anuncia un mercado al atardecer

Un pin de Pinterest a 1000×1500 donde el ámbar y el dorado profundos se leen como la luz cálida del atardecer.

Los fondos amarillos son donde la tinta automática de Gradiently demuestra su valor: un Mark elige texto claro u oscuro línea a línea a partir de su propia paleta, así que el texto sobre un Mark amarillo nunca acaba en blanco sobre sol. Con Pro, el mismo diseño se redimensiona a todos los formatos en un paso y el texto sigue siendo legible.

## FAQ

### ¿Qué significa el color amarillo?

El amarillo se asocia con el sol, el optimismo, la alegría, la energía y la atención. También indica precaución, y en inglés puede significar cobardía.

### ¿Qué significa el amarillo mostaza?

El mostaza transmite un aire vintage, cálido y seguro. Es la cara adulta del amarillo, habitual en moda, interiorismo y marcas de café.

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

Casi negro o un marrón profundo. El texto blanco sobre amarillo falla el contraste con creces, mientras que el negro sobre amarillo puro alcanza 19,56:1.

### ¿Por qué el amarillo oscuro parece verde?

Añadir negro al amarillo lo desplaza hacia el oliva. Para un amarillo más profundo, mueve el tono hacia el naranja y añade un poco de marrón.

### ¿El amarillo es un buen color de marca?

El amarillo es memorable y cercano, y encaja con marcas de reparto, comida, comercio e infantiles. Combínalo con texto oscuro y úsalo como campo o acento, no en todas partes.