20 combinaciones de paletas modernas con tonos ultramarinos para inspirarte

Ultramarino (#120A8F) es un azul profundo y seguro que añade estructura instantáneamente a interfaces, carteles y sistemas de marca. Se percibe como premium y moderno, pero sigue siendo versátil tanto en digital como en impresión.

A continuación encontrarás mezclas seleccionadas de paletas de color ultramarino con códigos HEX, notas de ambiente y consejos prácticos de combinación—para que puedas elegir un esquema que se adapte a tu mensaje y a las limitaciones de tu diseño.

Por qué las paletas de ultramarino funcionan tan bien

El ultramarino tiene autoridad natural: es lo suficientemente oscuro como para fundamentar los diseños, pero lo bastante saturado como para sentirse intencional y enérgico. Ese equilibrio lo convierte en un color “ancla” fiable para sistemas que necesitan jerarquía.

En UI, el ultramarino ayuda a separar la navegación, los estados activos y los elementos hero sin depender de bordes pesados. En branding, transmite confianza y credibilidad, dejando espacio para acentos cálidos como ámbar, terracota o dorado.

Como combina bien tanto con tonos fríos (cian, espuma de mar, periwinkle) como complementarios cálidos (naranja, rosa, beige), un esquema de color ultramarino puede cambiar el ambiente—desde lujo minimalista hasta campañas audaces—manteniendo la coherencia.

20+ ideas de paletas de color ultramarino (con códigos HEX)

1) Navegación Nocturna

HEX: #120A8F #0B1D39 #2E5AAC #F4F1E8 #C9B18C

Ambiente: náutico, seguro, refinado

Ideal para: identidad de marca y secciones hero

Náutico y seguro, evoca el agua nocturna bajo un foco limpio. Esta paleta ultramarina funciona maravillosamente para branding premium, páginas de aterrizaje y barras de navegación audaces. Combina los azules profundos con arena cálida y blancos cremosos para mantener el contraste legible y elegante. Consejo: reserva el dorado-beige para pequeños detalles como íconos, insignias y CTAs clave.

Ejemplo de imagen de navegación nocturna generado usando media.io

Media.io

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

Prueba gratis ahora

2) Delft Moderno

HEX: #1E3A8A #3B82F6 #93C5FD #F8FAFC #F59E0B

Ambiente: fresco, brillante, amigable

Ideal para: UI de aplicaciones y dashboards

Fresco y animado, recuerda azulejos de cerámica esmaltada y luz clara del día. Los azules en capas te dan una jerarquía natural para estados de UI, mientras que el ámbar cálido aporta enfoque instantáneo. Usa el azul más claro y el blanco roto como superficies, y el ultramarino profundo para encabezados y pestañas activas. Consejo: mantén el naranja para una acción principal por pantalla para evitar ruido visual.

Ejemplo de imagen de delft moderno generado usando media.io

3) Ópera de Terciopelo

HEX: #1A0B6E #7C3AED #F472B6 #111827 #F9FAFB

Ambiente: dramático, lujoso, artístico

Ideal para: carteles de eventos y portadas de discos

Dramático y lujoso, evoca cortinas de terciopelo y luces de escenario. El índigo profundo y el carbón crean una base ambientada, mientras que el violeta y el rosa aportan energía de alto impacto para titulares. Usa el blanco pálido para espacio negativo alrededor de los títulos, para que los acentos brillantes no dominen. Consejo: aplica el rosa solo en elementos focales clave como fechas, íconos o un solo trazo de gradiente.

Ejemplo de imagen de ópera de terciopelo generado usando media.io

4) Tinta Costera

HEX: #162B75 #0EA5E9 #14B8A6 #E2E8F0 #0F172A

Ambiente: nítido, moderno, costero

Ideal para: sitios web SaaS e infografías

Nítido y costero, sugiere líneas de tinta, vidrio marino y aire limpio. El cian brillante y el teal evitan que los azules oscuros se sientan pesados, ideal para páginas SaaS y visualización de datos. Usa el gris claro con teal para paneles secundarios y reserva el casi negro para texto. Consejo: usa el cian solo para estados interactivos como hover e indicadores seleccionados.

Ejemplo de imagen de tinta costera generado usando media.io

5) Enfoque de Galería

HEX: #1D2D8C #E5E7EB #FFFFFF #D4AF37 #111111

