Paletas de color azul ultramarino: 20 combinaciones y códigos hexadecimales

El azul ultramar es un azul profundo y vívido que transmite de inmediato confianza, habilidad y un acabado moderno. Puede sentirse regio y dramático, o limpio y minimalista, dependiendo de los acentos con los que lo combines.

A continuación encontrarás 20 ideas listas para usar de paletas de colores azul ultramar con códigos HEX, además de consejos prácticos para utilizarlas en branding, interfaces y material impreso.

Por Qué Funcionan Tan Bien las Paletas de Azul Ultramar

El azul ultramar se sitúa en el punto perfecto entre lo clásico y lo contemporáneo: es lo suficientemente saturado como para sentirse premium, pero sigue siendo lo bastante limpio para interfaces modernas. Eso lo convierte en un color fiable para destacar desde secciones principales hasta empaques.

Combina de forma natural tanto con acentos cálidos como fríos. Añade dorado, crema y terracota para un toque de lujo y humanidad, o mézclalo con blancos gélidos, grises pizarra y cian para crear un ambiente fresco y tecnológico.

Lo más importante es que el ultramar mantiene bien el contraste. Si lo equilibras con blancos rotos y neutros oscuros, obtienes una jerarquía y legibilidad fuertes sin necesidad de usar negro intenso en todas partes.

Más de 20 Ideas de Paletas de Azul Ultramar (con Códigos HEX)

1) Noche Ultramarina

HEX: #120A8F #0B1026 #F5F1E8 #C8A24A #E55D73

Estado de ánimo: dramático y lujoso

Ideal para: sección principal de branding de lujo

Dramático y lujoso, evoca cortinas de terciopelo, bordes dorados y un cielo nocturno con un toque de rubor. Usa el azul profundo como base, luego agrega crema para espacios de respiro y dorado para generar sensación premium. Brilla en páginas de aterrizaje de alta gama, branding de fragancias o visuales de hoteles boutique. Consejo: mantén el rosa solo como pequeño acento para llamadas a la acción y así conservar el aspecto refinado.

Ejemplo de imagen de noche ultramarina generado con media.io

Media.io

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

Pruébalo Gratis Ahora

2) Pizarra Oceánica

HEX: #1A2B8A #2F3A4A #8FA3B8 #E7EDF4 #F2A65A

Estado de ánimo: calmado y profesional

Ideal para: interfaz panel de control SaaS

Calmado y profesional, se percibe como agua abierta bajo un cielo nublado con una boya cálida de naranja. Combina pizarra y ultramar para navegación y botones principales, dejando los fondos en azul gris pálido. Funciona especialmente bien en analíticas, herramientas de administración y productos B2B que necesitan claridad sin verse fríos. Consejo: reserva el naranja para alertas o métricas clave para mantener su importancia.

Ejemplo de imagen de pizarra oceánica generado con media.io

3) Porcelana y Ultramar

HEX: #1D1FA3 #FFFFFF #F3E7D3 #B9C7E6 #2A2A2A

Estado de ánimo: romántico y nítido

Ideal para: set de invitaciones de boda

Romántico y nítido, evoca porcelana pintada, votos escritos a mano y suave luz de vela sobre lino. La paleta de azul ultramar resulta atemporal en invitaciones cuando balanceas el azul intenso con mucho blanco y un toque de crema cálida. Usa el carbón para el texto legible y el azul periwinkle pálido como detalle de marco o relleno de monograma. Consejo: elige papeles sin recubrimiento para que el azul no se vea demasiado brillante.

Ejemplo de imagen de porcelana y ultramar generado con media.io

4) Azul Arcade Neón

HEX: #2A00FF #101225 #00E5FF #FF2D95 #EDEDED

Estado de ánimo: audaz y futurista

Ideal para: overlay para streaming de juegos

Audaz y futurista, recuerda el brillo de los arcades, ritmos sintetizados y reflejos en vidrio oscuro. Mantén el fondo casi negro, luego superpone ultramarino y cian para paneles, marcos e insignias de estado. El magenta funciona mejor como acento pulsante en alertas, nuevos seguidores o indicadores en directo. Consejo: utiliza el gris claro para etiquetas pequeñas y así mantener alta la legibilidad sin opacar el ambiente neón.

Ejemplo de imagen de azul arcade neón generado con media.io

5) Museo Costero

HEX: #1627B8 #0F172A #D7E3F1 #9DB6C8 #D9A441

Estado de ánimo: culto y náutico

Ideal para: señalización de exhibición de museo

