El gris oscuro es un neutro moderno que aporta estructura sin la dureza del negro puro. En interfaces, branding e interiores, respalda una tipografía limpia, maquetaciones estables y una jerarquía visual serena.
A continuación encontrarás más de 20 ideas de paletas de color gris oscuro con códigos HEX, además de orientación práctica para combinar acentos, mantener el contraste legible y transformar paletas en sistemas de diseño reales.
En este artículo
- Por qué funcionan tan bien las paletas de gris oscuro
-
- niebla urbana
- piedra y salvia
- minimalismo museístico
- humo de cacao
- nublado costero
- crepúsculo de letrero neón
- estudio lino
- acero ártico
- hormigón rubor
- pizarra forestal
- asfalto a la hora dorada
- marino ajustado
- ático terracota
- iris y tinta
- taller monocromo
- metro menta
- atardecer palo de rosa
- arcilla y grafito
- hormigón cítrico
- botánico invernal
- circuito de cobre
- ¿Qué colores combinan bien con el gris oscuro?
- Cómo usar una paleta gris oscuro en diseños reales
- Crea visuales de paletas gris oscuro con IA
Por qué funcionan tan bien las paletas de gris oscuro
El gris oscuro está en el punto justo entre el negro intenso y el gris claro, por lo que puede encargarse de la navegación, los encabezados y los contornos de la UI sin dominar el contenido. Ese equilibrio hace que los diseños se vean intencionados y equilibrados.
Al ser neutro, el gris oscuro combina fácilmente con acentos cálidos (arena, terracota, dorado) o fríos (verde azulado, azul pizarra, menta). Puedes cambiar el ambiente de manera drástica manteniendo la misma base confiable.
También ayuda a mantener la coherencia entre pantallas e impresión: el gris oscuro reduce el choque de contraste del "negro puro" y suele lucir más refinado en grandes bloques, fondos y diseños donde predomina la tipografía.
Más de 20 ideas de paletas de color gris oscuro (con códigos HEX)
1) Niebla urbana
HEX: #696969 #2F343A #BFC5CC #F2F1ED #C7A27C
Ambiente: tranquilo, metropolitano, pulido
Ideal para: interfaz de landing page para un producto tecnológico
La niebla silenciosa de la ciudad y el concreto pulido vienen a la mente, suavizados por un acento arena cálido. Es ideal en dashboards y landing pages de SaaS donde la claridad importa más que la espectacularidad. Usa el acento topo en botones o métricas clave mientras los títulos permanecen en gris carbón intenso. Consejo: reserva el tono arena para una acción principal para evitar un contraste turbio.
Ejemplo de imagen de niebla urbana generado usando media.io
Media.io es un estudio en línea de IA para crear y editar video, imagen y audio en tu navegador.
2) Piedra y Salvia
HEX: #696969 #3E4247 #A9B7A5 #E7E3DA #7B6D5D
Ambiente: conectada a la tierra, natural, reparadora
Ideal para: identidad y empaque para marca de spa
Tonos piedra y una nota suave de salvia evocan el interior de un baño relajante. Encaja perfectamente en marcas de bienestar, etiquetas y packaging minimalista que buscan transmitir confianza y calma. Usa la salvia como acento protagonista en sellos o llamados y deja que los grises se ocupen de la tipografía. Consejo: imprime la crema clara en papel sin recubrimiento para reforzar la sensación orgánica.
Ejemplo de imagen de piedra y salvia generado usando media.io
3) Minimalismo Museístico
HEX: #696969 #1F2328 #D9D3C7 #FFFFFF #8B7E74
Ambiente: limpio de galería, refinado, lujo silencioso
Ideal para: diseño editorial para revista
Muros de galería, tipografía discreta y una quietud curada definen el ambiente. Esta paleta de gris oscuro se adapta a editoriales y lookbooks donde priman el espacio en blanco y la jerarquía elegante. Usa el casi negro para titulares y combina con greige cálido en frases destacadas para evitar que las páginas resulten frías. Consejo: utiliza solo un acento en los pies de foto para mantener el aire museístico.
Ejemplo de imagen de minimalismo museístico generado usando media.io
4) Humo de Cacao
HEX: #696969 #3B2F2A #8A6F5A #E9DFD3 #171717
Ambiente: íntimo, acogedor, nostálgico
Ideal para: diseño de menú de cafetería
Tonos de espresso ahumado y cacao cálido generan el ambiente acogedor de una cafetería nocturna. Es ideal para menús y materiales impresos pequeños donde debe mantenerse la legibilidad. Usa el fondo crema para el cuerpo de texto y deja el marrón oscuro para secciones y precios. Consejo: agrega textura sutil de papel para que los oscuros no se vean planos.
Ejemplo de imagen de humo de cacao generado usando media.io
5) Nublado Costero
HEX: #696969 #4A6572 #9FB7C3 #F5F7F8 #D2B48C
Ambiente: fresco, aireado, relajante
Ideal para: cabecera y miniaturas de blog de viajes
Los cielos nublados junto al mar se sienten aireados más que lúgubres, gracias a una base blanco hielo. Esta combinación funciona en cabeceras para viajes, sistemas de miniaturas y tarjetas de contenido que requieran calma en su paleta. Usa azul grisáceo para enlaces y acentos pequeños de UI, y reserva el tono arena para distintivos suaves. Consejo: limita los azules saturados para que la paleta permanezca niebla y relajante.
Ejemplo de imagen de nublado costero generado usando media.io
6) Crepúsculo de Letrero Neón
HEX: #696969 #1B1D22 #FF4FA3 #6C5CE7 #F3F3F3
Ambiente: enérgico, nocturno, de vanguardia
Ideal para: cartel para evento de música electrónica
La energía nocturna se expresa en rosas intensos y violeta sobre neutros profundos y ahumados. Estas combinaciones lucen en carteles de eventos y gráficos sociales donde el contraste debe captar la atención de inmediato. Mantén los grises como base, usa el rosa en el titular y el violeta en los detalles secundarios. Consejo: evita degradados a menos que controles el bandeo en impresión.
Ejemplo de imagen de crepúsculo de letrero neón generado usando media.io
7) Estudio Lino
HEX: #696969 #8E8A84 #DCD6CC #FAF7F2 #B58B6A
Ambiente: suave, táctil, artesanal
Ideal para: estilismo de fondo para fotografía de producto minimalista
El lino suave y la luz de estudio crean una atmósfera serena y artesanal. Es ideal para fotos de producto donde se busca una superficie neutra con matiz cálido y natural. Usa el tono arena como acento de atrezo (lazo, etiqueta, tarjeta pequeña) y deja los blancos rotos para la mayor parte de la escena. Consejo: mantén las sombras suaves para que los grises se lean como tela, no como metal.
Ejemplo de imagen de estudio lino generado usando media.io
8) Acero Ártico
HEX: #696969 #22313F #A7B1B7 #E6EEF3 #00A6A6
Ambiente: nítida, técnica, segura
Ideal para: interfaz de dashboard de datos
El acero nítido y los grises helados transmiten una sensación técnica y fiable con un color señal verde azulado limpio. Es perfecto para paneles analíticos y fintech donde los estados y métricas requieren énfasis claro. Combina el verde azulado en gráficos e interruptores y usa el azul marino oscuro para navegación. Consejo: prueba el contraste en textos pequeños para que el gris medio nunca pierda visibilidad.
Ejemplo de imagen de acero ártico generado usando media.io
9) Hormigón Rubor
HEX: #696969 #4C4C4C #F2C6C2 #FFF4F3 #B07A7A
Ambiente: suave, moderno, accesible
Ideal para: plantillas sociales para marca de belleza
El rubor suave sobre el concreto se siente moderno pero amigable, como un estudio minimalista con un resplandor rosado. Es ideal para plantillas sociales de belleza, llamados de productos y promociones sencillas. Usa el rubor para grandes bloques y el rosa más profundo para etiquetas pequeñas, de modo que los grises mantengan todo equilibrado. Consejo de uso: mantén los fondos casi blancos para evitar que los rosas se vean apagados.
Ejemplo de imagen de concreto rubor generado con media.io
10) Pizarra del Bosque
HEX: #696969 #2A3A2E #6F8F72 #E3E7E0 #C7B299
Ambiente: natural, estable, saludable
Ideal para: sitio web de marca ecológica
Los verdes bosque sobre gris pizarra evocan senderos y etiquetas de papel reciclado. Funciona bien para marcas sostenibles que quieren parecer prácticas, no moralizantes. Usa el verde para encabezados e íconos y el gris verdoso pálido como fondo principal. Consejo de uso: añade beige cálido con moderación para evitar que los verdes se vean fríos.
Ejemplo de imagen de pizarra del bosque generado con media.io
11) Asfalto de la Hora Dorada
HEX: #696969 #2D2D2D #F0B429 #F7E7C6 #8C6A3B
Ambiente: audaz, cálido, urbano
Ideal para: diapositivas para pitch de startups
La luz cálida de la hora dorada sobre el asfalto da a este set un impulso urbano y seguro. Es ideal para presentaciones donde quieres autoridad con un toque de optimismo. Usa el amarillo para destacar números clave, mientras los neutros oscuros estructuran la cuadrícula. Consejo de uso: usa la crema como fondo para evitar que el amarillo domine.
Ejemplo de imagen de asfalto hora dorada generado con media.io
12) Azul Marino Sastrería
HEX: #696969 #0F1B2D #2B3A55 #E9EDF2 #C6A15B
Ambiente: profesional, a medida, premium
Ideal para: branding para firma legal
El azul marino a medida y el gris tranquilo se sienten como un traje bien cortado con un pin de latón cepillado. Es adecuado para marcas legales y de consultoría que necesitan credibilidad sin parecer anticuadas. Usa el dorado latón para sellos o divisores y mantén el marino para navegación y encabezados. Consejo de uso: evita usar dorado en texto; úsalo como detalle final.
Ejemplo de imagen de azul marino sastrería generado con media.io
13) Loft Terracota
HEX: #696969 #3C3532 #C76B4B #F3E6DC #8C8A84
Ambiente: cálido, creativo, vivido
Ideal para: mood board de diseño de interiores
La terracota cálida en un loft se siente creativa y acogedora, como macetas de arcilla junto a una gran ventana. Es una opción ideal para interiores, mood boards y publicaciones de decoración. Combina la terracota con crema suave para paredes o fondos, y mantén tonos apagados para siluetas de muebles. Consejo de uso: repite la terracota en pequeñas dosis para cohesión.
Ejemplo de imagen de loft terracota generado con media.io
14) Lirio y Tinta
HEX: #696969 #24243A #6F7BF7 #EDEEFF #B9B0D9
Ambiente: soñador, moderno, ligeramente futurista
Ideal para: pantallas de introducción para app móvil
Sombras oscuras con luz de lirio se sienten soñadoras, como crepúsculo a través de vidrio esmerilado. Esta paleta de grises apagado funciona bien para flujos de onboarding donde se busca calma y pasos claros. Combina el azul lavanda para indicadores y microinteracciones, y usa casi blanco para tarjetas de contenido. Consejo de uso: utiliza el lavanda medio como sombra suave en lugar de negro puro.
Ejemplo de imagen de lirio y tinta generado con media.io
15) Taller Monocromo
HEX: #696969 #111111 #4D4D4D #CFCFCF #F8F8F8
Ambiente: industrial, enfocado, directo
Ideal para: portafolio web para fotógrafo
El monocromo industrial se siente como una pared de taller cubierta de impresiones y hojas de contacto. Es perfecto para portafolios que necesitan que las imágenes destaquen mientras la UI pasa desapercibida. Usa el negro más oscuro para navegación y los grises claros para espaciado y separadores. Consejo de uso: mantén los estados hover sutiles para que la obra sea la protagonista.
Ejemplo de imagen de taller monocromo generado con media.io
16) Menta Metro
HEX: #696969 #30363B #7FD1B9 #E9FAF5 #F4C95D
Ambiente: fresco, animado, contemporáneo
Ideal para: banner publicitario para app fintech
La menta fresca sobre gris metro se siente moderna y optimista, como un viaje limpio con sol sobre el vidrio. Estas combinaciones son ideales para banners fintech y destacados donde buscas confianza y energía. Usa menta para formas principales y el amarillo como chispa para distintivos o tasas. Consejo de uso: deja espacio blanco para que la menta se conserve nítida, no estridente.
Ejemplo de imagen de menta metro generado con media.io
17) Atardecer en Madera de Rosa
HEX: #696969 #2B2024 #6E3B3B #EAD7D7 #D1A054
Ambiente: romántico, dramático, elegante
Ideal para: set de invitaciones de boda
La madera de rosa y la luz tenue se sienten románticas y dramáticas, como terciopelo a la luz de las velas. Es ideal para sets de invitaciones y papelería formal con un toque moderno. Combina el fondo rosa polvoriento con texto burdeos y usa el dorado como detalle resaltante para nombres o bordes. Consejo de uso: mantén los acentos dorados finos para un diseño refinado.
Ejemplo de imagen de atardecer madera de rosa generado con media.io
18) Arcilla y Grafito
HEX: #696969 #2E2A28 #B38B6D #EFE7DD #6F5E53
Ambiente: terroso, artesanal, sólido
Ideal para: etiquetas de empaque para tienda de cerámica
Arcilla terrosa y grafito dan una sensación artesanal, como un alfarero perfilando un cuenco en una mañana tranquila. Es ideal para etiquetas, tags y pequeños empaques donde la textura cuenta la historia. Usa la arcilla cálida con crema para la base de la etiqueta y grafito para tipografía nítida. Consejo de uso: añade un sello simple en marrón medio para reforzar el estilo artesanal.
Ejemplo de imagen de arcilla y grafito generado con media.io
19) Concreto Cítrico
HEX: #696969 #333333 #D7E04B #F5F6E8 #A3A7AA
Ambiente: brillante, divertido, moderno
Ideal para: anuncio de producto deportivo
Los neutros de concreto con un toque cítrico transmiten modernidad, como un lanzamiento deportivo en un estudio limpio. Esta combinación de gris apagado es excelente para anuncios de producto donde se necesita impacto sin ser caótico. Usa el acento lima-pera en beneficios clave y el blanco pálido para espacio negativo. Consejo de uso: utiliza la lima en un elemento focal por layout para impacto máximo.
Ejemplo de imagen de concreto cítrico generado con media.io
20) Botánico Invernal
HEX: #696969 #46505A #8AA0A6 #F1F4F6 #B7A18B
Ambiente: frío, delicado, etéreo
Ideal para: set de ilustración botánica en acuarela
Botánicos invernales frescos se sienten delicados, como hojas pálidas prensadas en un diario. Estas combinaciones en gris apagado funcionan para sets de ilustración y papelería donde buscas suavidad sin perder estructura. Usa azul grisáceo para tallos y sombras, y mantén los tonos más claros como lavado de papel. Consejo de uso: deja el beige como sutiles semillas para dar calidez a la composición.
Ejemplo de imagen de botánico invernal generado con media.io
21) Circuito Cobre
HEX: #696969 #202225 #B87333 #E6E6E6 #4B6E77
Ambiente: industrial, tecnológico, premium
Ideal para: empaque de producto hardware
El cobre sobre grafito oscuro se siente como circuitería bajo lámpara de escritorio, industrial pero premium. Funciona para empaques de hardware y fichas técnicas cuando buscas un look técnico pero cálido. Usa el cobre para líneas pequeñas e íconos, y gris pálido para paneles legibles. Consejo de uso: repite el azul verdoso apagado en etiquetas secundarias para organizar variantes.
Ejemplo de imagen de circuito cobre generado con media.io
¿Qué colores combinan bien con el gris oscuro?
El gris apagado combina bien con neutros cálidos como arena, topo, crema y terracota cuando buscas una sensación acogedora y humana. Estos toques mantienen la paleta equilibrada y sin verse fría o demasiado industrial.
Para un look nítido y moderno, combina gris apagado con tonos fríos como turquesa, azul pizarra, menta o blancos helados. Esta dirección funciona especialmente bien en dashboards, SaaS y layouts editoriales que requieren claridad.
Si necesitas mucha energía, añade un color “señal” brillante (neón rosa, lima-pera o amarillo dorado) y mantén el resto apagado. La clave es la mesura: un acento fuerte contra grises controlados transmite calidad, no caos.
Cómo usar una paleta gris oscuro en diseños reales
Empieza asignando roles: usa gris apagado para texto base o estructura UI, casi negro para encabezados y gris claro o blanco sucio para fondos principales. Reserva el color de acento para acciones primarias, destacados y datos clave.
Cuida el contraste, especialmente cuando gris apagado va sobre fondos gris medio. Para legibilidad, haz el texto más oscuro o la superficie más clara, y prueba con letra pequeña en varias pantallas.
En branding e impresión, considera la textura y el papel: cartulina sin cubrir, grano sutil y acabado mate hacen que gris apagado se sienta táctil y refinado. Mantén los acentos de color consistentes para que el sistema permanezca cohesivo.
Crea visuales de paletas gris oscuro con IA
¿Quieres ver cómo luce el esquema gris apagado en una landing, póster, maqueta de empaque o moodboard? Genera conceptuales rápidos desde un prompt y ajusta hasta que el contraste y el ambiente sean correctos.
Describe el formato (UI, impresión, foto de producto), iluminación y materiales, e incluye pistas de paleta (gris apagado dominante, color acento, tono de fondo). Así es más fácil validar ideas antes de producir activos finales.
Preguntas frecuentes sobre paleta de color Gris Apagado
-
¿Cuál es el código HEX del gris apagado?
El color web estándar “dimgray” es #696969. Es un gris medio a oscuro equilibrado que funciona bien para tipografía, estructura UI y fondos neutros. -
¿Es mejor el gris apagado que el negro puro para texto?
A menudo, sí. El gris oscuro puede reducir el contraste intenso y la fatiga visual en pantallas brillantes, manteniendo una buena legibilidad—especialmente en textos grandes, títulos y etiquetas de UI (verifica el contraste para el texto de cuerpo pequeño). -
¿Qué colores de acento combinan mejor con el gris oscuro?
Los acentos cálidos como arena, terracota y dorado aportan confort; los acentos fríos como verde azulado, azul pizarra y menta dan una sensación limpia y técnica; un acento vibrante (rosa o lima-pera) crea énfasis fuerte cuando se usa con moderación. -
¿Cómo evito que una paleta de gris oscuro se vea "aburrida"?
Aumenta el contraste utilizando un casi negro para los títulos principales, usa un fondo blanco roto para dar espacio visual, e introduce un solo color de acento en puntos clave (botones, insignias, destacados) en vez de repartir acentos por todas partes. -
¿El gris oscuro funciona para identidades de marca?
Sí. El gris oscuro comunica estabilidad y sofisticación, haciendo de él una base sólida para marcas profesionales. Combínalo con un acento distintivo (menta, dorado latón, rubor o cobre) para que la identidad sea memorable. -
¿Cuál es la mejor forma de usar gris oscuro en el diseño de UI?
Utilízalo para textos secundarios, bordes, íconos o superficies de navegación, y recurre a neutros más claros para los fondos de contenido principal. Reserva un solo color de acento con alto contraste para acciones principales y estados de estado. -
¿Cómo puedo visualizar rápidamente ideas de paletas con gris oscuro antes de diseñar?
Utiliza una herramienta de IA de texto a imagen para generar prototipos (pantallas de UI, carteles, empaques, interiores) a partir de instrucciones que especifiquen tu paleta y materiales, luego refínalos según la legibilidad y el ambiente.
Siguiente: Paleta de colores pera
