20 Paletas de Colores Azul Medianoche: Códigos Hex y Ejemplos de Diseño AI

Azul medianoche es el tipo de azul oscuro que se percibe como premium, tranquilo y moderno a la vez. Es lo suficientemente profundo como para sentirse dramático, pero aún así es más fácil de ver que el negro puro.

A continuación, encontrarás combinaciones de colores azul medianoche que puedes usar para marcas, interfaces, carteles, empaques e interiores, —cada una con sus códigos HEX y un prompt de imagen de IA que puedes reutilizar en Media.io.

Por Qué Las Combinaciones de Azul Medianoche Funcionan Tan Bien

Azul medianoche (como #0b1320) se encuentra en un punto ideal: es lo suficientemente oscuro como para sentirse cinematográfico y elegante, pero mantiene más carácter de color que el negro. Lo que lo convierte en un ancla sólida para marcas que desean ser “serias” sin parecer frías.

Debido a su bajo deslumbramiento natural, el azul medianoche también es excelente para interfaces—especialmente en modo oscuro—donde el contraste y la legibilidad importan. Combínalo con acentos controlados (cian, coral, oro) y obtienes claridad sin ruido visual.

Desde el punto de vista del diseño, el azul medianoche combina suavemente tanto con neutros cálidos (marfil, pergamino, arenisca) como con tonos fríos (acero, verde azulado, aqua helado). Esa flexibilidad es la razón por la cual funciona en carteles, empaques, interiores y diseños editoriales.

20+ Ideas de Paletas de Colores Azul Medianoche (con Códigos HEX)

1) Puerto Nocturno

HEX: #0b1320 #0f2a45 #1e4e6a #8fb8c9 #f2efe9

Estado de ánimo: cinematográfico, tranquilo, náutico

Ideal para: hero UI de página de inicio de marca de viajes

Cinematográfico y tranquilo, se siente como luces de puerto atravesando la niebla sobre aguas profundas. Utiliza la base oscura para encabezados y navegación, permitiendo que el azul marino suave resalte y maneje gráficos. El tono cálido fuera del blanco mantiene los diseños legibles sin ser brillantes. Consejo: reserva el tono más claro para las llamadas de acción clave para que la página permanezca con ambiente pero siga convirtiendo.

Ejemplo de imagen de puerto nocturno generado con media.io

Media.io

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

Pruébalo Ahora Gratis

2) Nébula Aterciopelada

HEX: #0d1026 #1b1f4a #3d2c6d #b07bb4 #f6d6e8

Estado de ánimo: ensoñador, lujoso, cósmico

Ideal para: portada de álbum

Ensoñadores y lujosos, estos tonos evocan un cielo aterciopelado con un suave resplandor de nébula. Mantén el navy más profundo para el fondo y ve agregando violeta y ciruela para degradados y sombras de tipografía. El rosa claro funciona mejor como acento sutil en vez de bloque completo. Consejo: añade grano y viñeta suave para enriquecer los morados sin que se vuelvan demasiado llamativos.

Ejemplo de imagen de nébula aterciopelada generada con media.io

3) Medianoche Ártica

HEX: #071525 #0c2a45 #2d6f85 #a7d9e6 #eef9fb

Estado de ánimo: nítida, aireada, polar

Ideal para: gráficos y tablas de dashboard SaaS

Nítida y aireada, esta combinación de azul medianoche sugiere noche polar con reflejos helados y aire limpio. Construye encabezados de tablas y barras laterales con los azules más oscuros y utiliza el aqua pálido para estados seleccionados y acentos de datos. El tono casi blanco previene la fatiga en tableros densos. Consejo: Mantén las líneas de la cuadrícula sutiles y usa el destaque aqua para el enfoque y así evitar ruido visual.

Ejemplo de imagen de medianoche ártica generada con media.io

4) Tinta y Marfil

HEX: #0a1220 #111827 #374151 #e5e7eb #fff7ed

Estado de ánimo: editorial, minimalista, refinado

Ideal para: sistema tipográfico de portafolio web

Refinado y editorial, se siente como tinta sobre papel marfil grueso, con un contraste sutil. Esta paleta de azul medianoche es ideal para diseños centrados en la tipografía, donde la jerarquía importa más que la decoración. Usa los dos tonos más oscuros para titulares y navegación, y permite que el marfil cálido suavice las áreas grandes blancas. Consejo: cambia el negro puro por navy profundo para que el sitio mantenga un aspecto premium y menos agresivo.

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

