20 paletas de colores amarillo y azul: códigos hex y consejos

Una paleta de colores azul y amarillo es una de las formas más sencillas de conseguir contraste instantáneo y, a la vez, mantener una sensación amigable. El amarillo aporta calidez y atrae la atención, mientras que el azul añade estructura tranquila y confianza.

A continuación encuentras 20 ideas frescas de paletas azul y amarillo (con códigos HEX) que puedes usar para branding, interfaces, carteles, embalajes e impresos, además de consejos rápidos para legibilidad y accesibilidad.

Por qué funcionan tan bien las paletas azul y amarillo

El amarillo y el azul se equilibran naturalmente: el amarillo transmite energía y optimismo, mientras que el azul se percibe sólido y confiable. Juntos, generan una jerarquía visual clara—perfecta para diseños que necesitan amabilidad y estructura.

Desde el punto de vista de la usabilidad, muchas combinaciones de amarillo y azul ofrecen una fuerte separación entre acentos y bases. Esto facilita resaltar llamadas a la acción, etiquetas y estados importantes de interfaz, sin sobrecargar la página.

En impresión y branding, este dúo también es flexible: puede parecer costero y casual, sofisticado y náutico, o moderno y tecnológico según los tonos y neutros que elijas.

Más de 20 ideas de paletas azul y amarillo (con códigos HEX)

1) Puerto Soleado

HEX: #FFD166 #0B4F6C #1B98E0 #F6F7EB #2E2D4D

Sensación: costero, optimista, fresco

Mejor para: banner principal en web de viajes

Costero y optimista, transmite la sensación de sol sobre un muelle con agua profunda al fondo. Usa el amarillo brillante para llamadas a la acción y el azul marino oscuro para titulares para priorizar la legibilidad. Combina con mucho espacio en blanco y tonos neutros claros para evitar ruido visual. Consejo: reserva el azul vivo para estados hover para que la interfaz siga sintiéndose tranquila.

Ejemplo de imagen de puerto soleado generado con media.io

Media.io

Media.io es un estudio online de IA para crear y editar vídeo, imagen y audio en tu navegador.

Pruébalo gratis ahora

2) Denim Limón

HEX: #FFE66D #2B59C3 #1E2A78 #F7F3E3 #3A3A3A

Sensación: casual, juvenil, seguro

Mejor para: lookbook de marca streetwear

Casual y juvenil, evoca camisetas desteñidas por el sol con denim oscuro y costuras nítidas. Estas combinaciones de azul y amarillo funcionan bien para tipografía audaz, insignias y precios resaltados sin ser excesivas. Equilibra el contraste con fondos blanco roto y texto color carbón para dar un acabado más editorial. Consejo: usa el amarillo en pequeños elementos para que los azules profundos tengan protagonismo.

Ejemplo de imagen de denim limón generado con media.io

3) Postal de la Riviera

HEX: #FFC857 #3A86FF #023047 #E5F4FF #FFFAE1

Sensación: soleado, retro, fresco

Mejor para: cartel de evento de verano

Soleado y un poco retro, evoca cielos de postal, sombrillas de playa y sellos de viaje llamativos. El azul claro funciona como fondo aireado y el marino le da firmeza a tu tipografía. Combina con formas geométricas sencillas y una sola fuente display para mantener un estilo divertido, no recargado. Consejo: añade un borde fino azul marino al cartel para enmarcarlo y mejorar la legibilidad.

Ejemplo de imagen de postal de la riviera generado con media.io

4) Cielo de la Hora Dorada

HEX: #FFB703 #219EBC #8ECAE6 #FBF8CC #2B2D42

Sensación: cálido, aireado, motivador

Mejor para: interfaz de app de bienestar

Cálido y ligero, recuerda la luz de última hora de la tarde entrando en un cielo despejado. Usa los azules suaves para paneles y tarjetas, e integra los tonos dorados en anillos de progreso y acciones clave. Combina con iconos lineales sencillos y espacios generosos para una experiencia relajante. Consejo: mantén el texto en carbón para cumplir con el contraste en fondos azul claro.

Ejemplo de imagen de cielo de la hora dorada generado con media.io

5) Cítrico Náutico

HEX: #F9C74F #003049 #669BBC #FDF0D5 #2F3E46

Sensación: clásico, marítimo, sólido

Mejor para: diseño de menú de restaurante

