Las 20 mejores combinaciones de gris y azul oscuro: códigos hex y consejos

Las paletas de gris y azul oscuro se encuentran en el punto ideal entre el color neutro moderno y el color profundo y seguro. Se leen limpios en la interfaz de usuario, se sienten premium en la marca y se mantienen tranquilos y compostos en los interiores.

Desde grises inspirados en concreto hasta acentos azul marino oscuros, estos esquemas son fáciles de escalar a través de fondos, tipografía y elementos de apoyo, sin perder contraste o claridad.

¿Por qué las paletas gris y azul oscuro funcionan tan bien?

El gris y el azul oscuro crean un contraste naturalmente equilibrado: el gris aporta neutralidad y estructura, mientras que el azul oscuro agrega profundidad y autoridad. Juntos, se sienten modernos sin volverse estériles.

Estas paletas también son flexibles a través de medios. En las pantallas, los azules oscuros con inclinación azul marino admiten tipografía legible y estados de interfaz de usuario accesibles; En la impresión, los grises fríos mantienen los diseños nítidos y consistentes.

Debido a que los tonos están restringidos, puedes introducir un solo acento (como cobre, coral o verde neón) y crear instantáneamente una jerarquía, sin luchar contra el esquema base.

Más de 20 Ideas de paleta de Color gris azul oscuro (con códigos hexagonales)

1) Hormigón tormentoso

hexagonal:#2b2f36#404754#5d6675#8a919c#cfd3d8

estado de ánimo:Urbano, tranquilo, a tierra

Mejor para:moodboards de diseño de interiores modernos

El hormigón fresco y lavado por la lluvia y las sombras de medianoche dan un tono urbano y tranquilo. La mezcla se lee refinada sin sentirse fría, especialmente cuando se agrega madera cálida o latón cepillado. Utilice esta paleta de colores gris azul oscuro para salas de estar, espacios de oficina o presentaciones de arquitectura donde la claridad importa. Consejo: Mantenga el gris más claro como el color principal de la superficie, luego reserve el azul marino profundo para los adornos y las piezas focales.

Ejemplo de imagen de hormigón tormentoso generado usando media.io

Media.io

Media.io es un estudio de IA en línea para crear y editar vídeos, imágenes y audio en su navegador.

Pruébalo ahora gratis

2) Puerto de la medianoche

hexagonal:#0b1d33#123a5a#1f5a7a#6b7c8a#d7dde2

estado de ánimo:Náutico, Cinematográfico, Confiado

Mejor para:banners y landing pages de brand hero

El agua de tinta, las luces del muelle y un horizonte nítido le dan a este set un toque cinematográfico. Brilla en las secciones de héroes, donde los azules profundos pueden llevar el titular, mientras que los grises fríos mantienen el diseño limpio. Combinar con un solo acento cálido como cobre o coral para un contraste instantáneo. Consejo: Utilice el gris pálido como fondo de texto para evitar una página pesada y oscura.

Ejemplo de imagen de midnight harbor generado usando media.io

3) pizarra y plata

hexagonal:#1c2430#2f3b4a#4a5665#a7b0ba#f2f4f6

estado de ánimo:Pulido, Mínimo, Profesional

Mejor para:Cubiertas de diapositivas corporativas e informes

La pizarra lisa y el suave color plateado se sienten como un traje bien hecho bajo la fresca iluminación de la oficina. Los tonos mantienen gráficos, tablas y copias densas legibles sin parecer blando. Agregue un color de acento restringido como azul o dorado para las roturas y las secciones. Consejo: reserve el tono más oscuro para encabezados y números clave para crear una jerarquía instantánea.

Ejemplo de imagen de slate & silver generado usando media.io

4) Oficina de Denim

hexagonal:#0f2a43#1e3a57#3a5872#7c8b97#e6e9ec

estado de ánimo:Accesible, moderno, confiable

Mejor para:Pantallas de interfaz de usuario y configuración de SaaS

Los azules vaqueros limpios con neutros grises suaves se sienten amigables y productivos. El rango de contraste admite estados claros de la interfaz de usuario, desde la navegación hasta los divisores sutiles. Combinar con un color de acción brillante como limón o cian para los botones principales. Consejo: Utilice el azul de tono medio para estados seleccionados para que el tono más oscuro permanezca disponible para textos pesados de accesibilidad.

Ejemplo de imagen de denim office generado usando media.io