5) Espresso Zafiro

HEX: #0b1b3a #123c69 #f0b429 #5c3a21 #f7f3e9

Estado de ánimo: audaz, cálido, sofisticado

Ideal para: empaque de café y anuncio de producto

Audaz y sofisticado, se siente como espresso nocturno con un brillo de zafiro. Combina los azules profundos con el dorado cálido para etiquetas, sellos y acentos premium que sobresalgan a distancia. El marrón café le da base al diseño para que el dorado nunca se vea exagerado. Consejo: Mantén los elementos dorados pequeños y deliberados, como líneas de foil o una insignia, para mantener el toque exclusivo.

Ejemplo de imagen de espresso zafiro generada con media.io

6) Lavanda a la Luz de la Luna

HEX: #10162f #2a2f6b #6b5ca5 #d9c7ff #f5f1ff

Estado de ánimo: suave, romántico, nocturno

Ideal para: suite de invitación de boda

Suaves y nocturnas, estas combinaciones azul medianoche evocan la luz de la luna sobre pétalos de lavanda y cintas de seda. Usa el tono más oscuro para tipografía y monogramas, luego introduce lila para bordes, íconos y patrones delicados. El blanco lavanda pálido mantiene el papel aireado y romántico. Consejo: Troquela los elementos en tinta oscura y mantén los acentos lila delgados para que el conjunto sea elegante, no infantil.

Ejemplo de imagen de lavanda a la luz de la luna generada con media.io

7) Tormenta Costera

HEX: #0b1d2e #1b3a57 #3a6d8c #7fb1c6 #d9e9ef

Estado de ánimo: fresca, ventosa, segura

Ideal para: publicación social de marca outdoor

Ventosa y segura, se siente como una tormenta rodando sobre agua costera brillante. Deja que el navy ancle tus bloques de título y usa los azules medios para formas y olas superpuestas. El tono de neblina pálida funciona bien como espacio negativo para que la publicación se mantenga limpia en móvil. Consejo: Mantén el contraste alto colocando texto claro solo en los dos tonos más oscuros.

Ejemplo de imagen de tormenta costera generado con media.io

8) Observatorio de Bronce

HEX: #0b1526 #1c2f4a #2f4f6f #c6a15b #f2eadc

Estado de ánimo: vintage, académico, atmosférico

Ideal para: diseño de portada de libro

Vintage y académico, evoca instrumentos de bronce, viejos mapas estelares y un observatorio silencioso. Estas combinaciones de azul medianoche brillan cuando buscas contraste clásico: navy profundo para el fondo, bronce para títulos y ornamentos, y pergamino para dar respiro. Usa el azul medio como puente para degradados o constelaciones ilustradas. Consejo: Mantén los acentos de bronce ligeramente apagados para evitar que luzcan demasiado metálicos en pantalla.

Ejemplo de imagen de observatorio de bronce generado con media.io

9) Bosque al Anochecer

HEX: #08131f #0f2d2e #2f5d50 #7aa68d #e7efe6

Estado de ánimo: terroso, tranquilo, arraigado

Ideal para: Identidad de marca ecológica

Silenciosa y arraigada, se siente como sombras de pinos y aire fresco justo antes de que caiga la noche. Usa el azul verdoso profundo como tono principal de tu marca, y apóyate en los verdes musgo para gráficos de apoyo y botones secundarios. El blanco salvia pálido hace que los mensajes sostenibles se sientan tranquilos y confiables. Consejo: combínalo con texturas de papel reciclado e iconografía minimalista para mantener la identidad moderna, no rústica.

Ejemplo de imagen de bosque al atardecer generado usando media.io

10) Cherry Noir

HEX: #0b1020 #22112b #4b1d3f #b23a64 #f3d3dd

Estado de ánimo: melancólico, dramático, romántico

Ideal para: Póster para evento de coctelería

Melancólica y dramática, esta paleta azul medianoche sugiere cócteles a la luz de las velas con un destello rojo cereza. Usa el azul oscuro y la berenjena como base, y deja que el acento cereza guíe detalles clave como la fecha, el lugar y el precio de las entradas. El tono rubor mantiene el póster legible y da suavidad a la tipografía. Consejo: prueba un fondo duotono y reserva el tono cereza para un solo elemento focal.

Ejemplo de imagen de cherry noir generado usando media.io

11) Glacier Steel

HEX: #0a1624 #12304a #2a5c7a #9bb3c4 #e9eef2