Clásica y marítima, inspira detalles en latón, delantales azul marino y toques cítricos en la barra. El neutro crema hace que la página se sienta premium, mientras que el amarillo destaca especiales y secciones. Combina con encabezados con serif y divisores mínimos para un menú pulido. Consejo: limita el azul medio a pequeños íconos o viñetas para que el marino siga siendo el ancla principal.

Ejemplo de imagen de cítrico náutico generado con media.io

6) Plano Ranúnculo

HEX: #FDE74C #1D4E89 #0B132B #EAF2FF #5BC0BE

Sensación: enérgico, técnico, moderno

Mejor para: landing page de SaaS

Enérgico y técnico, asemeja notas adhesivas brillantes sobre un plano. Esta paleta azul y amarillo es ideal para destacar funciones, íconos y sellos de confianza cuando buscas claridad inmediata. Combina con blanco frío y sombras sutiles para estilo centrado en el producto. Consejo: usa el teal como acento secundario, así el contraste principal permanece consistente.

Ejemplo de imagen de plano ranúnculo generado con media.io

7) Surf Azafrán

HEX: #F6BD60 #2D6CDF #00A6FB #F7EDE2 #1B1B3A

Sensación: deportivo, brillante, animado

Mejor para: cartel deportivo

Deportivo y animado, evoca la energía de tablas de surf, camisetas y arena calentada por el sol. Los tonos eléctricos de azul dan movimiento e impacto, mientras el cálido azafrán hace que el look sea amigable. Combina con tipografía condensada y formas de alto contraste para máxima legibilidad a distancia. Consejo: pon el fondo en blanco roto y deja el índigo oscuro para el texto pequeño.

Ejemplo de imagen de surf azafrán generado con media.io

8) Canario Tinta

HEX: #FFEA00 #1F2A44 #3E5C76 #F8F9FA #0D1321

Sensación: alto contraste, editorial, elegante

Mejor para: plantilla de newsletter de noticias

Alto contraste y editorial, evoca un resaltador brillante sobre una página de tinta oscura. Usa el amarillo canario para etiquetas, avisos y enlaces clave para escaneo fácil. Combina con tipografía sans-serif y espacios estrictos para un diseño preciso. Consejo: evita grandes bloques amarillos; un pequeño acento es suficiente para guiar la atención.

Ejemplo de imagen de canario tinta generado con media.io

9) Pizarra Narcisos

HEX: #FFD500 #4A6FA5 #166088 #E8EDF2 #3A3F44

Sensación: práctico, calmado, confiable

Mejor para: presentación corporativa

Práctico y tranquilo, evoca un espacio de trabajo seguro con un toque de optimismo. Los tonos pizarra mantienen gráficos y tablas claros, mientras los acentos amarillos destacan puntos clave. Combina con datos simples y uso restringido de iconografía para una presentación pulida. Consejo: usa el gris más oscuro para cuerpo de texto y reserva el azul para encabezados y series de gráficos.

Ejemplo de imagen de pizarra de narciso generado usando media.io

10) Mango Cobalto Pop

HEX:#FFBE0B#3F37C9#4361EE#F3F0FF#1B263B

Sensación:Atrevido, juguetón, de alto impacto

Mejor para:Anuncio de lanzamiento del producto

Atrevido y juguetón, se siente como una señalización de neón contra un cielo nocturno. Las combinaciones de color amarillo y azul como estas son excelentes para anuncios de lanzamiento donde necesitas un contraste inmediato y un borde moderno. Combine con tipos grandes, formas simples y un montón de espacio negativo para que los colores hablen. Consejo: Mantenga las sombras sutiles y confíe en la marina profunda para la estructura.

Ejemplo de imagen de mango cobalt pop generado usando media.io

11) Arena cálida y mar

HEX:#F4D35E#2E86AB#0A2342#FFFBEA#7A7A7A

Sensación:Relajado, natural, acogedor

Mejor para:branding de hoteles boutique

Relajado y acogedor, recuerda la arena iluminada por el sol, el vidrio del mar y el agua profunda de la tarde. El amarillo cálido se lee como hospitalidad y bienvenida, mientras que el azul marino agrega un tono premium a logotipos y papelería. Combínalo con papel texturizado o grano sutil para inclinarse en la sensación boutique. Consejo: Utilice el gris para la copia secundaria para que la paleta permanezca suave y equilibrada.

