20 Paletas de Colores Negro y Gris con Códigos Hexadecimal

Una paleta de colores negro y gris es una de las formas más sencillas de lograr que un diseño luzca moderno, seguro y limpio. Desde interfaces de usuario hasta impresos, estos tonos neutros generan estructura instantánea sin quitar protagonismo al contenido.

A continuación encontrarás más de 20 ideas de paletas de negro y gris con códigos HEX, además de consejos prácticos sobre contraste, tipografía y elección de colores de acento.

Por qué las paletas negro-gris funcionan tan bien

Las paletas negro y gris son naturalmente organizadas: la gama de valores crea jerarquía, espaciado y énfasis sin depender de muchos matices. Eso las hace ideales para diseños donde importa la claridad: paneles, páginas editoriales, pantallas de productos y sistemas de marca.

También tienen una sensación atemporal. Como los neutros no pasan de moda tan rápido como las gamas brillantes, una paleta monocromática o basada en carbón/pizarra puede permanecer relevante por más tiempo y adaptarse fácilmente entre web, impresión y packaging.

Finalmente, las combinaciones de negro y gris potencian los colores de acento. Un solo color azul verdoso, cobalto, coral o lima puede ser inmediatamente “clicable” en UI o “especial” en impreso, porque la base es muy tranquila.

Más de 20 ideas de paletas de colores negro y gris (con códigos HEX)

1) Pizarra nocturna

HEX: #0B0D10 #1A1F26 #2E3640 #7C8794 #E6E9EE

Ambiente: elegante, nocturno, minimalista

Ideal para: panel de control SaaS ui

Los tonos de medianoche evocan un skyline urbano de alto contraste y superficies de vidrio limpias. Esta paleta negro-gris brilla en paneles, analítica y pantallas administrativas donde la jerarquía es importante. Combínala con blanco roto para el espaciado y un solo color de acento para acciones principales. Consejo: mantén el texto del cuerpo en el gris más claro y reserva el casi negro para encabezados y navegación.

Ejemplo de imagen de pizarra nocturna generado con media.io

Media.io

Media.io es un estudio online de IA para crear y editar vídeo, imagen y audio en tu navegador.

Pruébalo gratis ahora

2) Estudio de concreto

HEX: #111315 #2A2D30 #4A4F55 #B8BDC3 #F4F5F7

Ambiente:industrial, tranquilo, refinado

Ideal para:sitio web de portafolio arquitectónico

El ambiente industrial de concreto se siente calmado, estructurado y discretamente premium. Los grises medios hacen que la fotografía y los renders parezcan intencionados en vez de ásperos. Combínalo con un fondo blanco cálido y líneas negras finas para una cuadrícula editorial. Consejo: usa el gris más claro para bandas de sección y así los diseños respiran sin perder el mood minimalista.

Ejemplo de imagen de estudio de concreto generado con media.io

3) Susurro de grafito

HEX: #0F1114 #23262B #3B4048 #9AA2AD #DADFE6

Ambiente:suave, moderno, discreto

Ideal para:presentación de guía de marca

Los tonos de grafito sugieren contención, claridad y modernidad. Funcionan muy bien para un libro de marca donde la tipografía, el espaciado y las reglas de logotipo deben ser seguras. Combina con un color suave (azul polvo o salvia) para acentos secundarios. Consejo: mantén gráficas y muestras sobre gris claro para evitar el reflejo blanco puro en presentaciones.

Ejemplo de imagen de susurro de grafito generado con media.io

4) Revestimiento de plata

HEX: #101215 #2C2F35 #5B616B #C7CDD6 #FFFFFF

Ambiente:brillante, limpio, pulido

Ideal para:página de producto ecommerce

Los neutros pulidos se sienten aireados, nítidos y enfocados en el producto, como detalles cromados bajo luces de estudio. El espectro brillante mantiene las páginas confiables y fáciles de escanear. Combina con un solo color CTA saturado (cobalto o coral) para diseños orientados a la conversión. Consejo: usa el gris medio para divisores y microtexto, así la información importante se mantiene primaria.

Ejemplo de imagen de revestimiento de plata generado con media.io

5) Señal de tormenta

HEX: #0E1013 #1F242B #3E4652 #A0A9B5 #E9EDF2

Ambiente:oscuro, tecnológico, enfocado

Ideal para:landing page de ciberseguridad

