Las 20 mejores paletas de colores azul y marrón oscuro con códigos hexadecimales

Una paleta de colores azul y marrón oscuro combina la claridad fresca con una calidez terrenal, lo que la convierte en una opción versátil para marcas modernas, interiores acogedores y UIs digitales sofisticados.

A continuación, encontrarás 20 combinaciones seleccionadas de azul y marrón con códigos HEX, además de consejos prácticos y prompts de IA para generar visuales a juego.

Por qué funcionan tan bien las paletas azul y marrón oscuro

El azul aporta confianza, estructura y calma, especialmente en tonos marinos profundos. El marrón oscuro añade calidez y textura, lo que impide que el aspecto general se sienta frío o demasiado corporativo.

Juntos, crean un contraste de alta gama que sigue sintiéndose natural: piensa en tinta y cuero, océano y madera, denim y nuez. Por eso las paletas azul y marrón funcionan tan bien en diseño digital y materiales físicos como packaging, señalización e interiores.

Otra ventaja es la legibilidad: los azules profundos y los marrones casi negros realzan la tipografía, mientras que los cremas cálidos y beiges grises mantienen las composiciones legibles sin necesitar blanco puro y duro.

20+ ideas de paletas de color azul y marrón oscuro (con códigos HEX)

1) Espresso a Medianoche

HEX: #0B1D3A #163A63 #2E2A28 #5B3A2B #E7DCCF

Estado de ánimo: misterioso, refinado, acogedor

Ideal para: branding de lujo y empaques de café

Los azules medianoche y marrones espresso recuerdan a un café nocturno y cuero pulido. Usa el azul marino profundo como color principal de marca y el marrón oscuro para tipografía y detalles. El neutro cremoso mantiene la estética premium y legible en etiquetas y encabezados web. Consejo: utiliza estampado foil en marrón sobre azul marino para un acabado sutil de lujo.

Ejemplo de imagen de espresso a medianoche generada con media.io

Media.io

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

Pruébalo Gratis Ahora

2) Cacao de Puerto

HEX: #08213B #1F5A86 #3B2A24 #8A6B55 #D9C7B4

Estado de ánimo: náutico, cálido, terrenal

Ideal para: decoración costera y estilismo de salas de estar

Los azules náuticos y marrones cacao evocan muelles desgastados, cuerdas y luz de lámparas cálidas. Estas combinaciones de azul y marrón oscuro lucen hermosas en paredes, textiles y acabados de madera donde se busca calma sin frialdad. Combínalas con fibras naturales como lino y yute para más calidez costera. Consejo: usa el beige claro en grandes superficies y el azul marino más oscuro para detalles como marcos o muebles empotrados.

Ejemplo de imagen de cacao de puerto generada con media.io

3) Nuez Vaquera (Denim Walnut)

HEX: #123A5A #2E6F9E #2B2624 #6B4A36 #F1E8DD

Estado de ánimo: casual, accesible, moderno

Ideal para: páginas de producto de ecommerce y marcas de estilo de vida

Azules denim con marrón nuez transmiten una sensación casual, familiar y moderna. Usa el azul intermedio para botones y realces, y el marrón casi negro para títulos y precios, aportando suavidad respecto al negro puro. El blanco cálido ayuda a que las fotos de productos se vean limpias sin ser frías. Consejo: reserva el azul más brillante solo para llamadas a la acción y logra una página serena y enfocada.

Ejemplo de imagen de nuez vaquera generada con media.io

4) Mocha Tormentoso

HEX: #0F2A3D #355B77 #3A2F2A #9A7B64 #CFC8C1

Estado de ánimo: tormentoso, calmado, sofisticado

Ideal para: maquetación editorial y artículos de revista

Azules tormentosos con marrones mocha evocan lluvia sobre vidrio y tazas de cerámica humeante. El azul apagado es ideal para citas destacadas y divisores, y los tonos mocha suman calidez a títulos y pies de foto. Usa fondos gris-beige suave para que los diseños sean aireados y legibles. Consejo: usa interlineado generoso con marrón oscuro para mantener un ritmo editorial y refinado.

Ejemplo de imagen de mocha tormentoso generada con media.io

5) Tinta Castaña

HEX: #071A2F #1B3F6B #241B18 #7C4E3B #EADBCB

Estado de ánimo: dramático, clásico, literario