Ejemplo de imagen de arena cálida y mar generado usando media.io

12) Autobús escolar y Oxford

HEX:#FFD60A#001D3D#003566#E9ECEF#212529

Sensación:Autoritario, deportivo, atemporal

Mejor para:Póster del club universitario

Autoritario y atemporal, canaliza pancartas universitarias y señalización nítida del campus. El fuerte color marino hace que los encabezados se sientan oficiales, mientras que el amarillo brillante mejora la visibilidad de fechas y ubicaciones. Combine con fuentes bloqueadas sin serif y una cuadrícula simple para un diseño seguro. Consejo: evitar líneas finas de color amarillo; Utilice trazos más gruesos para que se mantenga legible desde lejos.

Ejemplo de imagen de Autobús escolar & oxford generado usando media.io

13) Ceruleo de miel

HEX:#FFC145#2D9CDB#1B4F72#FDF6E3#2C3E50

Sensación:Amigable, brillante, pulido

Mejor para:Página de la categoría de comercio electrónico

Amigable y pulido, se siente como una lluvia de miel sobre cerámica limpia con una brillante salpicadura de cielo. El cerulean es perfecto para enlaces, filtros y estados de navegación, mientras que el tono de miel llama la atención a las ofertas. Combínalo con fondos cálidos de color blanco para mantener las fotos del producto con un aspecto natural. Consejo: Utilice el azul oscuro para el texto de precio para mantener el contraste en las secciones pálidas.

Ejemplo de imagen de ceruleo de miel generado usando media.io

14) Picnic Pastel

HEX:#FFF3B0#A9D6E5#2C7DA0#FAFAFA#6C757D

Sensación:Suave, aireado, accesible

Mejor para:Invitación de la ducha del bebé

Suave y aireado, evoca una manta de picnic, un cielo claro y un suave sol de la tarde. Utilice el amarillo pastel para bordes y motivos pequeños, luego apoyarse en el azul medio para nombres y detalles clave. Combinar con arte de líneas delicadas y tipografía redondeada para un tono cálido y acogedor. Consejo: Mantenga el gris para la información secundaria para que el texto principal permanezca nítido.

Ejemplo de imagen de pastel picnic generado usando media.io

15) Tecnología Solar

HEX:#FFE45E#00509D#003F88#F5F7FF#2D3142

Sensación:Limpio, futurista, seguro

Mejor para:UI de la aplicación móvil fintech

Limpio y futurista, trae a la mente brillantes luces de estado contra un panel de control profundo. Una paleta de colores amarillo y azul como esta se adapta a las pantallas fintech donde la claridad y la confianza importan. Combínalo con blancos fríos, divisores finos y pesos de iconos consistentes para un sistema ordenado. Consejo: use el amarillo solo para los estados de éxito y acciones primarias para mantener la interfaz de usuario disciplinada.

Imagen Ejemplo de tecnología solar generada usando media.io

16) Porcelana de girasol

HEX:#FFDD57#4D96FF#1E3A8A#FFFDF7#374151

Sensación:Fresco, ordenado, moderno-clásico

Mejor para:Embalaje de utensilios de cocina

Fresco y ordenado, se siente como girasoles brillantes junto a porcelana brillante. Utilice el blanco y el amarillo suave para limpiar el espacio de embalaje, y introduzca el azul más fuerte para las etiquetas y los nombres de los productos. Combine con patrones mínimos y jerarquía clara para que lea premium, no ocupado. Consejo: Mantenga los códigos de barras y el texto legal en gris oscuro para evitar bloqueos de contraste duros.

Ejemplo de imagen de porcelana de girasol generada usando media.io

17) Puerto deportivo brumoso

HEX:#FEEA5A#5BC0EB#145DA0#E6F6FF#22333B

Sensación:Fresco, brisante, refrescante

Mejor para:Folleto del club de vela

Fresco y ventoso, sugiere niebla temprana en la mañana sobre los muelles y agua clara más allá. El azul pálido es ideal para paneles de folletos grandes, mientras que el azul más profundo mantiene los titulares y los títulos legibles. Combínalo con un montón de espacios en blanco y iconos náuticos simples para una lectura fácil. Consejo: Utilice el amarillo como señal de navegación para secciones y números de página.

Ejemplo de imagen de misty marina generado usando media.io

