20 Paletas de colores negro, azul y gris con códigos hexadecimales

Una paleta de colores negro azul gris es una opción recurrente para interfaces modernas, marcas premium e interiores tranquilos porque equilibra autoridad (negro), confianza (azul) y versatilidad (gris).

A continuación, encontrarás 20 combinaciones de colores negro azul gris que van de lo sobrio a lo fresco, con códigos HEX, además de consejos prácticos e indicaciones de IA que puedes reutilizar para generar imágenes a juego.

Por qué funcionan tan bien las paletas Negro Azul Gris

El negro, el azul y el gris crean naturalmente una jerarquía clara: los tonos oscuros definen la estructura, los grises ayudan a la legibilidad y el azul señala acción y confianza. Esto hace que este trío sea especialmente efectivo para interfaces donde los estados, el énfasis y la navegación deben ser comprendidos al instante.

Estos tonos también se perciben “terminados” y premium. El negro y el carbón transmiten autoridad, mientras que el azul añade un toque moderno y tecnológico—sin recurrir a la saturación intensa.

Finalmente, las combinaciones Negro Azul Gris son flexibles en distintos medios. Puedes usarlas en modo oscuro, diseños claros, impresos o interiores, e introducir un neutro cálido (como crema) para suavizar el ambiente cuando sea necesario.

Más de 20 ideas de paletas de colores Negro Azul Gris (con códigos HEX)

1) Puerto Medianoche

HEX: #0b1320 #0f2438 #1b4f72 #6b7785 #d7dee6

Ambiente: oscuro, refinado, costero

Mejor para: UI página de inicio fintech

Luces portuarias tenues y reflejos de agua profunda crean un ambiente refinado y seguro. Esta paleta negro azul gris se percibe confiable para fintech y SaaS, especialmente si dejas el fondo oscuro y usas el gris claro para la legibilidad. Combínala con espacios en blanco limpios y un acento cálido como crema para botones o datos clave. Consejo: reserva el azul brillante solo para un CTA principal y así evitar ruido visual.

Ejemplo de imagen de puerto medianoche generada usando 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) Grafito Azur

HEX: #0a0d10 #1d2a3a #2b6cb0 #8a97a6 #eef2f6

Ambiente: elegante, tecnológico, alto contraste

Mejor para: UI tablero de control de aplicación

Sombras de grafito elegantes con toques limpios de azur crean una sensación moderna y definida. Funciona bien en dashboards donde importa la jerarquía, usando paneles oscuros para estructura y grises claros para respirar. Combina con íconos simples y divisores delgados para mantener la interfaz limpia. Consejo: usa el azur como único elemento saturado en gráficos y estados activos.

Ejemplo de imagen de grafito azur generada usando media.io

3) Ola de acero minimalista

HEX: #111418 #223042 #3a86c8 #9aa6b2 #cfd6de

Ambiente: minimalista, calmado, contemporáneo

Mejor para: presentación de diapositivas

Tonos acero calmados con una suave corriente azul lucen modernos sin ser estridentes. Es una mezcla ideal para presentaciones, especialmente si deseas que los gráficos sean legibles y profesionales. Combina con mucho espacio negativo y formas geométricas en lugar de fotos. Consejo: mantén los titulares en casi negro y texto corporal en gris medio para evitar resplandores en proyectores.

Ejemplo de imagen de ola de acero minimalista generada usando media.io

4) Oficina nube de tormenta

HEX: #0f1115 #202a34 #2f4a63 #7d8b99 #f3f5f7

Ambiente: profesional, estable, discreto

Mejor para: banner principal web corporativo

Neutros tipo nube de tormenta aportan una presencia firme y creíble. Utiliza este set para secciones principales corporativas donde la tipografía y mensaje lideren, reforzados por una profundidad azul sutil. Combina con fotografía monocroma y un fondo blanco suave para mantenerlo accesible. Consejo: agrega una línea azul delgada para guiar la vista sin robar protagonismo al texto.

Ejemplo de imagen oficina nube de tormenta generada usando media.io

5) Interfaz noche ártica

HEX: #0b0e13 #1a2330 #1f6feb #a8b3bf #e6ebf0

Ambiente: nítido, nocturno, alta claridad