Culto y náutico, evoca mapas marítimos, latón pulido e iluminación tranquila de galería. Ultramar y casi negro generan fuertes encabezados de orientación, mientras que los azules neblinosos mantienen los paneles legibles. El dorado es perfecto para marcas de sección o números de exhibición sin resultar llamativo. Consejo: deja el texto principal sobre fondo claro y evita bloques grandes de dorado para mantener la sobriedad museística.

Ejemplo de imagen de museo costero generado con media.io

6) Contraste Cítrico Vibrante

HEX: #1B2AE0 #F7F7F2 #FFB000 #3A3A3A #A7B4D6

Estado de ánimo: enérgico y limpio

Ideal para: plantillas promocionales de redes sociales

Enérgico y limpio, parece cítricos frescos sobre una encimera blanca nítida con un borde azul marcado. Estas combinaciones de azul ultramar son ideales si buscas atención instantánea sin recurrir al rojo. Usa ultramar para titulares y marcos, dejando el naranja para el llamado a la acción principal. Consejo: utiliza gris medio para el texto secundario y así mantener el diseño ordenado y moderno.

Ejemplo de imagen de contraste cítrico vibrante generado con media.io

7) Tinta y Pergamino

HEX: #1417A6 #2B2B2B #F2E8D8 #B6A48A #8FA6C9

Estado de ánimo: clásico y editorial

Ideal para: doble página de revista

Clásico y editorial, recuerda tinta sobre papel texturizado con una leve calidez antigua. El azul ultramar resalta en citas destacadas y divisores, mientras que el pergamino y tostado hacen que la maquetación sea cercana. Es ideal para artículos extensos, portfolios y lookbooks que buscan sofisticación sin rigidez. Consejo: utiliza el azul suave en líneas y pies de foto para guiar la vista de forma sutil.

Ejemplo de imagen de tinta y pergamino generado con media.io

8) Cielo Invernal Minimalista

HEX: #1A33CC #EAF1FF #FFFFFF #B9C9E6 #111827

Estado de ánimo: minimalista y aireado

Ideal para: logo minimalista y kit de marca

Minimalista y aireado, sugiere luz solar fría, nieve pura y sombras nítidas en el hielo. Usa el ultramar para un solo elemento destacado o icono, dejando la mayoría de las superficies brillantes con blanco y azul claro. El casi negro es ideal para tipografía y guías de marca que requieren contraste definido. Consejo: limita los degradados y deja que las formas planas hagan el trabajo para un resultado verdaderamente moderno.

Ejemplo de imagen de cielo invernal minimalista generado con media.io

9) Floración Índigo Botánica

HEX: #1C2BC7 #2E3A59 #F7F2EA #7DB6A6 #E9A6B6

Estado de ánimo: suave y natural

Ideal para: ilustración botánica en acuarela

Suave y natural, recuerda pétalos prensados, tintes índigo y una mañana tranquila en invernadero. Utiliza el azul profundo para tallos, contornos o sombras, equilibrándolo con tonos crema papel. El salvia y el rubor aportan un giro moderno y delicado que se siente hecho a mano en lugar de vintage. Consejo: permite transiciones de color acuareladas e imperfectas para preservar el encanto de la técnica.

Ejemplo de imagen de floración botánica índigo generada usando media.io

10) Pulso de Conferencia Tecnológica

HEX: #1829F0 #0A0F1F #E6ECFF #6EE7FF #FFC857

Estado de ánimo: confiado y enérgico

Ideal para: cartel y folleto de conferencia

Confiado y enérgico, se siente como focos de keynote y flujos de datos rápidos. Construye la base con casi negro y ultramarino, luego añade cian para líneas de movimiento y detalles tipo UI. El amarillo cálido es ideal para la fecha, lugar o botones de entradas para que la información crítica resalte. Consejo: mantén la tipografía grande y alineada a una cuadrícula para evitar ruido visual.

Ejemplo de imagen de pulso de conferencia tecnológica generado usando media.io

11) Días de Denim Índigo

HEX: #1A2AA8 #35424A #D9D2C3 #FFFFFF #C46D5E

Estado de ánimo: informal y acogedor

Ideal para: página de inicio de marca de ropa

Informal y acogedor, interpreta como mezclilla gastada, bolsas de lona y detalles de terracota cálida. La paleta de azul ultramarino funciona bien para marcas de estilo de vida cuando quieres que el azul se sienta accesible en vez de corporativo. Combina el azul con fondo blanco roto y arena, y usa terracota para insignias o etiquetas de oferta. Consejo: utiliza mucho espacio en blanco y tipografía sincera para mantener el ambiente relajado del denim.

