Paletas de colores amarillo, naranja y azul: códigos hex y consejos

Amarillo, naranja y azul es uno de los tríos de colores de "energía instantánea" más fiables: los tonos cálidos captan la atención mientras que el azul aporta estructura y confianza.

A continuación encontrarás paletas de colores amarillo, naranja y azul listas para usar con códigos HEX, además de formas prácticas de aplicarlas en branding, UI, empaques y carteles.

Por qué los esquemas de color amarillo, naranja y azul funcionan tan bien

El amarillo y el naranja aportan calidez, movimiento y optimismo: son ideales para atraer la mirada hacia mensajes clave, productos destacados o llamados a la acción. El azul contrarresta esa intensidad con claridad y confianza; por eso, el trío resulta tanto emocionante como confiable.

Este contraste cálido-frío también genera jerarquía natural. Puedes dejar que el azul se encargue de la estructura (navegación, títulos, texto principal) y usar amarillo/naranja como "colores de atención" para botones, etiquetas, iconos y énfasis, sin perder legibilidad.

Por último, las paletas amarillo, naranja y azul son versátiles en distintos formatos. Se mantienen vibrantes en carteles y empaques, pero pueden suavizarse con blancos y grises para sistemas UI que sigan resultando amigables y modernos.

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

1) Puerto Soleado

HEX: #ffd23f #ff8a2a #1f6feb #0b1f3b #f2f4f7

Ánimo: brillante, costero, seguro

Mejor para: marca de viajes y banners principales

Energía brillante de la costa con amarillos resplandecientes, naranja boya y azul de puerto profundo. Funciona perfectamente en anuncios de viaje, secciones principales de eventos y páginas de estilo de vida donde buscas optimismo inmediato. Combínalo con mucho espacio blanco y un titular azul marino para mayor legibilidad. Consejo: deja que el azul maneje la tipografía mientras amarillo y naranja quedan para llamadas a la acción e iconos.

Ejemplo de imagen de puerto soleado generado con media.io

Media.io

Media.io es un estudio de IA en línea para crear y editar videos, imágenes y audio en tu navegador.

Pruébalo gratis ahora

2) Surf Cítrico

HEX: #fff1a6 #ff9f1c #2ec4ff #1450a3 #0b0f1a

Ánimo: divertido, deportivo, vibrante

Mejor para: carteles deportivos y gráficos sociales

Tonos cítricos intensos se chocan con azules de surf para una sensación enérgica. Esta combinación brilla en carteles deportivos, gráficos de rebajas y plantillas sociales potentes donde el contraste debe notarse rápido. Usa el color tinta oscuro para títulos y textos pequeños, dejando los colores claros para destacar. Consejo: usa el amarillo pálido como fondo para suavizar la intensidad general.

Ejemplo de imagen de surf cítrico generado con media.io

3) Paseo Retro

HEX: #ffcc33 #ff6b35 #2f5dff #1b1b3a #fff7ea

Ánimo: nostálgico, audaz, soleado

Mejor para: empaques y etiquetas vintage

El ambiente nostálgico de paseo retro se transmite con amarillo caramelo, naranja mandarina y azul cobalto vibrante. Esta paleta es ideal para empaques retro, sets de pegatinas y etiquetas de edición limitada que buscan impacto visual. Usa crema como base para mantenerlo amigable y azul marino para líneas y textos pequeños. Consejo: prueba íconos gruesos y formas simples para reforzar el aspecto retro.

Ejemplo de imagen de paseo retro generado con media.io

4) Horizonte Desértico

HEX: #ffe169 #ff7a00 #3a86ff #2b2d42 #e9ecef

Ánimo: cálido, espacioso, moderno

Mejor para: landing pages y marketing SaaS

Luz cálida del desierto combinada con azul intenso de horizonte para un contraste moderno y limpio. Es ideal para páginas de aterrizaje y secciones de marketing donde quieres optimismo sin perder profesionalismo. Usa el gris frío y carbón para estructura, cuadrículas y textos extensos. Consejo: reserva el naranja para un solo estilo de botón principal y así el interfaz mantiene la calma.

Ejemplo de imagen de horizonte desértico generado con media.io

5) Banderas de Festival

HEX: #ffdd00 #ff5400 #00a6fb #003554 #f6f8ff

Ánimo: ruidoso, festivo, enérgico

Mejor para: flyers de eventos y promociones de entradas