Ideal para: portadas de libros y arte para podcasts

Azul tinta y marrón castaño evocan trazos de pluma estilográfica y estantes de biblioteca antigua. El contraste es ideal para títulos llamativos, especialmente con tipografía color crema sobre azul oscuro. Usa castaño para enmarcar o ilustrar, sumando calidez. Consejo: mantén el azul medio al mínimo para evitar saturar la portada.

Ejemplo de imagen de tinta castaña generada con media.io

6) Trufa de Mar Profundo

HEX: #06263A #0E5176 #2A2422 #5A463E #B8AEA5

Estado de ánimo: profundo, terroso, atmosférico

Ideal para: menús de restaurantes y bares de cócteles

Azules marinos con marrón trufa transmiten intimidad, naturalidad y un toque de misterio. Usa el azul más oscuro para el fondo de menú y texto en gris cálido para buena legibilidad en baja luz. El azul claro resalta secciones o iconos de bebidas. Consejo: usa papel mate o textura de pizarra para que los marrones se sientan más ricos.

Ejemplo de imagen de trufa de mar profundo generada con media.io

7) Bourbon de Plano

HEX: #0C2C59 #2A76B8 #2B1F1A #6A3F2B #F3E6D6

Estado de ánimo: seguro, artesanal, audaz

Ideal para: branding de licores artesanales y sistemas de etiquetas

Blues blueprint vibrantes con marrón bourbon crean un ambiente de taller artesanal lleno de confianza. Esta paleta azul y marrón oscuro funciona genial en etiquetas de botellas que buscan tradición y un toque moderno. Acompáñala con ilustraciones tipo grabado y base crema caliente para resaltar detalles. Consejo: usa el azul brillante solo como franja de acento para un aire premium, no deportivo.

Ejemplo de imagen de bourbon de plano generada con media.io

8) Zafiro Madera

HEX: #0A2A4A #1F66A5 #2D2420 #8B6A52 #DCD2C5

Estado de ánimo: aventurero, limpio, fiable

Ideal para: sitios de viajes y listados de cabañas

Azules zafiro y marrones madera evocan aire montañés, cabañas sólidas y mañanas frescas. Usa los azules para navegación y enlaces, y los marrones cálidos para etiquetas, precios o marcadores de mapa. El neutro suave es ideal como fondo en diseños centrados en fotografía. Consejo: botones en azul brillante y azul marino oscuro solo para cabeceras, así se reduce la saturación visual.

Ejemplo de imagen de zafiro madera generada con media.io

9) Cuero Crepúsculo

HEX: #111E3A #3A5E86 #1F1714 #704C3B #EFE2D4

Estado de ánimo: elegante, masculino, premium

Ideal para: anuncios y páginas de productos para cuidado masculino

Azul crepúsculo con marrón cuero resulta elegante, premium y marcadamente masculino. La base oscura permite fotos de producto de alto contraste, mientras el tono cuero aporta calidez a llamadas y iconos de ingredientes. Usa crema como espacio negativo para que el diseño no pese demasiado. Consejo: utiliza degradados solo en los azules para un acabado pulido.

Ejemplo de imagen de cuero al crepúsculo generado usando media.io

10) Corteza Azul Marino

HEX: #08162C #21476F #2B211D #5D443A #C9BEB2

Estado de ánimo: natural, estable, discreto

Ideal para: branding de ropa outdoor y etiquetas colgantes

El azul marino y marrones corteza evocan senderos forestales al anochecer, arraigados y confiables. Usa el azul marino oscuro para marcas principales y los tonos corteza para etiquetas secundarias, detalles de costura o bordes de etiquetas. El gris cálido neutral mantiene la legibilidad de la tipografía sobre papeles reciclados. Consejo: añade textura mediante el grano del papel en lugar de más colores para mantener la paleta honesta y resistente.

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

11) Muelle Lluvioso

HEX: #0A2336 #2B5D7D #2E241F #906A51 #E3D6C8

Estado de ánimo: cinematográfico, tranquilo, nostálgico

Ideal para: carteles de película y flyers de eventos

Azules cinematográficos y marrones desgastados evocan un muelle lluvioso, farolas y agua reflectante. Estas combinaciones de azul y marrón oscuro son fuertes para carteles porque los tonos oscuros crean profundidad inmediata. Combina con tipografía condensada en crema para máxima legibilidad a distancia. Consejo: mantén la imagen en sombras frías y usa el marrón cálido sólo en un punto focal destacado.

