20 paletas de colores azul marino y azul oscuro con códigos hexadecimales

Las paletas de azul marino oscuro son la elección ideal cuando necesitas transmitir confianza al instante, estructura y una sensación premium. Según los detalles con los que las combines, pueden percibirse modernas en interfaces, atemporales en marcas y acogedoras en interiores.

A continuación encontrarás 20 ideas seleccionadas de paletas de colores azul marino oscuro con códigos HEX, además de consejos prácticos y prompts de Media.io para que generes visuales a juego rápidamente.

Por qué las paletas de azul marino oscuro funcionan tan bien

El azul marino oscuro se encuentra en el punto justo entre la autoridad del negro y la claridad del azul, por lo que transmite confianza sin llegar a ser agresivo. Por eso es común en finanzas, software SaaS y sistemas de diseño corporativo donde la credibilidad es clave.

También aporta profundidad inmediata. Una base azul marino hace que los acentos más brillantes (verde azulado, dorado, coral, menta o incluso neón) parezcan más intencionados, ya que el fondo enmarca de manera natural los elementos interactivos y la información clave.

Por último, el azul marino es versátil en todos los soportes. Funciona bien en impresión, se ve claro en pantallas y combina tanto con neutros cálidos (marfil, avena, greige) como con tonos fríos (periwinkle, azul hielo), lo que facilita expandirlo a una paleta de marca completa.

Más de 20 ideas de paletas de colores azul marino oscuro (con códigos HEX)

1) Puerto de Medianoche

HEX: #0B132B #1C2541 #3A506B #5BC0BE #F4F1DE

Estado de ánimo: calmado, marítimo, sofisticado

Ideal para: página de inicio SaaS

Calmada y marítima, esta mezcla evoca la luz de la luna sobre aguas profundas con un acento fresco de brisa marina. Usa el azul marino más oscuro para encabezados y navegación, y el verde azulado para llamadas a la acción que destacan sin lucir neón. El marfil cálido mantiene las secciones legibles y evita que el diseño se vea pesado. Consejo: reserva el verde azulado para una acción principal por pantalla para mantener una jerarquía clara.

Ejemplo de imagen de puerto de medianoche 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) Anochecer Cobalto

HEX: #0A0F2C #101B4D #1E3A8A #A7C7FF #EEF2FF

Estado de ánimo: elegante, tecnológico, enfocado

Ideal para: maqueta de interfaz de dashboard

Elegante y enfocado, estos tonos recuerdan a un skyline de ciudad iluminado con reflejos de cobalto. Genera profundidad usando azul marino casi negro para las barras laterales y el azul más brillante para estados activos y gráficas. El periwinkle suave y el blanco roto mantienen las tablas legibles y descansan la vista. Consejo: combina el cobalto con sutiles matices al 10–15% para los estados hover y de selección.

Ejemplo de imagen de anochecer cobalto generado con media.io

3) Tinta y Cobre

HEX: #081027 #111D3B #2B2F4A #B87333 #F2E9E4

Estado de ánimo: lujoso, editorial, cálido

Ideal para: identidad de marca premium

Lujosa y editorial, evoca tinta oscura sobre papel texturizado con un destello de lámina de cobre. Estas combinaciones de azul marino oscuro destacan en logotipos, monogramas y packaging donde buscas un dramatismo discreto. Usa el cobre como acento (líneas, íconos, tipografía pequeña) y deja que el blanco cálido garantice legibilidad. Consejo: prueba el cobre tanto en mate como brillante para elegir el grado de calidez adecuado.

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

4) Lino Tormentoso

HEX: #0D1B2A #1B263B #415A77 #E0E1DD #C7BEB6

Estado de ánimo: tranquilo, natural, discreto

Ideal para: interior de sala moderna

Tranquila y natural, recuerda nubes de tormenta sobre lino suave y piedra. Usa azules profundos para muebles fijos, muros de acento o gabinetes y equilibra con los neutros claros en superficies amplias. El tono greige conecta la madera cálida y pinturas frías, dando cohesión al ambiente. Consejo: añade texturas (bouclé, lino, yeso mate) para evitar que la paleta luzca plana.

Ejemplo de imagen de lino tormentoso generado con media.io

5) Cítrico Zafiro

HEX: #081A3A #0F2E5E #1D4ED8 #FBBF24 #FFF7ED

Estado de ánimo: enérgico, atrevido, juguetón

Ideal para: gráfico promocional para redes sociales