Un desfile de colores saturados que recuerda banderas ondeando al viento. Este esquema es perfecto para carteles de festivales, promociones de entradas y publicaciones destacadas que deben captar atención. Da solidez al diseño con verde azulado profundo para texto y divisores. Consejo: apila bloques de color detrás del texto en vez de contornear letras, para mayor claridad.

Ejemplo de imagen de banderas de festival generado con media.io

6) Desayuno Acogedor

HEX: #fff3b0 #ffb703 #4ea8de #1d3557 #f8f9fa

Ánimo: amigable, acogedor, invitante

Mejor para: menús de cafetería y branding de alimentos

Luz suave de la mañana, calidez mantequilla y un toque de azul crean un ambiente acogedor. Funciona genial para menús de cafetería, empaques de desayuno y cabeceras de blogs gastronómicos donde buscas calidez sin que se vea aburrido. Acompaña con fondos casi blancos y una tipografía serif clásica para un aire artesanal. Consejo: usa el amarillo brillante solo en detalles como precios, insignias o ingredientes clave.

Ejemplo de imagen de desayuno acogedor generado con media.io

7) UI Día Despejado

HEX: #ffea61 #ff8c42 #2d9cdb #111827 #eef2ff

Ánimo: limpio, animado, apto para tecnología

Mejor para: UI de dashboard y componentes de apps

Azules claros de luz diurna equilibrados con acentos soleados hacen que la interfaz se sienta optimista y clara. Perfecto para dashboards, pantallas de configuración y flujos de onboarding donde la jerarquía debe ser obvia. Deja el carbón oscuro para textos largos y usa el azul en enlaces y estados activos. Consejo: utiliza el naranja sólo en advertencias o énfasis secundario para que conserve su significado.

Ejemplo de imagen de UI día despejado generado con media.io

8) Pop Náutico

HEX: #ffd60a #ff7f11 #0077b6 #023047 #f1faee

Ánimo: nítido, marítimo, audaz

Mejor para: campañas de verano y gráficos de merchandising

Azules marinos con un toque de naranja boya dan un aire limpio y seguro, como señalética de muelle. Ideal para gráficos de campañas de verano, bolsos o merchandising donde el contraste debe resistir en impresión. Usa el azul marino profundo para líneas y texto evitando un aspecto lavado. Consejo: prueba base crema para que el amarillo se mantenga vibrante sin "vibrar" sobre blanco.

Ejemplo de imagen de pop náutico generado con media.io

9) Koi Otoñal

HEX: #ffcf56 #f25c54 #247ba0 #2b2d42 #f7fff7

Ánimo: artístico, cálido, equilibrado

Mejor para: láminas artísticas y branding boutique

Naranjas koi cálidas y hojas doradas se arremolinan sobre azul de estanque. El contraste se percibe artístico y sereno, ideal para branding boutique, series artísticas o lookbooks de tienda. Usa el blanco suave para mantener diseños aireados y carbón para texto. Consejo: apuesta por formas orgánicas o texturas pinceladas para que los colores parezcan hechos a mano.

Ejemplo de imagen de koi otoñal generado con media.io

10) Primario de Sala de Juegos

HEX: #ffe45e #ff6f00 #3a86ff #2a2a2a #ffffff

Ánimo: alegre, amigable para niños, simple

Mejor para: aplicaciones infantiles y carteles de aprendizaje

La energía primaria alegre se siente como bloques, crayones y tiempo de juego. Es perfecto para carteles educativos infantiles, pantallas de apps lúdicas y hojas para el aula donde la claridad es más importante que la sutileza. Usa texto negro para la máxima accesibilidad y deja el azul para los estados de navegación. Consejo de uso: limita los degradados y utiliza rellenos planos para mantener la paleta nítida y legible.

Ejemplo de imagen de primario de sala de juegos generado con media.io

11) Mercado Fresco

HEX: #ffef9f #ff9b42 #1d8cf8 #0f172a #f3f4f6

Ánimo: fresco, amigable, moderno

Mejor para: promociones de supermercado y tarjetas de recetas

El calor fresco de mercado con un azul limpio se siente amigable y moderno. Funciona muy bien para promos de supermercado, tarjetas de recetas y cajas de suscripción de comida que necesitan verse brillantes y confiables. Combínalo con grises fríos para los espacios en blanco y usa azul marino para las listas de ingredientes. Consejo de uso: mantén el naranja como color clave de insignias para guiar la atención en diseños concurridos.