5) Asfalto de invierno

hexagonal:#1a2028#2d3540#444e5c#8b949e#f7f8fa

estado de ánimo:Crujiente, fresco, discreto

Mejor para:lookbooks de moda y fondos de fotografía de comercio electrónico

La luz helada sobre el asfalto oscuro crea un frío editorial limpio. La paleta admite tomas de productos y tipografía sin robar la atención de las telas o siluetas. Combinar con espacio blanco y un solo acento punzante como rojo para las etiquetas de venta. Consejo: Mantenga las sombras ligeramente azuladas para mantener la sensación de invierno en las fotos.

Ejemplo de imagen de asfalto de invierno generado usando media.io

6) Mínimo de tinta

hexagonal:#111822#1e2a3a#2f4157#7a8696#dfe4ea

estado de ánimo:Concentrado, elegante, tranquilo

Mejor para:Sitios web de portafolio y estudios de casos

Los tonos de tinta profundos y los grises suavizados se sienten como un escritorio de estudio bien iluminado por la noche. El contraste restringido hace que los estudios de caso de forma larga sean fáciles de escanear, especialmente con una fuerte jerarquía tipográfica. Combinar con un neutro cálido como arena para evitar que la página se sienta demasiado fresca. Consejo: Utilice el gris claro para los fondos de las secciones para que aparezcan imágenes y capturas de pantalla.

Ejemplo de imagen de inkbound minimal generado usando media.io

7) Crepúsculo costero

hexagonal:#0e2538#163b55#2e607a#7b8f9e#e9f0f4

estado de ánimo:Fresco, aireado, costero

Mejor para:Carteles de viaje y guías de destinos

El aire del mar y los azules de la puesta de sol que se desvanecen traen una tranquilidad brisante a la página. Estas combinaciones de color gris azul oscuro funcionan maravillosamente para los gráficos de viaje, donde la claridad y el estado de ánimo necesitan convivir. Combínalo con beige arena o melocotón iluminado por el sol para obtener calidez y un toque de nostalgia. Consejo: Mantenga el tono más ligero como fondo para preservar esa sensación de cielo abierto.

Ejemplo de imagen de crepúsculo costero generado usando media.io

8) Flor de grafito

hexagonal:#2a2d33#3b3f48#2b4a66#6a8aa6#e7edf2

estado de ánimo:moody, suave, artístico

Mejor para:Ilustraciones botánicas y papelería

El grafito ahumado con pétalos azules suaves se siente poético y ligeramente misterioso. Los tonos neutros más oscuros añaden profundidad, mientras que el resplandor aireado evita que las flores se vuelvan pesadas. Combinar con texturas de papel moreno o crema para un acabado romántico. Consejo: Utilice el azul medio para el trabajo de línea para que el tono más oscuro pueda permanecer reservado para las sombras.

Ejemplo de imagen de flor de grafito generado usando media.io

9) Planos de acero

hexagonal:#101826#20314a#325070#6d7e8c#c9d1d9

estado de ánimo:Técnica, precisa, moderna

Mejor para:Paneles de datos y UI de análisis

Los blues blues y los grises de acero se sienten nítidos, ordenados y silenciosamente futuristas. Los pasos de valor admiten gráficos, cuadrículas y estados de movimiento sin ruido visual. Combine con un solo color indicador brillante como el verde neón para alertas y estados de éxito. Consejo: Mantenga las líneas de rejilla en color gris claro para que los datos, no el andamio, capten la atención.

Ejemplo de imagen de planos de acero generados usando media.io

10) Noche de Museo

hexagonal: #0a0f19 #152033 #223552 #5f6d7c #e0e5ea

estado de ánimo: lujoso, dramático, curado

Mejor para: flyers de exposiciones de arte y promociones de eventos

Las paredes tenues de la galería y los marcos iluminados generan un ambiente dramático y curado. Los tonos profundos hacen que la tipografía se sienta premium, mientras que el gris pálido mantiene fechas y detalles legibles. Combina con un acento refinado como oro champán para un acabado de alta gama. Consejo: usa el tono más oscuro para el fondo y lleva el texto al gris más claro para lograr un contraste limpio.

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

11) Azul Marino Nublado

hexagonal: #141b24 #223044 #2f4663 #6f8294 #f0f3f6

estado de ánimo: suave, fiable, equilibrado

Mejor para: branding de salud y sitios web de servicios