Enérgico y vibrante, es como un rayo de zafiro cortando un estallido cítrico. Usa el amarillo dorado sólo en etiquetas de precio, insignias o métricas clave para enfatizar intencionadamente. El blanco cremoso evita que los azules saturen las pantallas pequeñas. Consejo: pon el texto en casi blanco sobre azul marino o casi marino sobre crema—evita el cuerpo de texto azul medio.

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

6) Terciopelo de Museo

HEX: #070B1A #121A3A #2A2F6B #9CA3AF #FAFAF9

Estado de ánimo: dramático, culto, refinado

Ideal para: diseño editorial de revista

Dramática y sofisticada, recuerda muros de galería de terciopelo y marcos pulidos. Usa el azul marino casi negro para titulares y bordes y suaviza la lectura con blanco cálido en el fondo. El gris frío funciona como subtítulos, reglas y tipografía secundaria sin competir. Consejo: añade un único elemento índigo saturado por composición para guiar la vista.

Ejemplo de imagen de terciopelo de museo generado con media.io

7) Faro Ártico

HEX: #06142E #0B2C5F #1B65A6 #A8DADC #F1FAEE

Estado de ánimo: fresco, puro, de aire libre

Ideal para: cabecera de web de viajes

Fresca y limpia, evoca aire polar y agua brillante bajo cielo despejado. Esta paleta azul marino oscuro es ideal para marcas de viajes y aventura que buscan confianza y un toque explorador. Usa la menta helada como acento en botones y etiquetas, y deja que el blanco suave mantenga todo limpio. Consejo: deja que las fotos aporten calidez; usa elementos UI fríos y mínimos.

Ejemplo de imagen de faro ártico generado con media.io

8) Rosa Tras el Anochecer

HEX: #0B1026 #1B1F3A #3B3561 #E07A8C #F6F0F2

Estado de ánimo: romántico, moderno, levemente melancólico

Ideal para: set de invitación de boda

Romántica y moderna, evoca flores al atardecer bajo un cielo oscuro. Combina el rosa empolvado con mucho espacio en blanco para nombres y fechas, y usa el azul marino más profundo para la tipografía formal. El azul violeta apagado une los tonos, logrando contraste elegante, no duro. Consejo: imprime los acentos rosa como color directo o foil para que destaquen en papel texturizado.

Ejemplo de imagen de rosa tras el anochecer generado con media.io

9) Marea de Grafito

HEX: #050A12 #0F172A #334155 #94A3B8 #E2E8F0

Estado de ánimo: minimalista, profesional, equilibrado

Ideal para: interfaz de app financiera

Minimalista y profesional, recuerda el grafito, el acero y el agua profunda. Usa los tonos más oscuros para navegación e indicadores de seguridad; el gris azulado y los grises claros para tablas y formularios. Esta mezcla funciona perfecto cuando buscas seriedad sin recurrir al blanco y negro. Consejo: mantén los colores de error y éxito apagados para que no choquen con la base fría.

Ejemplo de imagen de graphite tide generado usando media.io

10) Oro del marinero

HEX:#081C2F#102A43#243B53#D4AF37#F8F5E6

Estado de ánimo:Clásico, seguro, de lujo

Ideal para:Embalaje de productos de lujo

Clásico y seguro, trae a la mente los uniformes de capitán y un cálido detalle dorado. Utilice el oro como un punto de referencia premium en logotipos, sellos y pequeños bordes, mientras que las marinas proporcionan un telón de fondo resistente. El neutro cremoso evita que el conjunto se sienta frío y ayuda a que la información del producto se mantenga legible. Consejo: Elige un color dorado ligeramente más oscuro para el texto pequeño para que se mantenga en impresión.

Ejemplo de imagen de seafarer gold generado usando media.io

11) Denim y avena

HEX:#0A1B33#12355B#2D6CDF#DCC9A1#F7F3E8

Estado de ánimo:Amigable, casual, Accesible

Ideal para:Tienda de comercio electrónico

Amigable e informal, se siente como un mezclilla bien desgastada con tonos cálidos de avena. Utilice el azul medio para los enlaces y los aspectos destacados, y apoyarse en los neutros claros para las cuadrículas de productos y las páginas largas. El beige cálido es ideal para insignias sutiles, chips de categoría o bandas de fondo. Consejo: Mantenga los CTA consistentes, uno azul, otro neutro, para evitar un escaparate concurrido.

Ejemplo de imagen de denim & oat generado usando media.io

12) Puerto deportivo de neón

HEX:#060B23#0B1E4D#00D1FF#FF4D6D#F8FAFF

Estado de ánimo:Eléctrico, Juvenil, Vida nocturna