Ejemplo de imagen de mercado fresco generado con media.io

12) Streetwear Soleado

HEX: #ffd500 #ff4d00 #1b74e4 #0b0b0f #f5f5f5

Ánimo: urbano, atrevido, alto contraste

Mejor para: lookbooks y lanzamientos de streetwear

Colores brillantes en alto contraste sobre casi negro evocan carteles urbanos bajo las luces de la ciudad. Perfecto para lanzamientos de streetwear, páginas de lookbook y avisos llamativos. Deja que el negro haga la mayor parte del trabajo y reserva el amarillo para logotipos o etiquetas. Consejo de uso: usa el azul como acento secundario en enlaces y chips pequeños de interfaz para que el naranja no domine.

Ejemplo de imagen de streetwear soleado generado con media.io

13) Tránsito Tropical

HEX: #ffde59 #ff7a59 #00b4d8 #03045e #f8fafc

Ánimo: animado, fresco, contemporáneo

Mejor para: publicidad de transporte y carteles de campaña

La calidez tropical animada con un cian fresco se siente contemporánea y fácil de notar a distancia. Es adecuada para anuncios en transporte, carteles de campaña y vallas publicitarias donde los bloques de color deben leerse rápidamente. Usa el índigo profundo para titulares y texto legal, y el cian para señales de dirección. Consejo de uso: crea fondos simples de dos colores y coloca el tercer color brillante como insignia destacada.

Ejemplo de imagen de tránsito tropical generado con media.io

14) Toque Dorado al Atardecer

HEX: #ffe66d #ff9f45 #4d96ff #2d3142 #fffaf0

Ánimo: cálido, soñador, optimista

Mejor para: sitios web y invitaciones de bodas

La calidez dorada del atardecer con un toque suave de azul se siente romántica y optimista. Funciona para webs de bodas, "save the date" e invitaciones que quieren color sin verse infantiles. Combina con tipografía elegante y espacios cremosos para un acabado refinado. Consejo de uso: utiliza el azul con moderación para divisores de sección o botones de RSVP para que la calidez siga predominando.

Ejemplo de imagen de toque dorado al atardecer generado con media.io

15) Mural Moderno

HEX: #ffdf3a #ff6a00 #2b7de9 #1c2541 #eaeef3

Ánimo: audaz, gráfico, creativo

Mejor para: branding de estudios creativos y carteles

La energía mural audaz con bordes nítidos se siente creativa e intencional. Esta paleta en amarillo, naranja y azul encaja para branding de estudios, carteles de galería y secciones de portafolio donde buscas una imagen distintiva. Usa gris claro frío para dar espacio a las formas y ancla con azul marino profundo para la tipografía. Consejo de uso: mantén las formas murales grandes y evita líneas delgadas para que los colores se mantengan limpios a distancia.

Ejemplo de imagen de mural moderno generado con media.io

16) Infografía Limpia

HEX: #ffe680 #ff8b3d #2f80ed #111827 #f9fafb

Ánimo: clara, informativa, pulida

Mejor para: reportes, gráficos y presentaciones

Tonos claros e informativos evocan gráficos bien etiquetados con la dosis justa de personalidad. Esta combinación amarilla, naranja y azul funciona especialmente bien en reportes, presentaciones y explicativos donde las categorías deben ser sencillas de identificar. Mantén fondos casi blancos y usa gris oscuro para etiquetas y notas. Consejo de uso: asigna un color por serie de datos y úsalo de forma consistente en las páginas.

Ejemplo de imagen de infografía limpia generado con media.io

17) Aventura Infantil

HEX: #ffe74c #ff7b00 #3f8efc #243b53 #fffdf5

Ánimo: aventurero, amigable, de cuento

Mejor para: portadas y carteles de libros infantiles

Colores aventureros de cuento con toques soleados y un azul confiable resultan de inmediato aptos para niños. Ideal para portadas de libros infantiles, carteles de lectura y eventos de bibliotecas. Usa el gris pizarra profundo para títulos y contornos de personajes para mayor legibilidad. Consejo de uso: añade texturas ilustradas sencillas tipo grano de papel para suavizar los brillos.

Ejemplo de imagen de aventura infantil generado con media.io

18) Deportes de Verano

HEX: #fff04d #ff5a1f #00a3ff #0f2a44 #f2f6fb

