Paletas de color gris oscuro: 20 combinaciones y sus códigos hexadecimales

El gris oscuro es un neutro moderno que puede sentirse elegante, calmado o dramático según con qué lo combines. Es un recurso esencial para interfaces, branding e interiores porque aporta estructura sin la dureza del negro puro.

A continuación encontrarás 20 ideas seleccionadas de paletas de colores gris oscuro con códigos HEX, además de consejos prácticos sobre cómo elegir acentos, equilibrar contrastes y generar visuales de paletas usando IA.

Por qué las paletas de gris oscuro funcionan tan bien

El gris oscuro se encuentra en el “punto ideal” entre el negro y los neutros de tono medio: proporciona profundidad, contraste y jerarquía, pero es más suave a la vista. Eso lo hace especialmente efectivo para diseño de interfaces, maquetaciones editoriales y sistemas de marca premium.

Al ser el gris oscuro intrínsecamente versátil, puede oscilar hacia lo cálido (taupé, espresso, palo de rosa) o lo frío (acero, pizarra, azul-negro). Con el acento adecuado, la misma base neutra puede sentirse orientada al bienestar, corporativa, lúdica o lujosa.

También combina bien con la textura—grano de papel, ruido sutil, acabados mate y sombras suaves—ayudando a que los diseños se sientan tridimensionales y menos “planos” incluso si mantienes la paleta minimalista.

20+ ideas de paletas de colores gris oscuro (con códigos HEX)

1) Grafito y Lino

HEX: #2b2d31 #3c3f45 #6b6f77 #d7d1c6 #f3f1ed

Estado de ánimo: calmado, arquitectónico, refinado

Mejor para: página principal de estudio de arquitectura

Calmados y arquitectónicos, estos tonos de grafito sobre neutros lino evocan concreto, papel y luz de día suave. Úsalos para sitios web de estudios, portafolios y marcas de servicios premium que buscan confianza silenciosa. Combínalo con blancos cálidos y textura sutil (grano de papel o leve ruido) para evitar una apariencia plana. Consejo: utiliza el lino claro como fondo principal y reserva el grafito profundo para encabezados y botones primarios.

Ejemplo de imagen de grafito y lino generado con media.io

Media.io

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

Pruébalo gratis ahora

2) Salvia Carbón

HEX: #24262b #3a3d44 #5a6b5f #9bb49c #e6efe7

Estado de ánimo: enraizado, botánico, moderno

Mejor para: kit de identidad de marca bienestar

Enraizada y botánica, el carbón se percibe como piedra mientras que la salvia aporta un toque fresco y herbal. Estas combinaciones de gris oscuro funcionan perfectamente para branding de bienestar, etiquetas de botica y empaques tranquilos. Combina con texturas mates y arte lineal discreto para un aspecto moderno y natural. Consejo: usa el menta claro como espacio negativo para que los tonos oscuros nunca se sientan pesados.

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

3) Azul Acero Noche

HEX: #1f2228 #353a44 #4a6072 #7b9bb8 #e8edf3

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

Mejor para: interfaz de panel saas

Frío y técnico, el azul acero superpuesto al casi negro da la sensación de modo nocturno con un brillo limpio y confiado. Es ideal para dashboards SaaS, herramientas de analítica y UIs empresariales donde la claridad es importante. Combina con divisores delgados y fondo helado claro para tablas de datos y paneles secundarios. Consejo: reserva el tono más claro para métricas clave y crea jerarquía al instante sin agregar colores extra.

Ejemplo de imagen azul acero noche generado con media.io

4) Ceniza Palo de Rosa

HEX: #2a2728 #444041 #6d5a58 #b08a82 #f2e7e5

Estado de ánimo: cálido, íntimo, vintage

Mejor para: diseño de menú cafetería

Cálido e íntimo, el gris ceniza con matices palo de rosa evoca cuadernos de cuero y rincones tranquilos de café. Funciona bien para menús, hospitalidad boutique y listas de productos artesanales donde buscas sofisticación acogedora. Combínalo con fondos papel cremosos y toques blush apagados en los encabezados de sección. Consejo: mantén el texto del contenido en gris medio y utiliza el tono profundo solo para precios y etiquetas clave.

Ejemplo de imagen de ceniza palo de rosa generado con media.io

5) Pizarra con Toque Cítrico

HEX: #262a30 #3d434d #707786 #f0c94a #fff3d6

Estado de ánimo: atrevido, alegre, editorial

Mejor para: creatividad anuncio redes sociales