Mejor para: UI app móvil modo oscuro

Destellos árticos sobre paneles oscuros nocturnos se sienten limpios y veloces. El azul intenso se percibe interactivo, ideal para navegación en modo oscuro, botones y enlaces. Acompaña con iconos de línea simples y sombras ligeras para evitar suciedad visual. Consejo: usa gris claro para texto en vez de blanco puro para reducir fatiga visual.

Ejemplo imagen de interfaz noche ártica generada usando media.io

6) Mezcla de mezclilla y concreto

HEX: #121212 #2a2f35 #2b4c7e #88939f #d9dee3

Ambiente: urbano, práctico, equilibrado

Mejor para: diseño de lookbook streetwear

Grises tipo concreto urbano con azul mezclilla transmiten estilo y practicidad. Esta combinación es ideal para lookbooks y catálogos donde buscas un fondo frío y moderno para fotografía de producto. También rinde bien en impresión cuando los grises medios llevan el diseño y el azul se usa puntualmente. Consejo: mantén los pies de foto en gris claro y el azul solo en encabezados de sección.

Ejemplo de imagen mezclilla y concreto generada usando media.io

7) Cobalto ahumado

HEX: #0c0f14 #243447 #2f81f7 #5f6b76 #b9c2cc

Ambiente: enérgico, ahumado, moderno

Mejor para: overlay para stream de esports

Oscuros ahumados con un toque de cobalto transmiten energía y competencia. Úsalo para overlays, marcadores y banners donde el contraste deba ser instantáneo. Combina con tipografía condensada y separadores angulares para carácter definido. Consejo: limita el azul brillante al 10–15% del diseño para mantener su carácter especial.

Ejemplo imagen cobalto ahumado generada usando media.io

8) Pizarra plano arquitectónico

HEX: #0e1013 #1c2836 #274c77 #98a4b3 #f0f2f4

Ambiente: estructurado, inteligente, sereno

Mejor para: web portfolio de arquitectura

Pizarra estructurada y azul plano evocan precisión y planificación. Perfecto para portafolios de arquitectura e ingeniería donde el diseño debe ser limpio, medido y fácil de escanear. Agrega líneas finas de cuadrícula y márgenes amplios para reforzar el aire técnico. Consejo: usa el tono más claro de fondo y el más oscuro para navegación para un marco elegante.

Ejemplo de imagen de pizarra plano arquitectónico generada usando media.io

9) Muelle brumoso

HEX: #0d1014 #2b3a42 #1d5c8a #aab4bf #e9edf2

Ambiente: brumoso, tranquilo, accesible

Mejor para: encabezado blog y sistema tipográfico

Grises brumosos de muelle con azul océano suave logran un efecto calmado y legible. Este set es ideal para blogs y páginas largas donde el confort importa más que el dramatismo. Úsalo con fondos cálidos tipo papel y arte lineal sutil para un toque editorial suave. Consejo: emplea gris medio para texto secundario y azul para enlaces, para facilitar la navegación.

Ejemplo de imagen de un muelle con niebla generada utilizando media.io

10) Acero Digital

HEX: #0a0c10 #202737 #345995 #707b86 #d5dbe2

Ambiente: limpio, técnico, moderno

Mejor para: Página de características de producto SaaS

Tonos técnicos limpios que recuerdan al metal cepillado y vidrio pulido. Úsalos en páginas de características donde los iconos, diagramas y capturas de pantalla necesiten un marco calmado. Combínalo con un solo acento cálido, como un distintivo crema apagado, para humanizar la composición. Consejo: mantén el fondo claro y usa el tono más oscuro solo para titulares y etiquetas clave.

Ejemplo de imagen de acero digital generada utilizando media.io

11) Tarde de Museo

HEX: #0f1216 #252c35 #2a5d9f #7a8694 #f5f6f7

Ambiente: culto, elegante, sobrio

Mejor para: folleto de invitación a evento

Tonos culturales de tarde evocan una galería silenciosa con detalles iluminados. Esta paleta funciona maravillosamente para invitaciones donde la tipografía debe sentirse premium y calmada. Combínala con líneas finas, versalitas y mucho espacio en blanco para lograr un diseño tipo museo. Consejo: pon el fondo en blanco roto y usa el azul solo para destacar fecha y ubicación.