Ejemplo de imagen de días de denim índigo generado usando media.io

12) Cocina de Azulejos Cerámicos

HEX: #1830B5 #F6F4EF #C7D2E9 #8DA2B8 #7A5C4A

Estado de ánimo: acogedora y pulida

Ideal para: tablero de inspiración de diseño interior

Acogedora y pulida, se siente como azulejos cerámicos brillantes, madera cálida y luz de día suave. Usa ultramarino como muestra principal y luego superpone cremas y grises fríos para mantener el espacio abierto. El marrón fundamenta la paleta y funciona bien para notas de muebles o etiquetas de materiales. Consejo: trata el azul como pared destacada o acento de salpicadero, no como pintura general.

Ejemplo de imagen de cocina de azulejos cerámicos generado usando media.io

13) Onboarding Espacio Profundo

HEX: #1B24FF #0B1020 #1F2A44 #B9C7FF #F4F6FF

Estado de ánimo: elegante e inmersivo

Ideal para: pantallas de onboarding en app modo oscuro

Elegante e inmersivo, sugiere una interfaz de nave estelar con brillos suaves sobre sombras profundas. Utiliza ultramarino brillante para acciones primarias e indicadores de progreso, mientras Navy y carbón manejan las capas de fondo. Periwinkle pálido y casi blanco mantienen el texto legible sin romper el ambiente oscuro. Consejo: añade gradientes sutiles solo en pequeños detalles para evitar bandas en pantallas OLED.

Ejemplo de imagen de onboarding espacio profundo generado usando media.io

14) Buque Insignia Marítimo

HEX: #1227D5 #0E1A2B #FFFFFF #BFD2EA #E0B44C

Estado de ánimo: nítido y apto para el mar

Ideal para: encabezado de sitio web náutico

Nítido y apto para el mar, recuerda banderas de señalización, metal pulido y líneas de horizonte claras. Ultramarino y navy crean un encabezado y navegación fuertes, mientras el blanco mantiene el diseño fresco. Un toque de oro aporta herencia sin hacer el aspecto demasiado formal. Consejo: usa azul pálido para estados hover y separadores sutiles para que todo se sienta ligero.

Ejemplo de imagen de buque insignia marítimo generado usando media.io

15) Cosméticos Terciopelo Real

HEX: #1A21B8 #2B0F2F #F6E9F0 #D6B2C6 #D4AF37

Estado de ánimo: glamoroso y opulento

Ideal para: anuncio de producto cosmético

Glamoroso y opulento, se siente como envases de terciopelo, notas de perfume y acabado suave de polvo. Permite que ultramarino y ciruela establezcan un fondo rico, luego usa rubor y malva para tipografía delicada y acentos. El dorado se percibe como premium cuando se aplica solo en tapas, sellos o líneas pequeñas. Consejo: mantén la iluminación suave y direccional para que los colores oscuros luzcan lujosos y no planos.

Ejemplo de imagen de cosméticos terciopelo real generado usando media.io

16) Claridad Financiera

HEX: #1626C9 #111827 #F9FAFB #C7D2FE #10B981

Estado de ánimo: confiable y clara

Ideal para: gráficos de informe anual

Confiable y clara, se siente como hojas de cálculo ordenadas, impresiones nítidas y toma de decisiones calmada. Utiliza ultramarino para series principales en gráficos y menta para marcadores de crecimiento positivo y KPIs clave. El casi negro y blanco roto hacen que las tablas sean legibles y profesionales. Consejo: mantén las líneas de cuadrícula ligeras y permite que el azul marque la jerarquía.

Ejemplo de imagen de claridad financiera generado usando media.io

17) Atardecer Tras la Tormenta

HEX: #1520D6 #2B2D42 #F8F3E7 #F77F5A #CDB4DB

Estado de ánimo: cinematográfico y melancólico

Ideal para: arte de portada de álbum

Cinematográfico y melancólico, parece una tormenta despejándose mientras la luz cálida toca el horizonte. Estas combinaciones de azul ultramarino funcionan muy bien para branding musical porque el naranja aporta emoción sin dominar el azul. Usa crema para el nombre del artista y detalles de la lista de canciones, y lavanda para suavizar transiciones entre áreas oscuras y cálidas. Consejo: mantén la tipografía simple y centrada para que la historia de color sea protagonista.