Ejemplo de imagen de muelle lluvioso generado usando media.io

12) Cacao Cósmico

HEX: #0B1430 #2E4D8C #231A17 #6E4B3C #B9B0A7

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

Ideal para: dashboards SaaS y UI de analíticas

El azul cósmico con marrón cacao se siente como un cielo nocturno sobre luces cálidas de ciudad. Usa el azul más oscuro para la estructura de la app, luego incorpora el azul medio para gráficos y estados activos. El marrón funciona sorprendentemente bien para distintivos secundarios y micro-accentos donde quieres calidez sin destacar demasiado. Consejo: mantén los fondos de tarjetas un poco más claros que la estructura para preservar la jerarquía.

Ejemplo de imagen de cacao cósmico generado usando media.io

13) Tueste Ártico

HEX: #0C2A43 #4A87B5 #2C2320 #7A5846 #F6EFE6

Estado de ánimo: fresco, acogedor, equilibrado

Ideal para: interiores de café y pizarras de menú

Azules árticos frescos con marrones tostados equilibran la nitidez y la comodidad, como aire frío fuera de un café cálido. Esta paleta azul/marrón oscuro funciona bien en pizarras de menú, donde el fondo claro mantiene precios y elementos fáciles de leer. Combínalo con madera pálida e iconos lineales simples para una sensación moderna y limpia. Consejo: usa el azul brillante para encabezados de categoría y el marrón tostado para nombres de ítem para guiar la lectura.

Ejemplo de imagen de tueste ártico generado usando media.io

14) Madera Índigo Vintage

HEX: #16233A #334E72 #2A201C #8C6A54 #D8D0C7

Estado de ánimo: tradicional, tranquilo, atemporal

Ideal para: logos tradicionales y sets de papelería

Índigo vintage con marrón cálido madera se siente atemporal, como tinta de impresión sobre papel texturizado. Usa índigo para monogramas y sellos, y reserva el azul medio para líneas y marcas secundarias. Los tonos madera agregan calidez a sobres, tarjetas de visita e insertos de packaging. Consejo: imprime los marrones ligeramente más claros que en pantalla para evitar tonos turbios en papeles sin recubrimiento.

Ejemplo de imagen de madera índigo vintage generado usando media.io

15) Noche de Museo

HEX: #0A1633 #2D4A7B #1F1A17 #5C4337 #E8E1DA

Estado de ánimo: artístico, silencioso, sofisticado

Ideal para: invitaciones de galería y carteles de exposición

Azules nocturnos de museo y marrones suaves evocan arte y sofisticación, como salas tenues y marcos iluminados. Usa el azul marino como base dominante, y coloca detalles de exhibición en el neutral pálido para máxima legibilidad. El marrón es perfecto para pequeños acentos direccionales, fechas o nombres de curador. Consejo: deja mucho espacio negativo para que el diseño se sienta curado, no sobrecargado.

Ejemplo de imagen de noche de museo generado usando media.io

16) Pizarra Brownstone

HEX: #0D2633 #3F6A7A #2E2521 #6B554A #D0C6BD

Estado de ánimo: urbano, maduro, compuesto

Ideal para: portfolios de arquitectura y webs de estudio

Azul pizarra y tonos brownstone se sienten urbanos y compuestos, como fachadas de ciudad tras la lluvia. Pon navegación y encabezados en los tonos más oscuros para autoridad, luego usa el azul apagado para enlaces y estados hover. El fondo gris cálido evita que fotos de proyectos y planos se vean demasiado fríos. Consejo: usa el marrón como color de línea fina de la cuadrícula para estructurar estudios de caso de forma sutil.

Ejemplo de imagen de pizarra brownstone generado usando media.io

17) Blueberry Brandy

HEX: #1A2B5A #3E78B2 #2A1C16 #7B4A33 #F0E2D2

Estado de ánimo: rico, festivo, acogedor

Ideal para: invitaciones de fiestas y promos de bebidas

Azules de arándano ricos con marrones brandy resultan festivos y acogedores sin volverse llamativos. Estas combinaciones de azul/marrón oscuro lucen excelente en invitaciones donde se busca calidez, profundidad y un toque de celebración. Combínalos con texturas de papel crema y un poco de tinta metálica si es impresión. Consejo: mantén la composición simple y deja que un encabezado azul audaz sea el protagonista.