Ideal para:Diseño de carteles de eventos

Eléctrico y listo para la vida nocturna, sugiere reflejos de neón en agua oscura. Utilice el cian y el rosa caliente como acentos opuestos para crear un contraste de alta energía sin depender del negro puro. Mantenga el fondo marino-pesado para que la tipografía permanezca legible y los brillantes se sientan intencionales. Consejo: Limite los gradientes a un área (como un titular) para que el diseño no se vuelva caótico.

Ejemplo de imagen de neon marina generado usando media.io

13) Observatorio de Invierno

HEX:#070A14#0E1A2B#223A5E#8FB3FF#F3F6FF

Estado de ánimo:Tranquilo, cósmico, inteligente

Ideal para:Tema de visualización de datos

Tranquilo y cósmico, se siente como un observatorio de invierno con luz fresca de las estrellas. Utilice el azul pálido para los gráficos de líneas y los aspectos destacados, mientras que las marinas más profundas establecen un fondo consistente para los paneles de control e informes. El color casi blanco hace que las leyendas y las etiquetas sean fáciles de escanear en tamaños pequeños. Consejo: Aumente la transparencia de la línea de cuadrícula para que los gráficos no luchen contra la base oscura.

Ejemplo de imagen de Observatorio de Invierno generado usando media.io

14) Pino y mar profundo

HEX:#07101F#0B2545#1B4965#1F7A4D#E8F1F2

Estado de ánimo:Tierra, Al aire libre, Refrescante

Ideal para:Etiqueta de embalaje de marca ecológica

Con base a tierra y al aire libre, combina los azules del mar profundos con un aliento verde pino de frescura. Utilice el verde como señal de confianza para las afirmaciones de sostenibilidad, y mantenga el azul para la estructura y la credibilidad. El pale Ice neutral funciona bien para listas de ingredientes y detalles en letras pequeñas. Consejo: Elige papel sin recubrimiento para que los tonos oscuros se sientan naturales en lugar de brillantes.

Ejemplo de imagen de pine & deep sea generado usando media.io

15) Brújula de Coral

HEX:#081A2F#0F2F57#2C5282#FF6B6B#FFF5F5

Estado de ánimo:Aventurero, cálido, acogedor

Ideal para:Pantallas de integración de aplicaciones móviles

Aventurero y acogedor, se siente como un marcador de coral en un mapa náutico. Estas combinaciones de colores azul oscuro y azul marino son excelentes cuando quieres confianza más un acento amigable y humano para embarcar. Utilice coral para los puntos de progreso y los botones principales, y mantenga el blanco-rosa más suave para fondos de pantalla suaves. Consejo: Asegúrese de que los pases de coral contrasten en azul marino profundizándolo ligeramente para un texto pequeño.

Ejemplo de imagen de coral compass generado usando media.io

16) Tinta real y lavanda

HEX:#0B1026#141B41#2E2A8F#B9A7FF

Estado de ánimo:Creativo, elegante, ligeramente soñador

Ideal para:Sitio web de la agencia creativa

Creativo y ligeramente soñador, se lee como tinta real suavizada por la neblina de lavanda. Utilice el índigo como un color de marca audaz para encabezados y estados interactivos, luego mantenga la lavanda como el tono de soporte en fondos y tarjetas. El lilás casi blanco mantiene el contenido de forma larga tranquilo y legible. Consejo: Agregue grano sutil o degradados a las secciones de lavanda para evitar una sensación de "pastel plano".

Ejemplo de imagen de royal ink & lavender generado usando media.io

17) Agua salada mínima

HEX:#060A10#0C1B2A#1F3B57#9FB7C9#F2F6F9

Estado de ánimo:Limpio, aire, moderno

Ideal para:Sitio web del portafolio

Limpio y aireado, se siente como niebla de agua salada sobre pizarra lisa. Utilice los tonos más oscuros para la navegación y los títulos de proyectos, luego deje que el azul-gris pálido maneje los fondos y los divisores. Este conjunto funciona bien para carteras porque enmarca imágenes sin robar la atención. Consejo: Mantenga las sombras sutiles y confía en el espaciamiento para crear profundidad.

Ejemplo de imagen de agua salada mínima generada usando media.io

18) Jardín nocturno

HEX:#071225#0E2A47#1D4E89#7CCFA8#F3FAF6

Estado de ánimo:Fresco, botánico, sereno

Ideal para:Póster de ilustración botánica