Atrevida y alegre, la pizarra gris prepara la base mientras el amarillo cítrico resalta como un titular. Es una gran opción para anuncios en redes, banners promocionales y avisos que necesitan contraste sin llegar al neón. Combina con tipografía grande y formas geométricas simples para mantener la energía limpia. Consejo: limita el amarillo a un solo elemento focal (botón, etiqueta de precio o insignia) para máximo impacto.

Ejemplo de imagen de pizarra con toque cítrico generado con media.io

6) Tinta y Arenisca

HEX: #202226 #36383f #6a6f78 #c3b6a6 #f6f0e8

Estado de ánimo: minimalista, premium, atemporal

Mejor para: empaque de cuidado de piel de lujo

Minimalista y premium, los grises tinta sobre fondos arenisca evocan cerámica, lino y lujo elegante. Esta paleta de gris oscuro es perfecta para empaques de cuidado de la piel, velas boutique y marcas DTC elevadas que buscan contención. Combina con acabados en relieve y neutros cálidos para mantenerlo acogedor y no frío. Consejo: usa arenisca para el campo de la etiqueta y deja los tonos tinta para el logo y la jerarquía de ingredientes.

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

7) Ciruela Medianoche Ahumada

HEX: #1d1c22 #332b37 #5a435f #a07aa6 #efe7f1

Estado de ánimo: misterioso, creativo, nocturno

Mejor para: portada de disco indie

Misterioso y creativo, el gris medianoche con ahumado ciruela se siente como una sesión de estudio nocturna bajo luz púrpura suave. Es ideal para portadas de álbum, carteles de eventos y campañas artísticas de ambiente. Combínalo con tipografía alto contraste en lila claro y mantén las imágenes abstractas para reforzar la atmósfera. Consejo: añade grano y un leve viñeteado con el tono más oscuro para mayor profundidad sin recurrir a más colores.

Ejemplo de imagen de ciruela medianoche ahumada generado con media.io

8) Hormigón y Cobre

HEX: #2c2f33 #454a51 #777d86 #b46b4d #f1dfd6

Estado de ánimo: industrial, seguro, metal cálido

Mejor para: diseño de etiqueta para licores artesanales

Industrial pero acogedor, los grises hormigón se encuentran con el cobre como metal cepillado sobre piedra urbana. Funciona para licores artesanales, café premium y etiquetas de productos que buscan carácter con calidez. Combina con tipografía condensada y detalles en cobre tipo foil para una presencia táctil lista para el estante. Consejo: coloca el cobre solo en pequeñas insignias o bordes para que la base neutra siga predominando.

Ejemplo de imagen de hormigón y cobre generado con media.io

9) Verde Azulado Tormentoso

HEX: #23262b #3c4248 #4b6b6b #69a6a1 #e7f3f2

Estado de ánimo: fresco, costero, moderno

Mejor para: encabezado blog de viajes

Fresco y costero, el gris tormentoso con verde azulado se siente como vidrio marino bajo un cielo nublado. Es ideal para encabezados de viajes, blogs de estilo de vida y marcas aireadas que buscan color sin perder el núcleo neutro. Combínalo con mucho espacio en blanco y acentos teal en enlaces y destacados. Consejo: mantén las imágenes en tonos fríos para que el teal se vea intencionado, no accidental.

Ejemplo de imagen de teal tormentoso generado con media.io

10) Lavanda Ahumada

HEX: #26242a #3e3a45 #6f667a #b5a9c9 #f4f0fa

Estado de ánimo: suave, soñador, contemporáneo

Mejor para: conjunto de invitaciones de boda

Suave y soñador, grises ahumados mezclados con lavanda evocan la neblina del atardecer y flores prensadas. Es una opción encantadora para bodas modernas, invitaciones elegantes y papelería que busca romance sin pasteles brillantes. Combina con tipografía serif delicada y mucho espacio en el fondo pálido. Consejo: usa la lavanda media para bordes e iconos pequeños en lugar de bloques de color completos.

Ejemplo de imagen de lavanda ahumada generado con media.io

11) Estudio Granito-Menta

HEX: #24272c #3a3f46 #5e646e #7fd1b9 #eaf8f3

Estado de ánimo: limpio, energético, apto para tecnología

Mejor para:pantallas de onboarding de app fitness