Los tonos tormentosos evocan pantallas cifradas, servidores y una urgencia controlada. Estas combinaciones negro-gris son ideales para servicios de seguridad, cumplimiento y TI que requieren autoridad sin ser llamativos. Complétalos con teal o lima eléctrico para estados de estatus y insignias de confianza. Consejo: mantén los degradados sutiles y deja que la iconografía destaque el ambiente tech.

Ejemplo de imagen de señal de tormenta generado con media.io

6) Tinta y niebla

HEX: #0A0B0D #1B1D21 #343842 #B0B6C0 #F2F4F7

Ambiente:cinemático, suave, elegante

Ideal para:difusión editorial de revista

La tinta cinemática sobre grises nebulosos se siente elegante y ligeramente misteriosa. Es ideal para layouts extensos donde la tipografía debe ser intencionada y de alta gama. Complétala con blanco cálido tipo papel y líneas sutiles para una cuadrícula editorial clásica. Consejo: usa el gris niebla como fondo de cuadros de pies de foto para separar notas sin bordes marcados.

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

7) Carbón de museo

HEX: #0C0C0D #202022 #3A3A3F #8F8F96 #E8E8EA

Ambiente:curado, tranquilo, tipo galería

Ideal para:póster de exposición de arte

Los tonos de carbón curado recuerdan una pared de galería bajo luces suaves. Permiten que títulos y fechas de obras destaquen sin competir con las imágenes. Combínalo con un solo color para el nombre del artista destacado y así guiar la mirada. Consejo: mantén márgenes amplios y alinea el texto a una cuadrícula estricta para un acabado de museo.

Ejemplo de imagen de carbón de museo generado con media.io

8) Acero monocromo

HEX: #0D0F12 #262B31 #414A55 #6F7A88 #D9DEE6

Ambiente:profesional, estructurado, corporativo

Ideal para:diseño de informe anual

Los grises acero sugieren estructura, confianza e información bien organizada. Son ideales para informes llenos de gráficos, tablas y llamadas de datos. Complétalos con un acento sobrio como azul marino para separar secciones sin romper el tema neutro. Consejo: reserva el tono más oscuro solo para títulos, así las páginas densas son más legibles.

Ejemplo de imagen de acero monocromo generado con media.io

9) Perla sombreada

HEX: #0E0E10 #24262B #5A5F68 #C9CDD3 #FAFAFB

Ambiente:lujo, suave, alto contraste

Ideal para:empaque de producto de belleza

Negros profundos combinados con grises perlados se sienten lujosos, como tela de satén bajo el reflector. Esta combinación de negro y gris funciona bien para belleza, cuidado de la piel y fragancias donde la tipografía minimalista vende una historia premium. Combínalo con plata en foil o un solo acento de rubor para un giro refinado. Consejo de uso: mantén acabados mate en los tonos oscuros para que los brillos se vean intencionados, no brillantes.

Ejemplo de imagen de perla sombreada generado usando media.io

10) Tipo Silencioso

HEX: #0B0C0E #1C1F24 #2F353E #A7AFBA #F6F7F9

Ambiente: tranquilo, tipográfico, minimalista

Ideal para: sistema tipográfico de blog

Neutrales calmados crean un escenario silencioso para las palabras, como tinta sobre papel suave. El rango de grises facilita construir una jerarquía tipográfica sin ruido visual. Combínalo con un acento suave (azul empolvado o terracota) para enlaces y destacados. Consejo de uso: utiliza el gris suave para bloques de código y citas destacadas para mantener el flujo de lectura sin interrupciones.

Ejemplo de imagen de tipo silencioso generado usando media.io

11) Asfalto Minimalista

HEX: #090A0B #16181B #2A2E34 #616873 #DDE1E7

Ambiente: urbano, audaz, moderno

Ideal para: lookbook ropa urbana

Tonos de asfalto urbano se sienten audaces y modernos, como pavimento fresco y reflejos de neón. Dan a las fotos de ropa un fuerte contraste manteniendo los layouts minimalistas. Combínalo con un solo acento llamativo para fechas de lanzamiento y etiquetas de precio. Consejo de uso: utiliza el gris medio para etiquetas e información de talla para que las fotos del producto permanezcan dominantes.

Ejemplo de imagen de asfalto minimalista generado usando media.io

12) Humo y Cromo

HEX: #0C0E10 #22262C #3C434E #8D98A6 #EEF1F5