Ejemplo de imagen de tarde de museo generada utilizando media.io

12) Tránsito Invernal

HEX: #101318 #1f2a35 #1b6aa5 #94a0ad #dfe5eb

Ambiente: frío, puntual, metropolitano

Mejor para: diseño de cartel de señalización

Tonos fríos de tránsito transmiten puntualidad y aire metropolitano, como señales durante un trayecto de invierno. Son apropiados para carteles de señalización y gráficos informativos donde el contraste y la claridad son esenciales. Combina con flechas geométricas y una retícula estricta para mantener la legibilidad a distancia. Consejo: utiliza el azul para elementos direccionales y la gama de grises para texto y bloques de fondo.

Ejemplo de imagen de tránsito invernal generada utilizando media.io

13) Estudio Inkstone

HEX: #0b0b0d #242933 #3c5a80 #6e7885 #c9d0d8

Ambiente: creativo, sólido, clásico-moderno

Mejor para: diseño de portafolio fotográfico

Sombras de inkstone con matices azul apagado transmiten creatividad y solidez. Úsalo para portafolios fotográficos donde el marco debe ser oscuro, minimalista y sin distracciones. Combina con fotografía en escala de grises y sutiles estados hover para centrar la atención en las imágenes. Consejo: mantén márgenes generosos y deja que el gris claro resalte leyendas y metadatos.

Ejemplo de imagen de Estudio Inkstone generada utilizando media.io

14) Branding de Harborline

HEX: #0c1016 #1a2b3d #215e9a #808c9a #f1f4f7

Ambiente: confiable, pulido, premium

Mejor para: tablero de identidad de marca

Los tonos pulidos de puerto transmiten confianza, estabilidad y una calma segura. Esta paleta de colores negro, azul y gris es ideal para sistemas de identidad de marca, desde logos hasta papelería, porque funciona tanto en digital como en impresión. Agrégale un solo neutro cálido como crema o arena para aportar cercanía. Consejo: prueba los grises en papel sin recubrimiento para asegurarte de que no se vuelvan demasiado fríos.

Ejemplo de imagen de branding de Harborline generada utilizando media.io

15) Monocromo Silencioso

HEX: #0f1113 #2a2e33 #3a4a5a #9aa3ad #f6f7f8

Ambiente: silencioso, minimalista, equilibrado

Mejor para: plantilla de CV y carta de presentación

Capas monocromáticas silenciosas transmiten calma y enfoque, como un documento bien editado. Son ideales para currículums donde la tipografía, el espaciado y la jerarquía deben ser perfectamente claros. Añade una línea sutil azul-gris para separar secciones y mantén el resto neutro. Consejo: evita fondos oscuros y confía en el peso, tamaño y espaciado para lograr el efecto.

Ejemplo de imagen de monocromo silencioso generada utilizando media.io

16) Cartel Plano

HEX: #0b0f15 #1f2d3a #0f5fa6 #8b98a6 #e7edf3

Ambiente: audaz, gráfico, estructurado

Mejor para: cartel de conferencia

Azules intensos tipo plano sobre neutros oscuros estructurados transmiten inteligencia y dirección. Este conjunto es excelente para carteles de conferencias donde necesitas secciones bien definidas y legibilidad instantánea. Usa tipografía sans-serif y una iconografía simple para mantener un look moderno. Consejo: usa el tono más claro como fondo y trata el azul como foco para tracks o ponentes.

Ejemplo de imagen de cartel plano generada utilizando media.io

17) Terminal Náutico

HEX: #0a0d11 #17212b #234a7a #6f7c89 #cfd7df

Ambiente: náutico, tecnológico, constante

Mejor para: sitio de documentación para desarrolladores

La hondura náutica con oscuros tipo terminal transmite estabilidad y técnica. Úsalo para sitios de documentación donde los bloques de código, la navegación y los títulos necesiten separación clara. Agrégale un acento monoespaciado para el código y limita el azul a enlaces, pestañas y estados activos. Consejo: haz los fondos de código un poco más claros que la página para que los bloques resalten sin mucho contraste.