Ánimo: rápido, competitivo, vibrante

Mejor para: promos de equipos y gráficos de torneos

Color vibrante y dinámico que evoca canchas soleadas y vítores ruidosos. Ideal para promos de equipos, cuadros de torneos y vídeos destacados donde se necesita alto contraste en pantalla. Equilibra los tonos brillantes con azul profundo para encabezados y marcadores. Consejo de uso: usa amarillo para estadísticas clave y naranja para avisos para que no compitan en el mismo lugar.

Ejemplo de imagen de deportes de verano generado con media.io

19) Costa Nublada

HEX: #ffe28a #ffa24a #5aa9e6 #2e4057 #e6edf5

Ánimo: suave, calma, costera

Mejor para: branding de bienestar y diseño de blogs

La calma costera suave con luz solar amortiguada y un azul oceánico gentil resulta reconfortante. Encaja para branding de bienestar, cabeceras de blogs y secciones de e-commerce tranquilas que necesitan calidez sin estridencias. Úsalo con fondos gris claro aireados e iconos discretos. Consejo de uso: deja el naranja solo como pequeño acento en enlaces o insignias, no en bloques grandes.

Ejemplo de imagen de costa nublada generado con media.io

20) Trío Minimalista de Acentos

HEX: #fff2b2 #ff9a3c #2b6cb0 #1a202c #ffffff

Ánimo: minimalista, inteligente, cercano

Mejor para: branding para startups y acentos UI

Cálidos tonos minimalistas con acento azul confiado transmiten modernidad y cercanía. Estas combinaciones amarillo/naranja/azul son ideales para startups que buscan una base neutra simple con detalles memorables. Mantén la maquetación mayormente en blanco y gris oscuro, y utiliza el naranja para una sola acción destacada. Consejo de uso: mantente en un único tono de azul para estados interactivos y así asegurar coherencia visual.

Ejemplo de imagen de trío minimalista de acentos generado con media.io

¿Qué colores combinan bien con amarillo, naranja y azul?

Los neutros son los realzadores más fáciles: blanco, crema, gris claro y carbón mantienen la paleta legible mientras permiten que los tonos cálidos sigan vivos. Si tu diseño se siente demasiado llamativo, añade más área neutral y reduce el amarillo/naranja a acentos pequeños.

Los azules marinos profundos y azules tinta combinan naturalmente con amarillos y naranjas porque estabilizan el contraste tipográfico. Para variaciones más suaves, prueba azules polvorientos o grises azulados con amarillos tenues (mantequilla) y naranjas albaricoque.

Para combinaciones más ricas y editoriales, agrega un tono “de soporte” como teal (marino), verde bosque (terroso) o un pequeño acento violeta/púrpura (contraste creativo). Mantén ese cuarto color al mínimo para que el trío siga siendo el protagonista.

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

En branding, asigna roles: azul como color principal (logo, titulares, señales de confianza), amarillo para destacados (insignias, iconos) y naranja para acciones (CTA, promociones). Así evitas que los tonos cálidos compitan y obtienes un sistema consistente.

En UI, prioriza la accesibilidad usando texto oscuro sobre neutros claros y reservando saturados para estados. El azul es ideal para enlaces y selecciones activas, mientras el naranja indica avisos o énfasis; usa el amarillo con moderación porque puede disminuir el contraste sobre blanco.

Para carteles y packaging, aumenta el impacto con bloques de color grandes y formas simples. Deja el color más oscuro para detalles y textos pequeños, y haz pruebas de impresión: la saturación del amarillo/naranja puede variar según el papel.

Crea visuales de paletas amarillo, naranja y azul con IA

Si tienes códigos HEX pero necesitas maquetas reales (carteles, landings, etiquetas o pantallas UI), generar visuales rápidos te ayuda a validar contraste, jerarquía y “sensación” antes de producir.

Con el generador de texto a imagen de Media.io, puedes pegar un prompt corto, incluir tus valores HEX y probar estilos de maquetación (minimalista, retro, deportivo, editorial) en minutos, ideal para conceptos iniciales y pruebas A/B.

Comienza con una paleta de arriba, luego genera 2–3 variantes cambiando solo el sujeto (por ejemplo: “volante de evento”, “dashboard”, “etiqueta de producto”) para mantener consistente tu sistema de color.

Siguiente: Paleta de colores violeta y púrpura