Estado de ánimo: técnico, frío, confiable

Ideal para: Diapositivas para presentaciones B2B

Técnica y fiable, se siente como acero frío, vidrio e ingeniería limpia. Usa el tono más profundo para títulos de diapositiva y divisores de sección, y recurre a los azules intermedios para diagramas e íconos. El gris azulado claro hace legibles los gráficos sin perder la temperatura fría. Consejo: mantén un solo color de acento por diapositiva y apóyate en matices para el resto de la jerarquía.

Ejemplo de imagen de glacier steel generado usando media.io

12) Coral After Dark

HEX: #0b1326 #102a43 #1f6f8b #ff6b6b #fff1f0

Estado de ánimo: lúdico, moderno, alto contraste

Ideal para: pantallas de bienvenida de app

Lúdica y moderna, parece coral neón brillando en un mar profundo de noche. Estas combinaciones de azul medianoche funcionan bien para onboarding porque el coral se interpreta de inmediato como avance y acción. Usa el azul verde medio para ilustraciones secundarias y rellenos de íconos amigables. Consejo: deja el coral solo para botones y detalles clave, así se mantiene especial y no sobrecarga el flujo.

Ejemplo de imagen de coral after dark generado usando media.io

13) Sandstone Eclipse

HEX: #0a1422 #1b2a3a #4a5568 #d6c3a3 #f7f0e6

Estado de ánimo: neutro cálido, arquitectónico, atemporal

Ideal para: mood board de interior de salón

Arquitectónica y atemporal, se siente como un cielo vespertino sobre arenisca cálida y lino. Usa los tonos oscuros para mobiliario empotrado o muros de acento, y equilíbralos con el beige arenoso en textiles y alfombras. El crema suave mantiene el espacio abierto y estratificado en lugar de pesado. Consejo: agrega herrajes negro mate solo donde se necesite para definir sin quitar calidez.

Ejemplo de imagen de sandstone eclipse generado usando media.io

14) Teal Constellation

HEX: #071a2d #0b3a4a #0f7a7a #7fe0d8 #e7fffb

Estado de ánimo: enérgico, acuático, futurista

Ideal para: flyer para conferencia tecnológica

Enérgica y acuática, esta paleta azul medianoche sugiere constelaciones brillando sobre aguas profundas. Usa la base medianoche para el campo del flyer y coloca tipografía e íconos en teal para un contraste moderno y nítido. El aqua brillante es ideal para pequeños acentos como fechas, códigos QR y marcadores de sección. Consejo: mantén el fondo limpio y que los degradados teal transmitan el movimiento en vez de agregar formas extra.

Ejemplo de imagen de teal constellation generado usando media.io

15) Rose Smoke

HEX: #0b1224 #2a1f3d #5a3f6f #d7a6c2 #f8f1f6

Estado de ánimo: suave, nostálgico, elegante

Ideal para: packaging para marca de belleza

Suave y nostálgica, parece polvo de rosa flotando en una habitación con poca luz. Deja el tono más oscuro para el logo y textos pequeños, mientras que los malvas y rosas construyen bloques suaves y degradados. El blush pálido es mejor como fondo primario del empaque para un look luminoso y premium. Consejo: usa acabados satinados y patrones tonales para que el empaque se sienta táctil sin ser recargado.

Ejemplo de imagen de rose smoke generado usando media.io

16) Cyber Midnight UI

HEX: #0a0f1f #0d1b3d #1f3cff #35c9ff #e9f1ff

Estado de ánimo: eléctrica, elegante, tecnológica

Ideal para: UI de app fintech en modo oscuro

Eléctrica y elegante, se siente como luces de ciudad reflejadas en el vidrio a las 2 a.m. Esta paleta azul medianoche es ideal para modo oscuro, donde la claridad depende de acentos brillantes y controlados. Usa el azul intenso para acciones principales y el cian para estatus y micro-interacciones. Consejo: limita los dos acentos brillantes a pocos componentes por pantalla para que la interfaz siga premium, no ruidosa.

Ejemplo de imagen de cyber midnight ui generado usando media.io

17) Museum Editorial

HEX: #0b1320 #1f2937 #6b7280 #d1d5db #fafaf9

Estado de ánimo: curado, tranquilo, clásico moderno

Ideal para: diseño de revista editorial