18) Punchazo primario Retro

HEX:#FFD23F#2E55FF#0A1F44#FFFCF2#E76F51

Sensación:retro, Puñetazo, Juguetón

Mejor para:Póster del festival de Música

Retro e impactante, se siente como carteles serigrafados y neón nocturno. Las combinaciones de color amarillo y azul brillan aquí cuando se desea una jerarquía ruidosa y una rápida búsqueda de rutas para las etapas y los tiempos. Combinar con tipos gruesos, texturas de medio tono y un conjunto limitado de formas para mantenerlo cohesivo. Consejo: Usa el naranja como tercer acento solo para los headliners para que se mantenga especial.

Ejemplo de imagen de retro primary punch generado usando media.io

19) Rayo de sol de la hora azul

HEX:#FFCC33#1D3557#457B9D#A8DADC#F1FAEE

Sensación:Cinematográfico, tranquilo, reflexivo

Mejor para:Diseño de portada de libro

Cinematográfica y tranquila, evoca el momento justo después de la puesta del sol cuando un último rayo cálido atraviesa el aire fresco. Utilice el azul oscuro para el título y el nombre del autor, luego agregue el amarillo como un pequeño elemento focal o emblema. Combinar con degradados suaves y ilustraciones discretas para una sensación literaria. Consejo: Mantenga la menta ligera para el espacio de fondo para que la cubierta no se sienta pesada.

Ejemplo de imagen del rayo solar de la hora azul generado usando media.io

20) Mínimo costero

HEX:#F7D154#0F4C81#3B82F6#FFFFFF#111827

Sensación:Mínimo, moderno, luminoso

Mejor para:Logotipo de inicio y kit de marca

Mínimo y moderno, se siente como un estudio blanco limpio con una fuerte salpicadura de sol y mar. El azul marino y casi negro proporcionan una base sólida para los logotipos, mientras que el azul más brillante puede impulsar los vínculos y los activos sociales. Combine con marcas geométricas y un montón de espacio libre para una identidad confiada y escalable. Consejo: Pruebe el amarillo en tamaños pequeños para asegurarse de que se mantenga distinto contra el blanco.

Ejemplo de imagen de coastal minimal generado usando media.io

¿Qué colores combinan bien con azul y amarillo?

Los neutros son el tercer color más fácil: blanco, crema y gris claro mantienen el amarillo y el azul limpios, mientras que el carbón o casi negro mejora el contraste del texto en azules pálidos y amarillos cálidos.

Para un aspecto más rico, agregue azul marino profundo o índigo como color de "estructura", luego use amarillo como acento. Este enfoque es común en el diseño de la interfaz de usuario porque mantiene los CTA brillantes sin hacer que toda la interfaz sea ruidosa.

Si quieres más personalidad, pequeños toques de coral/naranja, azul verde o menta pueden funcionar bien, solo manténgalos limitados para que la relación amarillo-azul siga siendo la estrella.

Cómo usar una paleta azul y amarillo en diseños reales

Comience asignando roles: elige un azul como base principal (encabezados, navegación, texto de cuerpo), luego reserve el amarillo para los momentos de atención (botones, insignias, números de clave). Esto evita que el amarillo sobreponga el diseño.

Para la accesibilidad, evite el texto amarillo sobre fondos blancos o claros. En su lugar, use el amarillo como fondo o resalta con texto oscuro en la parte superior y pruebe los pares de teclas para asegurarse de que su texto pequeño cumpla con las pautas de contraste.

En impresión, observe la saturación: los amarillos brillantes pueden cambiar dependiendo del papel y la tinta. Utilice un azul marino ligeramente más oscuro para el tipo y considere blancos cálidos para evitar que la paleta se sienta fría.

Crea visuales de paletas azul y amarillo con IA

Si está presentando un concepto de marca o construyendo un moodboard, la generación de imágenes visuales rápidas le ayudará a validar la paleta antes de comprometerse con un sistema de diseño completo. También es una forma fácil de probar cómo se lee el amarillo en tamaños pequeños y cómo se comporta el azul en fondos grandes.

Con Media.io, puedes convertir una idea de paleta en carteles, maquetas de interfaz de usuario, empaques o banners de héroes en minutos, y luego repetir el estilo, la iluminación y el diseño manteniendo la misma dirección de color.

Siguiente: Paleta de colores púrpura y verde