Una base azul marino nublada con grises brumosos transmite tranquilidad y confianza. Los tonos son lo suficientemente suaves para marcas de bienestar pero aún estructurados para páginas de servicio y formularios. Combina con un verde suave o aguamarina para reforzar un mensaje limpio y cuidadoso. Consejo: guarda el gris medio para botones secundarios y textos de ayuda, así destacan las acciones principales.

Ejemplo de imagen de azul marino nublado generada usando media.io

12) Estilo Industrial Chic

hexagonal: #23272f #2d3440 #384659 #5b6f86 #b9c3cc

estado de ánimo: vanguardista, moderno, utilitario

Mejor para: empaque de productos para el cuidado masculino

Grises metálicos mate y bordes azul oscuro crean una sensación audaz, limpia y utilitaria. La paleta es ideal para etiquetas minimalistas, permitiendo que la tipografía y los acabados lleven el peso visual. Utiliza un foil metálico cálido o una textura sutil para añadir contraste táctil. Consejo: imprime el tono más oscuro como fondo intenso y usa el gris claro para ingredientes y pequeños textos legales.

Ejemplo de imagen de industrial chic generada usando media.io

13) Observatorio Tranquilo

hexagonal: #0c1624 #16263b #27415f #6b7f95 #d9e2ea

estado de ánimo: reflexivo, científico, sereno

Mejor para: infografías educativas y blogs de ciencia

Azules de cielo nocturno con grises medidos evocan un observatorio tranquilo y curiosidad concentrada. El contraste funciona bien para diagramas, gráficos y lecturas largas donde la claridad es clave. Como esquema de color gris azul oscuro, combina bien con toques de amarillo para resaltes y anotaciones. Consejo: mantén los encabezados en el tono más profundo y usa el gris pálido para abrir secciones densas.

Ejemplo de imagen de observatorio tranquilo generada usando media.io

14) Jornada Nórdica

hexagonal: #2b3138 #3a4754 #1f3b57 #6c7d8a #f3f5f7

estado de ánimo: escandinavo, ordenado, práctico

Mejor para: interfaz de app de productividad y listas de tareas

Neutros nórdicos limpios con un azul oscuro profundo dan una sensación organizada y motivadora en silencio. Tarjetas redondeadas e iconos simples destacan sobre el fondo pálido. Esta paleta gris azul funciona mejor si limitas el uso del color para estados como activo, terminado y vencido. Consejo: asigna el azul más oscuro a la acción primaria y deja los grises para estructura y espaciados.

Ejemplo de imagen de jornada nórdica generada usando media.io

15) Carbón y Lavanda

hexagonal: #2a2a31 #3a3b46 #2b365f #8a8faa #f6f4f8

estado de ánimo: suave, elegante, ligeramente romántico

Mejor para: invitaciones de boda y papelería formal

Sombras carbón con luz matizada en lavanda transmiten formalidad y suavidad. Los neutros fríos mantienen la tipografía nítida, mientras el acento suave aporta un acabado etéreo como papel. Combina con papel blanco perla y un toque de foil plateado para un aspecto refinado. Consejo: usa el texto principal en carbón y reserva el gris lavanda para líneas ornamentales o monogramas.

Ejemplo de imagen de carbón y lavanda generada usando media.io

16) Trayecto Lluvioso

hexagonal: #1f232b #2c3441 #3b4b5f #6f7f8e #dde2e7

estado de ánimo: melancólico, cotidiano, sólido

Mejor para: lookbooks de ropa urbana y publicaciones en redes sociales

Grises de pavimento mojado y azules de trayecto diario lucen auténticos, texturizados y modernos. Los tonos medios son ideales para superposiciones en fotos, manteniendo subtítulos legibles sin bloques duros. Combina con un acento llamativo como naranja seguridad para energía urbana. Consejo: usa el gris claro para espacios negativos para que la paleta sea respirable en móvil.

Ejemplo de imagen de trayecto lluvioso generada usando media.io

17) Metro Mar Profundo

hexagonal: #081a2a #0f2e46 #1d4d63 #4f6d7a #b9d0d8

estado de ánimo: fresco, moderno, enérgico

Mejor para: anuncios de productos tecnológicos y páginas de lanzamientos de apps

Azules marinos profundos y acentos acuáticos brillantes transmiten agilidad y dinamismo. El rango soporta titulares audaces, degradados y profundidad sutil en tarjetas. Combina espacios blancos y un solo acento neón para un estilo tech moderno. Consejo: usa el azul gris claro para efectos resplandor y separadores, en lugar de blanco puro.