Curada y tranquila, imita una pared de galería: marcos profundos, iluminación suave y mucho espacio negativo. Construye ritmo tipográfico sólido con el azul marino para titulares y los grises para pies y citas destacadas. El blanco cálido evita que el diseño se sienta estéril, especialmente en textos largos. Consejo: usa el tono más oscuro solo para la jerarquía superior, así el conjunto se siente aireado y costoso.

Ejemplo de imagen de museum editorial generado usando media.io

18) Luxe Hotel Lobby

HEX: #091223 #132a3e #2b4c5f #b08d57 #1c1c1c

Estado de ánimo: lujo, íntima, dramática

Ideal para: cabecera de web para hotel

Lujosa e íntima, evoca un lobby tenue con detalles en latón y sombras aterciopeladas. Una paleta azul medianoche como esta funciona mejor cuando el dorado permanece sobrio, como toque final en botones, íconos o líneas. Usa el carbón como tono de profundidad para pies de página y overlays. Consejo: elige fotografía cálida y aplica una superposición azul marino para que los visuales combinen con la paleta en vez de competir con ella.

Ejemplo de imagen de luxe hotel lobby generado usando media.io

19) Winter Wedding Suite

HEX: #0b1630 #233b6e #6b8fe6 #c9d6ff #fff8fb

Estado de ánimo: fresco, festivo, etéreo

Ideal para: invitación de boda de invierno

Fresca y festiva, se siente como nieve al anochecer y seda azul suave. Usa el tono profundo para nombres y detalles del lugar, y el azul más claro para bordes y pequeños íconos como estrellas o copos de nieve. El lavanda-azul helado pálido es un fondo sutil que sigue transmitiendo lo nupcial. Consejo: mantén los elementos decorativos escasos y deja que los espacios generosos aporten elegancia.

Ejemplo de imagen de winter wedding suite generado usando media.io

20) Spacebound Gradient

HEX: #060b1a #0b1f3a #233a7a #6b5cff #f1efff

Estado de ánimo: expansiva, moderna, atmosférica

Ideal para: diseño de ticket para festival de música

Expansiva y atmosférica, estas combinaciones de azul medianoche lucen como un degradado espacial profundo con matiz violeta en los bordes. Usa el casi negro como base del ticket y genera una transición suave del índigo al violeta en la zona focal. El blanco suave mantiene los códigos QR y notas legales nítidos sin romper la atmósfera. Consejo: aplica el degradado solo a un panel para que las zonas de escaneo sigan teniendo mucho contraste.

Ejemplo de imagen de spacebound gradient generado usando media.io

¿Qué Colores Combinan Bien con el Azul Medianoche?

El azul medianoche combina hermosamente con neutros cálidos como marfil, crema, pergamino, beige y rubor suave: estos hacen los diseños oscuros legibles y dan sensación premium en vez de pesadez.

Para un look moderno y de alto contraste, añade un acento brillante como coral, cian o azul eléctrico. Usa el acento con moderación (botones, insignias, números clave) para que el diseño se mantenga limpio.

Si buscas una dirección más calmada y “natural”, combina azul medianoche con teal, salvia y verdes musgo. Esto crea un ambiente terroso y arraigado que sigue siendo contemporáneo.

Cómo Usar una Paleta de Azul Medianoche en Diseños Reales

Comienza eligiendo azul medianoche como base para superficies grandes: cabeceras, menús, fondos, bloques principales o paneles de packaging. Después elige un neutro claro para dar respiro y legibilidad (tarjetas, fondos de página, espacios negativos).

Luego, decide un único rol para el acento: acción (botones CTA), énfasis (datos clave), o decoración (ornamentos). Cuando el azul medianoche es la base, los acentos cobran mayor fuerza, así que normalmente necesitas menos cantidad.

Por último, gestiona el contraste intencionadamente: pon texto blanco o casi blanco sobre los dos tonos más oscuros, y usa tonos intermedios para estados UI secundarios, divisores e ilustraciones. Así la jerarquía será clara sin que todo grite.

Crea Visuales de Paletas Azul Medianoche con IA

Si quieres maquetas rápidas para UIs, pósters, invitaciones o packaging, puedes generar imágenes alineadas a tu marca con IA usando los prompts de paleta anteriores. Cambia el tema (por ejemplo “hero de página de inicio” o “portada de libro”) manteniendo el lenguaje cromático consistente.

Media.io Text-to-Image es útil para explorar variantes—como añadir grano, elegir una proporción distinta o cambiar el estilo de diseño—sin reconstruir tu layout desde cero.

Siguiente: Paleta de Colores del Espacio