Ambiente: minimalista, premium, alto contraste

Ideal para: anuncios de productos de lujo

Minimalista y premium, parece una galería tranquila con un único foco. Ultramarino y negro brindan autoridad, mientras que blanco y gris suave mantienen todo nítido y editorial. Añade el dorado solo donde quieras que la mirada se centre, como una marca de logo o detalle de precio. Consejo: mantén el fondo limpio para que el azul profundo se perciba intencional y no pesado.

Ejemplo de imagen de enfoque de galería generado usando media.io

6) Cítrico Astral

HEX: #1B2A9B #F97316 #FDE68A #0F172A #F8FAFC

Ambiente: audaz, enérgico, futurista

Ideal para: banners de campaña y CTAs

Audaz y enérgico, recuerda un cielo nocturno cortado por luz cítrica brillante. Estas combinaciones ultramarinas son ideales para banners de campañas donde necesitas contraste instantáneo y una llamada a la acción clara. Deja que el azul profundo y el carbón sirvan de fondo, y resalta el naranja en botones y detalles. Consejo: usa el amarillo pálido como resplandor suave detrás de los encabezados, no como texto principal.

Ejemplo de imagen de cítrico astral generado usando media.io

7) Medianoche Botánica

HEX: #15206B #0F766E #84CC16 #F3F4F6 #334155

Ambiente: terroso, calmado, nocturno

Ideal para: ilustraciones botánicas y etiquetas

Terroso y calmado, evoca un jardín tras la lluvia bajo un cielo azul profundo. Los verdes lucen naturales y contemporáneos contra la base nocturna, ideal para marcas de plantas o mensajes eco. Usa el blanco roto para espacio en etiquetas y deja el pizarra para tipografía y líneas. Consejo: agrega el verde hoja brillante solo a hojas principales o un solo sello de acento.

Ejemplo de imagen de medianoche botánica generado usando media.io

8) Pigmento de Papel

HEX: #2431A5 #E11D48 #F1F5F9 #A3A3A3 #0B0F1A

Ambiente: editorial, vibrante, moderno

Ideal para: portadas de revistas y publicaciones sociales

Editorial y vibrante, parece tinta fresca en papel nítido. El rojo intenso crea énfasis inmediato, mientras el ultramarino mantiene el diseño sólido y moderno. Usa gris claro como espacio en blanco generoso y apóyate en el casi negro para subtítulos legibles. Consejo: limita el rojo a uno o dos elementos, como una etiqueta o una sola línea, para mantener la jerarquía limpia.

Ejemplo de imagen de pigmento de papel generado usando media.io

9) Arcade Retro

HEX: #2B18FF #FF2D95 #00D1FF #0B1021 #F8FAFC

Ambiente: juguetón, neón, energía alta

Ideal para: overlays para streams y promociones

Juguetón y neón, recuerda las luces de arcade contra una sala oscura. El azul eléctrico y el cian generan un ambiente tecnológico, mientras el rosa vibrante aporta un toque juvenil y divertido. Usa el casi negro para el fondo principal y mantén los colores vivos bajo control. Consejo: utiliza los tonos neón como trazos y resplandores en vez de bloques completos para mantener la legibilidad.

Ejemplo de imagen de arcade retro generado usando media.io

10) Biblioteca Silenciosa

HEX: #1F2A7A #6B7280 #D1D5DB #F5F3E7 #8B5E34

Ambiente: tranquila, académica, atemporal

Ideal para: sitios de publicaciones y portafolios

Tranquila y académica, recuerda a libros encuadernados en tela y lámparas suaves de lectura. El azul profundo ancla el diseño, mientras que el crema cálido y el marrón añaden un toque humano y silencioso. Usa los grises para la IU secundaria y en disposiciones de lectura extensa donde busques mínima distracción. Consejo: reserva el marrón para pequeños separadores o iconos para que permanezca como una pátina sutil, no como un color principal para titulares.

Ejemplo de imagen de biblioteca silenciosa generado usando media.io

11) Flor Cerámica

HEX: #253494 #F43F5E #FB7185 #FFF7ED #22C55E

Ambiente: alegre, floral, creativo

Ideal para: invitaciones y papelería

Alegre y floral, se siente como cerámica pintada y ramos de primavera. El azul profundo mantiene la composición estable mientras que los tonos rosados dan calidez y celebración. Utiliza el fondo crema para mantener la legibilidad del texto y deja que el verde funcione como pequeño acento botánico. Consejo: prueba el rosa como cinta detrás de nombres, usando ultramarino para texto y bordes.