Ejemplo de imagen de metro mar profundo generada usando media.io

18) Zafiro Ahumado

hexagonal: #1c1f28 #2a3240 #1e3a68 #3d6a9a #cfd9e6

estado de ánimo: audaz, lujoso, nocturno

Mejor para: branding de joyería y empaques premium

Sombras ahumadas y azules zafiro aportan lujo y sensación nocturna. Estas combinaciones se ven especialmente ricas en papeles mate con brillo localizado en logos. Combina con metálicos cálidos como oro o bronce para que los azules resalten como gemas. Consejo: reserva el tono más claro para el interior y la información del producto para mantener la limpieza.

Ejemplo de imagen de zafiro ahumado generada usando media.io

19) Niebla y Fiordo

hexagonal: #0f1a24 #1e2c39 #314453 #6f8594 #dfe8ee

estado de ánimo: brumoso, natural, contemplativo

Mejor para: guías y catálogos de marcas outdoor

Aire de fiordo brumoso y agua pizarra generan calma contemplativa y natural. La paleta se siente aventurera sin ser demasiado rústica, ideal para marcas modernas de equipo. Combina con verde musgo o tonos arcilla para evocar terreno y mantener el anclaje terrenal. Consejo: usa el tono claro brumoso para fondos de página para un ambiente fresco y abierto.

Ejemplo de imagen de niebla y fiordo generada usando media.io

20) Panel Nocturno

hexagonal: #0d1420 #16233a #223a5a #3c5a7a #b6c2cf

estado de ánimo: enfocado, alto contraste, tecnológico

Mejor para: panel UI modo oscuro

Azules de sala de control nocturna transmiten concentración y alto contraste sin ser agresivos. La base profunda es ideal para modos oscuros, mientras el acento frío facilita ver gráficos y conmutadores. Combina con un acento restringido como cian para estados activos y advertencias. Consejo: mantén superficies grandes en los dos tonos más oscuros y usa el tono más claro solo para números y etiquetas clave.

Ejemplo de imagen de panel nocturno generada usando media.io

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

Los metálicos cálidos y neutros cálidos son la forma más rápida de hacer que el gris azul oscuro se sienta premium: piensa en oro champán, latón, cobre, crema o arena. Contrarrestan la base fría y evitan un aspecto demasiado clínico.

Para contraste moderno, combina gris azul oscuro con acentos brillantes y saturados como coral, lima, cian o naranja seguridad. Usa los acentos con moderación en CTAs, etiquetas o datos clave para mantener la interfaz serena.

Si buscas un ambiente natural, añade verdes terrosos (musgo, salvia) o tonos arcillosos. Estas combinaciones mantienen la paleta conectada a la tierra y funcionan especialmente bien para marcas outdoor, de bienestar y de estilo de vida.

Cómo usar una paleta de Color gris azul oscuro en diseños reales

Empieza asignando roles: un gris claro para fondos, un gris medio para bordes y UI secundaria, y un azul oscuro para encabezados o navegación. Así mantienes la jerarquía consistente entre páginas, diapositivas o impresiones.

Mantén la legibilidad probando el contraste temprano, especialmente en modo oscuro. Reserva el navy/carbón más oscuro para superficies grandes o titulares, y usa grises claros para el texto corriente para evitar fatiga visual.

Por último, elige un color de acento y úsalos siempre para énfasis (botones primarios, destacados, alertas). Con gris azul oscuro, un solo acento bien elegido resalta más que varios compitiendo entre sí.

Crear visuales de paleta gris oscuro azul con IA

¿Quieres ver cómo luce tu paleta gris azul oscuro en escenas reales —como paneles, empaques, carteles o interiores? Generar maquetas visuales rápidas te ayuda a validar contraste, ambiente y compatibilidad con la marca antes de decidir.

Con Media.io Text-to-Image, puedes convertir un simple prompt en conceptos acordes a la paleta para pantallas UI, gráficos promocionales o diseños listos para impresión. Es una forma rápida de explorar variantes sin rehacer tu diseño desde cero.

Elige uno de los prompts anteriores (o escribe el tuyo), genera varias opciones y luego perfecciona la ganadora ajustando luz, materiales y colores de acento.

Siguiente: Paleta de colores retro de los 90