Ejemplo de imagen de terminal náutico generada utilizando media.io

18) Empaque Cobalto Ahumado

HEX: #0e0f12 #2a3038 #1f5fbf #a3adba #f2f4f6

Ambiente: premium, audaz, moderno

Mejor para: empaque de productos de cuidado personal

Neutros ahumados premium con energía cobalto transmiten modernidad y masculinidad sin resultar rudos. Funcionan bien en empaques de grooming donde los tonos oscuros mate sugieren calidad y el azul aporta un toque fresco. Usa tipografía mínima y acabado soft-touch para un aspecto táctil. Consejo: imprime el cobalto como color directo o en foil para un realce premium y controlado.

Ejemplo de imagen de empaque cobalto ahumado generada utilizando media.io

19) Editorial Día Lluvioso

HEX: #101217 #2d3640 #2a5674 #9aa7b4 #f7f8fa

Ambiente: suave, reflexivo, editorial

Mejor para: diseño de artículo de revista

Neutros suaves de día lluvioso transmiten reflexión y un estilo sereno. Son ideales para maquetaciones de revista donde las lecturas largas necesitan contraste suave y ritmo calmado. Usa titulares con serifas y reglas en azul claro para crear un ritmo editorial. Consejo: pon las leyendas de imágenes en gris medio para mantener la página aireada y coherente.

Ejemplo de imagen de editorial día lluvioso generada utilizando media.io

20) Panel Nocturno

HEX: #070a0f #1b2430 #2d6cdf #65707d #d8dee6

Ambiente: enfocado, moderno, basado en datos

Mejor para: interfaz de panel de analíticas

Los tonos nocturnos enfocados transmiten la sensación de una sala de control diseñada para la toma de decisiones. Entre las combinaciones de negro, azul y gris, esta es excelente para analíticas porque el contraste mantiene los gráficos legibles y suaves para la vista. Usa visualizaciones neutrales y aprovecha el azul para filtros seleccionados, pestañas activas y líneas de tendencia clave. Consejo: limita el azul brillante a una sola serie por gráfico para mantener las comparaciones claras.

Ejemplo de imagen de panel nocturno generada utilizando media.io

¿Qué colores combinan bien con Negro Azul Gris?

Los neutros cálidos son la mejora más sencilla: crema, marfil, arena y beige cálido suavizan la sensación “tecnológica” y hacen que los diseños oscuros sean más acogedores. Son excelentes para botones, distintivos y paneles de fondo.

Para mayor contraste, agrega blanco puro con moderación (especialmente para texto y detalles) y pon la mayoría del texto principal en gris claro para reducir el deslumbramiento. Si necesitas un segundo acento, metales apagados (plata, peltre) y verdes desaturados pueden complementar la base fría sin competir con el azul.

En caso de duda, limita la saturación: un solo azul principal de acento, un neutro cálido, y el resto en negros/grises para un aspecto controlado y premium.

Cómo usar una paleta de color Negro Azul Gris en diseños reales

Comienza asignando roles en vez de porcentajes: asigna negro casi puro a la navegación y encabezados, pizarra oscura a superficies/tarjetas, gris medio a texto secundario, y gris claro/blanco roto a fondos. Luego establece un azul como color interactivo (enlaces, pestañas activas, estados seleccionados).

En branding, prueba la paleta tanto digital como impresa. Los grises pueden cambiar según la luz y el tipo de papel, así que valida tu carbón y gris medio antes de finalizar papelería o empaques.

Para interiores, trata el azul como el color de “profundidad” (pared de acento, gabinetes, textiles), mientras que grises y negros anclan herrajes y accesorios. Añade luces crema o tonos madera para no enfriar demasiado el ambiente.

Crea visuales de paletas Negro Azul Gris con IA

Si ya tienes códigos HEX, puedes convertirlos en maquetas de UI, carteles, tableros de marca y conceptos de empaque consistentes con IA—rápido. La clave es describir claramente el layout e incluir explícitamente tus valores de color en el prompt.

Utiliza una paleta a la vez y especifica dónde debe aparecer el azul (CTA, enlaces, gráficos, bordes). Así mantienes el resultado limpio y evitas colores extra accidentales.

Siguiente: Paleta de colores crema