Limpio y energético, el gris granito mantiene todo nítido mientras la menta añade un toque fresco y moderno. Es ideal para apps fitness, rastreadores de hábitos y onboarding de productos donde la claridad y la motivación son clave. Combina con indicadores de progreso llamativos e ilustraciones sencillas para evitar saturación. Consejo: usa menta para estados de éxito y acciones clave, y mantén los botones secundarios en gris medio.

Ejemplo de imagen de estudio granito-menta generado con media.io

12) Cereza Urbana

HEX: #1f2024 #34363d #5c4a52 #b23a56 #f6e7ec

Estado de ánimo: audaz, estilizado, vida nocturna

Mejor para:diseño de lookbook de moda

Audaz y estilizado, el gris urbano con rojo cereza se siente como luces de ciudad reflejadas en piedra pulida. Úsalo para lookbooks de moda, volantes para vida nocturna y branding impactante que necesita actitud sin caos. Combina con bloques grandes de fotos y cereza como acento para títulos de sección o números de página. Consejo: usa el tono más profundo para fondos y deja el tono rubor suavizar el espacio negativo alrededor del texto.

Ejemplo de imagen de cereza urbana generado con media.io

13) Niebla y Mostaza

HEX: #2a2c31 #40444c #7a808b #d7a51f #f7f0d6

Estado de ánimo: confiado, retro-moderno, vibrante

Mejor para:diseño de cartel de evento

Confiado y ligeramente retro, los grises nebulosos hacen que la mostaza se sienta como un foco en una calle lluviosa. Estas combinaciones de gris oscuro son perfectas para carteles de eventos, gráficos de conferencias y anuncios impactantes. Combina con tipografía sans-serif gruesa y formas simples para un look limpio y de alto contraste. Consejo: permite que la mostaza destaque la fecha y el llamado a la acción mientras los grises gestionan lo demás.

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

14) Océano Peltre

HEX: #262a2f #3e454f #6b7787 #3c7fa6 #e6f1f7

Estado de ánimo: nítido, fiable, corporativo-calmo

Mejor para:diseño de página de aterrizaje B2B

Nítido y fiable, grises peltre con azul oceánico se sienten como acero pulido y agua abierta. Es ideal para páginas de aterrizaje B2B, fintech y marcas de consultoría que necesitan autoridad calmada. Combina con iconografía clara y fondos ligeros para que el azul se mantenga profesional en vez de lúdico. Consejo: usa azul océano para enlaces y marcadores de secciones, no para rellenos grandes de fondo.

Ejemplo de imagen de océano peltre generado con media.io

15) Carbono Lima Neón

HEX: #1c1f23 #2f333a #555c66 #b8ff4a #f4ffe0

Estado de ánimo: atrevido, alto contraste, futurista

Mejor para:banner publicitario de producto gaming

Atrevido y futurista, los grises carbono hacen que lima neón se sienta como un resaltado HUD en una habitación oscura. Es ideal para anuncios gaming, lanzamientos tecnológicos y banners llamativos donde quieres visibilidad instantánea. Combina con formas afiladas y un solo efecto de luz lima para mantenerlo elegante, no caótico. Consejo: limita la lima a un botón principal y una línea de detalle pequeña para un ambiente controlado y premium.

Ejemplo de imagen de carbono lima neón generado con media.io

16) Museo Taupe

HEX: #2d2c2a #474543 #746b63 #b9aa96 #f2ede6

Estado de ánimo: clásico, curado, sobrio

Mejor para:diseño de folleto de galería de arte

Clásico y curado, los grises con matiz taupe evocan paredes de museo, impresiones enmarcadas y luz suave dirigida. Funciona para folletos de galería, programas culturales y piezas impresas refinadas. Combina con márgenes generosos y reglas sutiles para dejar que el contenido respire. Consejo: usa el crema claro para fondos de página y mantén el tono más profundo para pies de foto y elementos de navegación.

Ejemplo de imagen de museo taupe generado con media.io

17) Deriva Monocromática

HEX: #17181b #2a2c31 #4a4e57 #7b818d #d9dde3

Estado de ánimo: minimalista, neutral, ultra-moderno

Mejor para:biblioteca de componentes ui móvil

Minimalista y ultra-moderno, estos grises deslizantes evocan niebla, cromo y tipografía limpia. Una paleta de gris oscuro como esta es perfecta para bibliotecas de componentes, sistemas de diseño y kits UI que necesitan máxima flexibilidad. Combina con un solo acento de marca en otra parte de tu producto y deja que estos neutros sean la base estructural. Consejo: asegura la accesibilidad usando el gris más claro detrás de texto pequeño y reservando el casi negro para etiquetas clave.