Ejemplo de imagen de flor cerámica generado usando media.io

12) Mercado Nocturno

HEX: #0F1A5A #F59E0B #DC2626 #F1F5F9 #111827

Ambiente: vibrante, urbano, apetitoso

Ideal para: volantes de comida y promociones de restaurantes

Vibrante y urbana, recuerda a faroles, letreros y puestos nocturnos. El ámbar cálido y el rojo resaltan brillantemente sobre el azul oscuro, perfecto para promociones de comida y titulares audaces. Utiliza el blanco sucio para bloques de menú y reserva el casi negro para la letra pequeña. Consejo: usa el ámbar como color principal de resalte y deja que el rojo aparezca solo para ofertas especiales o etiquetas de tiempo limitado.

Ejemplo de imagen de mercado nocturno generado usando media.io

13) Sombra de Montaña

HEX: #1C2C6B #64748B #94A3B8 #E2E8F0 #16A34A

Ambiente: aventurero, estable, fresco

Ideal para: blogs de viaje y UI de mapas

Aventurero y estable, recuerda a la sombra de la montaña con un toque de pino. Los azules pizarra crean una estructura confiable para mapas, navegación y páginas con mucho contenido. Utiliza el gris azulado pálido como lienzo y reserva el verde para pines de ubicación o marcadores de estado. Consejo: para accesibilidad, usa texto blanco solo sobre el azul más oscuro y evita el verde para párrafos largos.

Ejemplo de imagen de sombra de montaña generado usando media.io

14) Minimalismo Lujoso

HEX: #1A237E #F5F5F4 #D6D3D1 #0A0A0A #C4A484

Ambiente: lujo, silencioso, arquitectónico

Ideal para: empaques y marcas premium

Lujo y silencio, evoca mármol, tinta y detalles en latón cálido. Esta paleta ultramarina destaca en empaques premium donde el contraste y la mesura importan. Combina el azul profundo con neutros suaves como piedra y usa el tostado como un acento metálico para sellos, bordes o pequeños iconos. Consejo: imprime el ultramarino como un gran campo y deja el acento como líneas delgadas para un acabado de alta gama.

Ejemplo de imagen de minimalismo lujoso generado usando media.io

15) Gradiente Prisma

HEX: #0B0F6A #2563EB #38BDF8 #A78BFA #F8FAFC

Ambiente: limpio, digital, optimista

Ideal para: landing pages para tecnología y gradientes

Limpio y optimista, parece luz refractada a través de vidrio. Los azules ascendentes y el violeta suave son perfectos para gradientes modernos, gráficos y hero illustrations. Usa el blanco sucio para espacios en blanco y mezcla el azul medio con cian para dar profundidad sin bordes duros. Consejo: aplica el violeta como un punto secundario del gradiente para que se lea como un detalle premium, no una distracción.

Ejemplo de imagen de gradiente prisma generado usando media.io

16) Cartel Solar

HEX: #1E2A9E #FACC15 #F43F5E #0F172A #FAFAF9

Ambiente: audaz, soleado, gráfico

Ideal para: carteles de festivales y anuncios

Audaz y soleado, recuerda a un cielo ultramarino con un sol pop-art. Estas combinaciones ultramarinas son ideales para carteles que deben impactar a distancia. Mantén los tonos profundos para grandes formas y usa el amarillo para elementos destacados como títulos o fechas, con el rosa como refuerzo secundario. Consejo: utiliza el blanco sucio para pequeños bloques de texto y guarda los colores más brillantes para el énfasis.

Ejemplo de imagen de cartel solar generado usando media.io

17) Pizarra y Espuma de Mar

HEX: #18206F #5EEAD4 #0F766E #CBD5E1 #1F2937

Ambiente: fresco, equilibrado, refrescante

Ideal para: marcas de bienestar y secciones web

Fresco y equilibrado, evoca espuma de mar sobre roca oscura. El azul verdoso menta suaviza el azul profundo, creando una sensación de calma y confianza para páginas de bienestar y estilo de vida. Usa el fondo pizarra claro como fondo principal y los tonos más oscuros para titulares. Consejo: usa el menta como estado hover y activo para añadir movimiento sutil sin llamar demasiado la atención.