Sereno y botánico, sugiere hojas iluminadas suavemente por la noche con una atmósfera azul fresca. Utilice el verde menta para los detalles del follaje y el azul para los lavados de fondo y las sombras. El blanco blanco suave mantiene la composición transpirable y amigable para la impresión. Consejo: Capa texturas de acuarela para que los tonos profundos permanezcan luminosos en lugar de turbios.

Ejemplo de imagen de jardín nocturno generado usando media.io

19) Uniforme de piloto

HEX:#071021#0F2147#2B3A67#C0C7D1#F7F9FC

Estado de ánimo:Estructurado, confiable, corporativo

Ideal para:Plantilla de presentación B2B

Estructurado y confiable, se siente como un uniforme nítido con detalles de metal pulido. Utilice el azul marino más oscuro para las diapositivas del título y los encabezados de las secciones, luego confíe en los grises suaves para el contenido del cuerpo y los gráficos. Esta paleta se lee bien en proyectores y evita que las cubiertas largas parezcan duras. Consejo: enfatiza los números clave con el índigo medio en lugar de introducir nuevos colores de acento.

Ejemplo de imagen de uniforme de piloto generado usando media.io

20) Acento de ciruela crepúsculo

HEX:#070B1D#121A3D#243B7B#6D28D9#F5F3FF

Estado de ánimo:Atrevido, moderno, creativo

Ideal para:Icono de la aplicación y pantalla splash

Atrevido y moderno, se siente como un azul crepúsculo punctuado por un brillo de ciruela. Utilice el púrpura como un acento controlado para la marca del icono o el encabezado de salpicaduras, manteniendo la mayoría de los elementos de la interfaz de usuario en azul marino. El suave color blanco lavanda ayuda a los degradados y los efectos de brillo a parecer refinados en lugar de ruidosos. Consejo: Mantenga los acentos morados consistentes en todos los estados para que la marca se sienta cohesiva.

Ejemplo de imagen de twilight plum acento generado usando media.io

¿Qué colores combinan bien con el azul marino oscuro?

Los acentos cálidos son la forma más rápida de hacer que el azul marino se sienta acogedor: marfil, crema, avena, gris, cobre y oro añaden suavidad y calidez "premium" sin perder la estructura de la paleta. Estos emparejamientos son especialmente fuertes para embalajes, diseños editoriales e interiores.

Para un look digital moderno, combina el azul marino con tonos frescos como periwinkle, azul hielo y gris azul pálido. Mantener las interfaces legibles, reducir la tensión ocular y crear una separación limpia para las tarjetas, las tablas y los fondos.

Si quieres energía, busca pops de alto cromo como coral, amarillo cítrico, cian o ciruela, pero manténgalos limitados a acciones primarias, estadísticas clave y componentes resaltados para que la jerarquía general permanezca tranquila.

Cómo usar una paleta azul marino oscuro en diseños reales

Comience asignando roles: use el azul marino más oscuro para cabeceras/navegación, un azul marino medio para superficies o secciones, y un azul/gris más claro para cartas y divisores. Esto mantiene la profundidad constante y evita que el diseño se convierta en un solo bloque oscuro.

Luego elige un color de acento para la interacción (botones, enlaces, estados activos) y uno neutro para la legibilidad (blanco o gris claro). En la mayoría de los diseños, esa simple división ofrece un fuerte contraste mientras se mantiene coherente entre las páginas y los componentes.

Por último, prueba tu paleta en contexto: los fondos oscuros pueden hacer que el texto pequeño y los iconos finos desaparezcan. Utilice pesos de fuente ligeramente más pesados, aumente la altura de la línea y confirme el contraste para todos los estados (predeterminado, paso con el cursor, deshabilitado) antes de escalar el sistema.

Crea visuales de paletas azul marino oscuro con IA

¿Necesitas maquetas que coincidan con tu paleta (tableros, carteles, invitaciones, embalajes o interiores)? Con Media.io, puede convertir una solicitud en visuales de la marca en minutos, y luego iterar rápidamente intercambiando acentos, proporciones o estilos.

Para obtener mejores resultados, haga referencia a su paleta en el mensaje utilizando los nombres de colores (azul marino, cobalto, marfil, oro, coral) y describa dónde debe aparecer cada color (fondo, botón CTA, tipografía, tarjetas). Mantenga los diseños simples para que los colores permanezcan en el enfoque.

Una vez que haya generado un aspecto que le guste, reutilice la misma estructura de mensajes en diferentes formatos (social, héroe web, plantilla de diapositivas) para mantener un lenguaje de diseño consistente basado en la Marina.

Siguiente: Paleta de Colores Atardecer