Ejemplo de imagen de blueberry brandy generado usando media.io

18) Cedro Cobalto

HEX: #0D2E63 #2E74D4 #2A211C #6C4D3A #E6D9CB

Estado de ánimo: energético, moderno, seguro

Ideal para: branding tecnológico y landing pages de apps

Energía cobalto contra marrón cedro se siente moderna, segura y un poco atrevida. Usa el azul brillante para acciones clave y destacados principales, mientras el azul marino oscuro fija encabezados y pies de página. Cedro añade calidez a iconos, ilustraciones y tarjetas de testimonios para que la página se sienta humana. Consejo: limita el azul brillante a un solo estilo de acción para que los elementos de conversión sean inconfundibles.

Ejemplo de imagen de cedro cobalto generado usando media.io

19) Noir Latte

HEX: #0A1224 #2B4F79 #1E1816 #5E3F33 #DCCFC3

Estado de ánimo: minimalista, íntimo, sofisticado

Ideal para: branding y señalética de hoteles boutique

Azules noir y marrones latte crean un ambiente íntimo y sofisticado como un lobby suavemente iluminado. Usa tonos casi negros para la tipografía de señalización y el azul apagado para indicaciones o números de habitaciones. El neutral cálido ayuda a que todo el sistema se sienta acogedor en lugar de severo. Consejo: aumenta el espaciado de letras en señalética oscura para mejorar la legibilidad a distancia.

Ejemplo de imagen de noir latte generado usando media.io

20) Cabina Oceánica

HEX: #082A44 #2C6B8F #2A231F #7C5D49 #EEE5DA

Estado de ánimo: relajado, rústico, ventilado

Ideal para: tableros de inspiración de interiores estilo Pinterest

Azules oceánicos con marrones de cabina se sienten relajados y rústicos, como maderas flotantes junto a aguas tranquilas. Usa el azul claro para textiles aireados y acentos de pintura, mientras los marrones funcionan mejor en muebles de madera e iluminación cálida. El neutral cremoso une todo para un moodboard fresco y fácilmente respirable. Consejo: repite el marrón en pequeños elementos decorativos para que el espacio se sienta cohesivo, no pesado.

Ejemplo de imagen de cabina oceánica generado usando media.io

¿Qué colores combinan bien con azul y marrón oscuro?

Los neutros cálidos son la combinación más fácil: crema, avena, beige y greige suavizan la transición entre azules intensos y marrones oscuros mientras mantienen legibilidad y sensación premium.

Para acentos, metálicos apagados (latón, bronce, oro suave) agregan sensación artesanal, mientras que acentos fríos como teal o pizarra pueden modernizar los azules sin competir con los marrones.

Si necesitas un toque más brillante, usa un color de acento controlado (como un cobalto más puro o una terracota suave) con moderación—idealmente para CTAs, distintivos o pequeños elementos decorativos.

Cómo usar una paleta azul y marrón oscuro en diseños reales

Empieza asignando roles: utiliza el azul marino más oscuro como ancla (encabezados, fondos, secciones principales), luego incorpora marrón oscuro para tipografía o bordes donde quieras calidez sin perder contraste.

Deja que el neutral claro haga el trabajo de legibilidad. En web y UI, es ideal para superficies (tarjetas, áreas de contenido) así las fotografías y productos se ven naturales en lugar de severos.

Mantén la saturación bajo control: estas paletas lucen más premium cuando los azules permanecen profundos y los marrones terrenales. Usa el azul más brillante (cuando exista) como color único de acción para enlaces y botones principales.

Crea visuales de paletas azul y marrón oscuro con IA

Si ya tienes códigos HEX pero necesitas visuales a juego (mockups, carteles, escenas de UI, moodboards), generar ejemplos con IA puede acelerar la exploración y mantener los conceptos consistentes.

Usa prompts que mencionen materiales (cuero, nogal, papel mate, tinta azul marino) y luces (luz natural suave, iluminación de estudio) para reforzar la atmósfera azul y marrón.

Una vez que te gusta una dirección, itera cambiando sólo una variable a la vez—como “más espacio negativo” o “acento mínimo”—para que la paleta permanezca coherente.

Siguiente: Paleta de colores arcoíris