El color amarillo representa la luz, la alegría y el optimismo. Es el color más brillante del espectro visible y uno de los que primero capta la atención del ojo humano.
El amarillo es el color más brillante del espectro visible. Representa la luz, la alegría y el optimismo, y capta la atención del ojo humano con gran rapidez.
En diseño web, branding y publicidad se utiliza para transmitir energía, creatividad y cercanía, además de destacar elementos importantes sin recurrir a colores más agresivos como el rojo.
El amarillo suele asociarse con conceptos como:
Su significado puede variar según la cultura, aunque generalmente se relaciona con emociones positivas, vitalidad y entusiasmo.
Desde la psicología del color, el amarillo estimula la mente y favorece la creatividad. Es un color que transmite optimismo y dinamismo, por lo que resulta habitual en marcas que desean proyectar una imagen cercana, moderna y enérgica.
Las emociones más habituales que transmite son:
En interfaces digitales suele utilizarse para destacar avisos informativos, promociones o llamadas a la acción cuando se busca un tono amable y llamativo.
Gracias a su alta visibilidad, el amarillo aparece en numerosos ámbitos del diseño. Es especialmente frecuente en:
Su capacidad para atraer la atención hace que sea ideal para destacar información importante sin transmitir sensación de urgencia.
Entre los colores HTML y CSS más utilizados destacan:
| Nombre | Muestra | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Gold | |||||
| GoldenRod | |||||
| Yellow | |||||
| Khaki | |||||
| LemonChiffon | |||||
| LightYellow | |||||
| PaleGoldenRod | |||||
| Moccasin | |||||
| PapayaWhip | |||||
| Cornsilk |
Los amarillos claros transmiten suavidad y calidez, mientras que los tonos dorados aportan elegancia y personalidad.
Colores HTMLEl amarillo combina especialmente bien con colores fríos y neutros que equilibran su luminosidad. Algunas combinaciones muy utilizadas son:
#FFFFFF#111111#1F2937#000080#1E3A8A#808000#228B22#8B4513#F5F5DC#FFA500Dependiendo de la combinación puede conseguir estilos modernos, naturales, elegantes o muy llamativos.
El color complementario del amarillo se encuentra en la zona de los azules dentro del círculo cromático. Esta combinación genera un contraste intenso y equilibrado, muy utilizado en diseño gráfico, interfaces y branding para resaltar botones, iconos o elementos destacados.
El amarillo permite crear armonías muy equilibradas utilizando el círculo cromático. Las armonías de esta página usan la misma lógica que el Círculo cromático y el Generador de paletas de Matizly.
Combina el amarillo con verdes y naranjas para conseguir composiciones cálidas y naturales.
El amarillo junto al azul crea uno de los contrastes visuales más utilizados en diseño.
Sustituye el azul por azul verdoso y azul violáceo, obteniendo una composición más equilibrada.
El amarillo forma una tríada clásica junto al rojo y al azul.
Puede combinarse con azul, rojo y verde para crear composiciones muy ricas visualmente.
Las variaciones se generan con las mismas funciones del estudio Matizly (tintes, tonos y sombras sobre HSL). Las más habituales son:
Tintes (añadiendo blanco)
Tonos (añadiendo gris)
Sombras (añadiendo negro)
Variaciones de saturación
Escalas cromáticas
Estas modificaciones permiten adaptar un mismo amarillo a fondos, avisos y acentos sin perder coherencia visual.
Las paletas con amarillo suelen combinar colores luminosos con tonos neutros para evitar un exceso de saturación. Algunas combinaciones populares son:
3 colores
3 colores
3 colores
3 colores
3 colores
3 colores
Estas combinaciones son habituales en branding, diseño editorial y aplicaciones modernas.
Paletas de coloresEl amarillo es uno de los colores más delicados en accesibilidad debido a su alta luminosidad.
Cuando se utiliza para texto suele necesitar fondos oscuros para cumplir correctamente las recomendaciones WCAG. En cambio, sobre fondos claros es recomendable emplearlo únicamente como color decorativo o de apoyo.
Comprobar el contraste garantiza una mejor experiencia para todos los usuarios.
Texto oscuro / fondo amarillo
13.46:1AA ✓
Texto amarillo / fondo negro
12.33:1AA ✓
Texto negro / fondo limón
17.81:1AA ✓
Texto blanco / fondo dorado
5.02:1AA ✓
El amarillo funciona muy bien en degradados cálidos y luminosos. Algunas combinaciones habituales son:
#FFD700 → #FFA500#FFFF00 → #DAA520#FFD700 → #84CC16#FFD700 → #FFFFFF#FFD700 → #FF7F50#FFD700 → #F59E0BEstos degradados son frecuentes en landing pages, ilustraciones, interfaces modernas y elementos promocionales.
Generador de degradadosEl amarillo se utiliza para aportar luminosidad y destacar elementos importantes sin resultar agresivo. Utilizado con moderación aporta dinamismo, cercanía y una sensación de optimismo que mejora la percepción visual de la interfaz.
El amarillo simboliza optimismo, alegría, creatividad y energía. Es uno de los colores que mejor transmite positividad y vitalidad.
El amarillo combina muy bien con azul marino, negro, blanco, gris oscuro, verde oliva, marrón y beige.
El color complementario del amarillo es el azul, ya que ambos se encuentran enfrentados en el círculo cromático.
Es muy habitual en diseño web, aplicaciones móviles, publicidad, señalización, comercio electrónico, branding y marketing.
Elige cualquier color y copia Hex, RGB, HSL u OKLCH con sombras, matices y armonías.
Probar ahoraExplora paletas listas para usar y guarda tus favoritas en este dispositivo.
Probar ahoraExplora armonías en un círculo interactivo y crea paletas equilibradas desde un color base.
Probar ahora