Ambiente: futurista, nítido, orientado a la tecnología

Ideal para: anuncio de producto de hardware

Tonos nítidos de humo y cromo evocan ingeniería de precisión y superficies metálicas limpias. Esta paleta de negro y gris es fuerte para lanzamientos de hardware donde el producto debe sentirse agudo y premium. Combina con acentos azules fríos para características y especificaciones. Consejo de uso: coloca el texto de especificaciones sobre los paneles de gris más claro para mantener el anuncio legible de un vistazo.

Ejemplo de imagen de humo y cromo generado usando media.io

13) Lino Sombreado

HEX: #111214 #2A2C30 #4B4F56 #BFC3C9 #F1EFEA

Ambiente: neutral cálido, acogedor, equilibrado

Ideal para: mood board de interiores modernos

Neutrales cálidos y sombreados evocan tapicería de lino y luz suave de la tarde. El blanco ligeramente cremoso evita que la paleta se vuelva fría. Combínalo con texturas de madera natural y latón cepillado para un aspecto moderno y vivido. Consejo de uso: utiliza los tonos oscuros para marcos y accesorios; deja que los textiles lleven los grises más suaves.

Ejemplo de imagen de lino sombreado generado usando media.io

14) Cuaderno Noir

HEX: #07080A #171A1F #2B313A #9099A6 #F7F8FA

Ambiente: inteligente, académico, enfocado

Ideal para: interfaz de app para tomar notas

Tonos de cuaderno noir se sienten enfocados y estudiosos, como grafito sobre papel crujiente. Ayudan a que el contenido destaque manteniendo los elementos de la UI discretos. Combina con un color de acento calmado para etiquetas y estados seleccionados. Consejo de uso: mantén los campos de entrada un tono más claro que el fondo para que los anillos de enfoque sean obvios sin ser estridentes.

Ejemplo de imagen de cuaderno noir generado usando media.io

15) Grafito Invernal

HEX: #0D0F13 #242A33 #3B4553 #AAB3C0 #F0F3F7

Ambiente: fresco, aireado, moderno

Ideal para: pantallas de onboarding de aplicación móvil

Grises invernales frescos se sienten aireados y modernos, como escarcha en vidrio con bordes nítidos. Dan a las pantallas de onboarding una base limpia para ilustraciones y texto corto. Combina con un acento brillante para puntos de progreso y botones principales. Consejo de uso: mantén fondos casi blancos y usa los grises oscuros solo para títulos para evitar una impresión inicial pesada.

Ejemplo de imagen de grafito invernal generado usando media.io

16) Carbón y Arena

HEX: #0B0C0D #1E2024 #3D4046 #B0B3B8 #E8DDCF

Ambiente: terroso, premium, sólido

Ideal para: etiqueta de marca de café

Tonos de carbón con un acento arenoso evocan sensación terrosa y premium, como granos tostados y papel kraft. Funcionan bien para etiquetas que necesitan contraste fuerte sin verse estériles. Combínalo con líneas de ilustración simples y una textura táctil de papel. Consejo de uso: imprime el tono más oscuro ligeramente suavizado (negro rico) para evitar bordes borrosos en material sin recubrimiento.

Ejemplo de imagen de carbón y arena generado usando media.io

17) Bloom Monocromático

HEX: #0B0C0E #1E2126 #3A3F47 #C3C7CE #F8F8F9

Ambiente: suave, botánico, aireado

Ideal para: invitación botánica en acuarela

Tonos monocromáticos suaves evocan pétalos brumosos y lavados delicados de tinta. La gama suave apoya arte botánico mientras mantiene el texto legible. Combina con trazos plateados y mucho espacio en blanco para aspecto elegante de papelería. Consejo de uso: mantén el texto de la invitación en carbón profundo, no negro puro, para armonizar con la suavidad de la acuarela.

Ejemplo de imagen de bloom monocromático generado usando media.io

18) Prisma Neutral

HEX: #0E1012 #252A31 #4B5460 #9FA9B6 #ECEFF3

Ambiente: limpio, flexible, moderno

Ideal para: plantilla de presentación

Neutrales limpios se sienten flexibles y modernos, como una presentación pulida en sala de conferencias luminosa. Mantienen consistentes gráficos, íconos y fotografías en muchos tipos de diapositivas. Combina con un solo color de acento de marca para encabezados de sección y métricas clave. Consejo de uso: utiliza el tono más claro para fondos y alterna con paneles gris claro para dividir diapositivas densas.