Ejemplo de imagen de deriva monocromática generado con media.io

18) Espresso Oliva

HEX: #2a2420 #413835 #5a6150 #8b9b6a #efece6

Estado de ánimo: terroso, rústico-moderno, reconfortante

Mejor para:branding y menú de restaurante

Terroso y reconfortante, marrón espresso-gris con verde oliva evoca mesas de madera, platos de cerámica y hierbas sobre tabla de cortar. Es ideal para branding de restaurantes, menús farm-to-table y packaging culinario. Combina con texturas de papel natural e ilustraciones simples para una sensación realista. Consejo: usa oliva para marcadores de categoría y realces, manteniendo el tono más oscuro de espresso para titulares y marcas de logo.

Ejemplo de imagen de espresso oliva generado con media.io

19) Pasteles Día Lluvioso

HEX: #2a2d34 #434854 #6f7582 #c9b7d8 #e8eef5

Estado de ánimo: suave, amigable, ligero-tech

Mejor para:plantilla de planificador estudiantil

Suave y amigable, los grises lluviosos mezclados con lila suave evocan cuadernos, tardes nubladas y concentración calmada. Es ideal para plantillas de planificador, tableros de estudio y organizadores imprimibles que deben sentirse de apoyo. Combina con formas redondeadas y secciones rellenas sutilmente utilizando azul grisáceo pálido. Consejo: limita el lila a encabezados y marcas de verificación para mantener el diseño legible al imprimir.

Ejemplo de imagen de pasteles día lluvioso generado con media.io

20) Acento Oro Noir

HEX: #1b1c1f #2f3136 #585b61 #c7a04a #f6f0e3

Estado de ánimo: lujoso, dramático, alto-contraste

Mejor para:banner publicitario de reloj premium

Lujoso y dramático, los grises noir con oro cálido evocan una boutique oscura y un foco sobre metal pulido. Úsalo para anuncios de productos premium, páginas de aterrizaje de alta gama y anuncios elegantes. Combina con texto mínimo, contraste fuerte y fondo crema para que el oro luzca rico en vez de chillón. Consejo: usa el oro como micro-acento para logos y reglas pequeñas, no como color de bloque completo.

Ejemplo de imagen de acento oro noir generado con media.io

¿Qué colores combinan bien con el gris oscuro?

Los neutros cálidos como crema, lino, beige y arenisca hacen que el gris oscuro sea más acogedor y premium. Es una combinación fiable para packaging, diseños editoriales y branding de interiores donde se busca “lujo silencioso” en vez de contraste marcado.

Los acentos fríos—azul acero, teal y tonos océano—empujan el gris oscuro hacia un enfoque técnico y fiable. Estas combinaciones son especialmente efectivas para UI SaaS, tableros y páginas corporativas porque mantienen claridad y jerarquía.

Para mayor energía, usa gris oscuro como base y añade un solo acento vibrante (mostaza, cítrico amarillo, cereza, lima neón o oro). La clave es la moderación: un único rol de acento (CTA, etiqueta, realce) mantiene el diseño freso y controlado.

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

Comienza asignando roles: un tono oscuro para títulos/ui principal, un gris medio para texto base y bordes, y un neutro claro para fondos. Esto evita diseños “gris sobre gris” y ayuda a mantener la legibilidad tipográfica.

Usa acentos intencionadamente para interacción y énfasis—botones, enlaces, estados activos, fechas, etiquetas de precio o marcas pequeñas. Si necesitas mayor profundidad sin agregar colores, recurre a gradientes sutiles, sombras y texturas usando los grises existentes.

Para accesibilidad, revisa el contraste (especialmente para texto pequeño) y reserva tu tono más claro como fondo para texto. En UI, los grises oscuros suelen funcionar mejor cuando el fondo no es completamente negro, reduciendo la fatiga visual y conservando el aspecto premium.

Crea visuales de paletas de gris oscuro con IA

Si quieres ver cómo se ve una paleta de gris oscuro en un diseño real, genera mockups rápidos con IA: secciones hero, carteles, packaging y pantallas UI. Usar un conjunto consistente de colores HEX te ayuda a evaluar jerarquía, contraste y “ambiente” antes de comprometerte.

Con Media.io Texto a Imagen, puedes pegar un prompt como en los ejemplos arriba, mantener tu paleta consistente y iterar rápidamente—ideal para moodboards, presentaciones y exploración temprana de marca.

Siguiente: Paleta de colores de piel