Ejemplo de imagen de atardecer tras la tormenta generado usando media.io

18) Mezcla Primaria de Sala de Juegos

HEX: #1E2BFF #FFD166 #06D6A0 #EF476F #F8F9FA

Estado de ánimo: divertido y brillante

Ideal para: ilustración de portada de libro infantil

Divertido y brillante, se siente como bloques de construcción, papel de manualidades y energía post escuela. Usa ultramarino como color principal del título, y alterna amarillo, verde y rosa para personajes o formas simples. Funciona bien para materiales educativos y marcas infantiles que requieren amabilidad inmediata. Consejo: mantén los contornos mínimos y utiliza rellenos planos de color para un aspecto limpio y moderno.

Ejemplo de imagen de mezcla primaria de sala de juegos generado usando media.io

19) Plano Arquitectónico

HEX: #0F1FDB #0B1220 #E8EEF9 #9FB2D0 #6B7280

Estado de ánimo: preciso y moderno

Ideal para: diseño de portafolio de arquitectura

Preciso y moderno, evoca líneas de planos, mediciones limpias y tableros de presentación nítidos. El ultramarino es perfecto para títulos de sección y trazos de diagramas, mientras los tonos fríos pálidos mantienen las páginas ligeras. Añade gris para pies de foto y metadatos para que el diseño se sienta técnico pero pulido. Consejo: mantén los grosores de línea consistentes y usa el azul más brillante solo para llamados clave.

Ejemplo de imagen de plano arquitectónico generado usando media.io

20) Crepúsculo Lavanda Suave

HEX: #1C2AE8 #2A2A3A #F5F3FF #C7B8FF #F2B5D4

Estado de ánimo: delicado y de ensueño

Ideal para: página de inicio de bienestar

Delicado y de ensueño, se siente como cielos crepusculares y una rutina calmante suave. Usa ultramarino para botones clave y encabezados de sección, y deja que lavanda y rubor creen una capa emocional relajante. El fondo blanco roto mantiene todo transpirable, especialmente en páginas largas de scroll. Consejo: combínalo con elementos UI redondeados y espacio generoso para reforzar el tono relajado.

Ejemplo de imagen de crepúsculo lavanda suave generado usando media.io

¿Qué colores combinan bien con el azul ultramar?

Los neutros cálidos (crema, pergamino, arena) hacen que el ultramarino se perciba más táctil y premium, lo cual es ideal para diseño editorial y empaque. Los tonos metálicos como latón u oro también amplifican su carácter regia cuando se usan en pequeñas dosis.

Para diseño digital, ultramarino combina especialmente bien con grises fríos y casi negro, creando una estructura fuerte sin parecer severa. Añade cian o periwinkle para lograr un ambiente futurista tipo “interfaz” y mantener la paleta cohesionada.

Si quieres contraste emocional, prueba coral, terracota, rubor o lavanda suave. Estos acentos pastel a cálidos mantienen ultramarino audaz, pero hacen que el aspecto general sea más amigable y expresivo.

Cómo usar una paleta de azul ultramar en diseños reales

Empieza eligiendo si ultramarino será tu color de fondo o acento. Como fondo, mantén la tipografía ligera (blanco roto o periwinkle pálido) y limita los acentos saturados a un color “señal” para CTAs.

En UI, asigna ultramarino a acciones principales y navegación destacada, luego utiliza grises y tintes suaves para superficies, tarjetas y separadores. Esto preserva la jerarquía y evita el problema de “todo grita” que pueden causar los azules saturados.

Para impresión, prueba sobre el papel previsto: el papel sin recubrimiento suaviza ultramarino bellamente, mientras los acabados brillantes pueden intensificarlo. Ten grises medios o carbón a mano para texto cuerpo legible y detalles finos.

Crea visuales de paletas azul ultramar con IA

Si ya tienes códigos HEX, la forma más rápida de explorar diseños reales es mediante la generación de mockups: carteles, páginas de inicio, envases o plantillas sociales. Ver ultramarino aplicado en escala te ayuda a confirmar contraste, ambiente y balance en minutos.

Con la herramienta de texto a imagen de Media.io, puedes pegar un prompt como “sección hero ultramarina con espacio negativo crema y acentos dorados” y iterar rápido hasta que la paleta se ajuste a tu marca.

Una vez que te guste la dirección, mantén variaciones: versión modo oscuro, versión modo claro y una versión de campaña de alto contraste. Así tendrás flexibilidad consistente en web, app e impresión.

Siguiente: Paleta de colores gris oscuro