Ejemplo de imagen de prisma neutral generado usando media.io

19) Interfaz Obsidiana

HEX: #050607 #14171B #2B3138 #6A7380 #D7DCE3

Ambiente: oscuro, preciso, alto contraste

Ideal para: sitio de documentación de desarrollador

Tonos obsidiana se sienten precisos y técnicos, como un editor de código en una sala oscura. Estas combinaciones de negro y gris hacen fácil separar navegación, barras laterales y bloques de código sin bordes ruidosos. Combina con acento moderado (cian o ámbar) para enlaces y resaltados de sintaxis. Consejo de uso: mantén el texto de código sobre un panel ligeramente más claro que el fondo para reducir fatiga visual.

Ejemplo de imagen de interfaz obsidiana generado usando media.io

20) Niebla Urbana

HEX: #101216 #2A2F37 #474F5B #B7BEC8 #F3F5F8

Ambiente: fresco, equilibrado, moderno urbano

Ideal para: folleto inmobiliario

Grises de niebla urbana se sienten frescos y equilibrados, como neblina matutina sobre torres de cristal. Son ideales para folletos inmobiliarios donde planos y fotos necesitan claridad y calma. Combina con acento metálico discreto para precios y amenidades clave. Consejo de uso: establece el cuerpo del texto en gris oscuro y mantén los encabezados ligeramente más claros que el negro para evitar contraste duro en impresión.

Ejemplo de imagen de niebla urbana generado usando media.io

21) Taller Mono

HEX: #0A0B0D #1C1F24 #3A3F47 #7F8792 #E5E8ED

Ambiente: práctico, maker, organizado

Ideal para: flyer de evento de taller

Tonos de taller práctico evocan herramientas, bancos limpios y ambiente maker sin rodeos. El rango de grises ajustado mantiene horarios, ponentes y detalles de sede fáciles de escanear. Combina con un acento audaz para fecha y enlace de registro. Consejo de uso: usa gris claro para secciones y bloques para que el flyer mantenga estructura sin cajas pesadas.

Ejemplo de imagen de taller mono generado usando media.io

¿Qué colores quedan bien con negro y gris?

El negro y gris combinan fácilmente con acentos enérgicos como teal, lima, cobalto, coral o magenta—perfecto cuando quieres que CTAs, destacados o etiquetas clave resalten. Sobre base neutral, hasta un área pequeña de acento destaca claramente.

Para combinaciones más suaves y premium, prueba acentos apagados como verde salvia, azul empolvado, rosa rubor o arena cálida. Mantienen el mood monocromático mientras agregan calidez y personalidad.

Si estás diseñando para impresión, considera metálicos (plata, peltre, dorado champán) como “colores” acento mediante foil, tinta o acabados de material. Complementan tonos carbón sin volver ruidoso el layout.

Cómo usar una paleta de negro y gris en diseños reales

Construye jerarquía con valores, no con colores extra: usa casi negro para encabezados/navegación, grises medios para UI secundaria y divisores, y grises muy claros o blanco roto para superficies. Así las páginas lucen estructuradas y hay menos desorden visual.

Cuida el contraste y la legibilidad. En vez de negro puro sobre blanco puro en todos lados, prueba texto carbón oscuro sobre fondo blanco roto para lectura larga, y reserva los negros más profundos para énfasis y polos clave.

Para evitar un aspecto “plano”, agrega profundidad con espaciado, sombras sutiles y degradados suaves—especialmente en temas oscuros. Mantén esos efectos mínimos para que la paleta se conserve limpia y profesional.

Crea visuales de paletas negro-gris con IA

Si quieres previsualizar cómo luce una paleta negro-gris en un dashboard, póster, toma de packaging o plantilla de diapositivas, genera visuales rápidos con IA. Es una forma rápida de probar mood, contraste y ideas de color acento antes de lanzarte a un diseño completo.

Usa los códigos HEX de tu paleta como restricción, luego describe el layout y estilo de iluminación (estudio, editorial, cinematográfico, UI minimalista). Puedes iterar con pequeños cambios en el prompt para encontrar el mood adecuado en minutos.

Cuando te guste un resultado, expórtalo y reutilízalo como referencia de mood board para web, impresión o guías de marca.

Siguiente: Paleta de Colores Rosa Verde