Ejemplo de imagen de pizarra y espuma de mar generado usando media.io

18) Azul Marino Editorial

HEX: #151B54 #E5E7EB #9CA3AF #B91C1C #FFFFFF

Ambiente: serio, informativo, autoritario

Ideal para: informes y diseños editoriales

Serio y autoritario, recuerda a un periódico reimaginado para la web. El azul marino y los grises soportan contenido denso, mientras que el rojo profundo añade un clásico acento editorial para enlaces o destacados. Usa blanco para amplios márgenes y deja que el gris gestione divisores y pies de foto. Consejo: limita el rojo a un solo propósito, como alertas o etiquetas de sección, para facilitar la lectura rápida.

Ejemplo de imagen de azul marino editorial generado usando media.io

19) Noche Orquídea

HEX: #1B0F8A #C026D3 #F0ABFC #0B1320 #F5F3FF

Ambiente: misterioso, soñado, glamuroso

Ideal para: branding de belleza y anuncios sociales

Misterioso y de ensueño, evoca orquídeas brillando en una habitación oscura. La gama púrpura-rosada se siente glamurosa, mientras que el azul profundo la mantiene moderna y equilibrada. Usa el lavanda pálido como fondo suave y resalta el magenta para detalles como nombres de productos o pegatinas. Consejo: añade gradientes sutiles entre ultramarino y violeta para crear profundidad sin añadir más colores.

Ejemplo de imagen de noche orquídea generado usando media.io

20) Terracota Cálida

HEX: #1D2A8F #C2410C #FB923C #FDEBD0 #374151

Ambiente: cálido, terrenal, artesanal

Ideal para: marcas de decoración del hogar y lookbooks

Cálido y terrenal, recuerda a arcilla, lino y esmalte azul profundo. Los tonos terracota hacen que el azul luzca más rico y accesible, ideal para decoración del hogar y productos artesanales. Usa el crema como fondo principal y reserva el carbón para texto y contornos. Consejo: deja que el naranja lidere en pequeños detalles como botones y etiquetas, mientras el azul ancla los encabezados y marcos.

Ejemplo de imagen de terracota cálida generado usando media.io

¿Qué colores combinan bien con ultramarino?

El ultramarino combina bellamente con complementos cálidos—naranja, ámbar, terracota y dorado—porque crean contraste instantáneo y dirigen la atención hacia CTAs, precios o etiquetas clave.

Para combinaciones más calmadas y contemporáneas, combina ultramarino con acentos fríos como cian, turquesa, espuma de mar o violeta suave. Así la paleta se mantiene “digital” y aireada, preservando la profundidad del azul base.

Para un aspecto minimalista y premium, combina ultramarino con blanco, blanco sucio, gris claro y casi negro. Añade un acento metálico (beige/dorado) en pequeñas dosis para un acabado refinado.

Cómo usar una paleta de color ultramarino en diseños reales

Usa ultramarino como color estructural: encabezados, navegación, separadores de sección y paneles principales. Después coloca tu acento más brillante (naranja/rosa/amarillo) en acciones y destacados para que la atención del usuario siga un solo camino claro.

Para mejor legibilidad, mantén el texto principal sobre fondos neutros claros y reserva blanco sobre ultramarino solo para elementos cortos (botones, etiquetas, insignias). Si diseñas gráficos, asigna el ultramarino a la “serie principal” y usa tonos más claros para series secundarias.

En impresión (carteles, empaques, papelería), el ultramarino funciona mejor en grandes áreas con líneas de acento medidas. Esto ayuda a que el azul se perciba como intencionado y premium, no pesado visualmente.

Crea visuales de paletas ultramarino con IA

Si ya tienes códigos HEX, puedes convertirlos rápidamente en ideas para banners, diseños de carteles y maquetas UI describiendo la composición (disposición, tipografía, formas) y especificando los colores de la paleta.

Para resultados consistentes, indica qué colores son dominantes, cuáles son fondos neutros y cuáles deben limitarse a “pequeños acentos”. Añadir una relación de aspecto (como 16:9 o 3:4) ayuda a que la imagen se adapte a tu caso de uso.

Con el texto a imagen de Media.io, puedes iterar el mismo esquema ultramarino en múltiples formatos—redes sociales, anuncios, secciones principales—sin rehacerlo desde cero.

Siguiente: Paleta de colores Bittersweet